ACS-8255: Migrate InfoDrawer component to Standalone (#9846)

demo-shell/src/app/components/file-view/file-view.component.html

@@ -88,7 +88,7 @@
 
             <p class="toggle">
 
-                <mat-form-field floatPlaceholder="float">
+                <mat-form-field>
                     <input matInput placeholder="Display Aspect" [(ngModel)]="desiredAspect">
                 </mat-form-field>
 
@@ -97,7 +97,7 @@
 
             <p class="toggle">
                 <ng-container *ngIf="isPreset">
-                    <mat-form-field floatPlaceholder="float">
+                    <mat-form-field>
                         <input matInput placeholder="Custom Preset" [(ngModel)]="customPreset" data-automation-id="adf-text-custom-preset">
                     </mat-form-field>
                     <button mat-raised-button id="adf-metadata-aplly" (click)="applyCustomPreset()">Apply</button>

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -17,18 +17,44 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
-import { NotificationService } from '@alfresco/adf-core';
+import { InfoDrawerComponent, InfoDrawerTabComponent, NotificationService, ViewerComponent } from '@alfresco/adf-core';
 import {
+    AlfrescoViewerComponent,
     AllowableOperationsEnum,
+    ContentMetadataModule,
     ContentService,
     FileUploadErrorEvent,
+    NodeCommentsModule,
     NodesApiService,
-    PermissionsEnum
+    PermissionsEnum,
+    VersionManagerModule
 } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
+import { CommonModule } from '@angular/common';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'app-file-view',
+    standalone: true,
+    imports: [
+        CommonModule,
+        AlfrescoViewerComponent,
+        ViewerComponent,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        NodeCommentsModule,
+        ContentMetadataModule,
+        MatSlideToggleModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        MatButtonModule,
+        VersionManagerModule
+    ],
     templateUrl: './file-view.component.html',
     encapsulation: ViewEncapsulation.None
 })

demo-shell/src/app/components/file-view/file-view.module.ts

@@ -16,10 +16,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { CoreModule, InfoDrawerModule } from '@alfresco/adf-core';
-import { ContentModule, ContentDirectiveModule, VersionManagerModule, ContentMetadataModule } from '@alfresco/adf-content-services';
 import { FileViewComponent } from './file-view.component';
 
 const routes: Routes = [
@@ -30,20 +27,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports: [
+    imports: [RouterModule.forChild(routes), FileViewComponent],
-        CommonModule,
-        RouterModule.forChild(routes),
-        CoreModule,
-        ContentModule,
-        InfoDrawerModule,
-        ContentModule,
-        ContentDirectiveModule,
-        ContentMetadataModule,
-        VersionManagerModule
-    ],
-    declarations: [FileViewComponent],
     exports: [FileViewComponent]
 })
-export class FileViewModule {
+export class FileViewModule {}
-
-}

lib/core/src/lib/core.module.ts

@@ -19,15 +19,12 @@ import { CommonModule } from '@angular/common';
 import { APP_INITIALIZER, NgModule, ModuleWithProviders } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateLoader, TranslateStore, TranslateService } from '@ngx-translate/core';
-
 import { MaterialModule } from './material.module';
 import { ABOUT_DIRECTIVES } from './about/about.module';
 import { CardViewModule } from './card-view/card-view.module';
 import { ContextMenuModule } from './context-menu/context-menu.module';
 import { DataTableModule } from './datatable/datatable.module';
-import { InfoDrawerModule } from './info-drawer/info-drawer.module';
 import { LanguageMenuModule } from './language-menu/language-menu.module';
-import { LoginModule } from './login/login.module';
 import { PaginationModule } from './pagination/pagination.module';
 import { ToolbarModule } from './toolbar/toolbar.module';
 import { ViewerModule } from './viewer/viewer.module';
@@ -40,13 +37,10 @@ import { TemplateModule } from './templates/template.module';
 import { ClipboardModule } from './clipboard/clipboard.module';
 import { NotificationHistoryModule } from './notifications/notification-history.module';
 import { BlankPageModule } from './blank-page/blank-page.module';
-
 import { DirectiveModule } from './directives/directive.module';
 import { PipeModule } from './pipes/pipe.module';
-
 import { TranslationService } from './translation/translation.service';
 import { SortingPickerModule } from './sorting-picker/sorting-picker.module';
-import { IconModule } from './icon/icon.module';
 import { TranslateLoaderService } from './translation/translate-loader.service';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { directionalityConfigFactory } from './common/services/directionality-config-factory';
@@ -68,6 +62,9 @@ import { AdfDateTimeFnsAdapter } from './common/utils/datetime-fns-adapter';
 import { AppConfigPipe, StoragePrefixFactory } from './app-config';
 import { UnsavedChangesDialogModule } from './dialogs';
 import { DynamicChipListModule } from './dynamic-chip-list';
+import { INFO_DRAWER_DIRECTIVES } from './info-drawer';
+import { IconComponent } from './icon';
+import { LOGIN_DIRECTIVES } from './login';
 
 @NgModule({
     imports: [
@@ -91,13 +88,13 @@ import { DynamicChipListModule } from './dynamic-chip-list';
         FormBaseModule,
         CommentsModule,
         CommentListModule,
-        LoginModule,
+        ...LOGIN_DIRECTIVES,
         LanguageMenuModule,
-        InfoDrawerModule,
+        ...INFO_DRAWER_DIRECTIVES,
         DataTableModule,
         ButtonsMenuModule,
         TemplateModule,
-        IconModule,
+        IconComponent,
         SortingPickerModule,
         NotificationHistoryModule,
         SearchTextModule,
@@ -130,15 +127,15 @@ import { DynamicChipListModule } from './dynamic-chip-list';
         FormBaseModule,
         CommentsModule,
         CommentListModule,
-        LoginModule,
+        ...LOGIN_DIRECTIVES,
         LanguageMenuModule,
-        InfoDrawerModule,
+        ...INFO_DRAWER_DIRECTIVES,
         DataTableModule,
         TranslateModule,
         ButtonsMenuModule,
         TemplateModule,
         SortingPickerModule,
-        IconModule,
+        IconComponent,
         NotificationHistoryModule,
         SearchTextModule,
         BlankPageModule,

lib/core/src/lib/info-drawer/info-drawer-layout.component.ts

@@ -16,9 +16,12 @@
  */
 
 import { Component, Directive, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'adf-info-drawer-layout',
+    standalone: true,
+    imports: [CommonModule],
     templateUrl: './info-drawer-layout.component.html',
     styleUrls: ['./info-drawer-layout.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -33,6 +36,20 @@ export class InfoDrawerLayoutComponent {
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
+@Directive({
-@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
+    standalone: true,
-@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
+    selector: '[adf-info-drawer-title], [info-drawer-title]'
+})
+export class InfoDrawerTitleDirective {}
+
+@Directive({
+    standalone: true,
+    selector: '[adf-info-drawer-buttons], [info-drawer-buttons]'
+})
+export class InfoDrawerButtonsDirective {}
+
+@Directive({
+    standalone: true,
+    selector: '[adf-info-drawer-content], [info-drawer-content]'
+})
+export class InfoDrawerContentDirective {}

lib/core/src/lib/info-drawer/info-drawer.component.html

@@ -2,8 +2,8 @@
     <img *ngIf="icon" class="adf-info-drawer-icon" alt="{{ 'INFO_DRAWER.ICON' | translate }}" src="{{ icon }}" info-drawer-node-icon>
     <div *ngIf="title" role="heading" aria-level="1" title="{{ title | translate }}" info-drawer-title>{{ title | translate }}</div>
 
-    <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
+    <ng-content *ngIf="!title" [info-drawer-title] select="[info-drawer-title]"></ng-content>
-    <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
+    <ng-content [info-drawer-buttons] select="[info-drawer-buttons]"></ng-content>
     <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
 
     <ng-template #tabLayout>

lib/core/src/lib/info-drawer/info-drawer.component.stories.ts

@@ -18,7 +18,7 @@
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { CoreStoryModule } from '../testing/core.story.module';
 import { InfoDrawerComponent } from './info-drawer.component';
-import { InfoDrawerModule } from './info-drawer.module';
+import { INFO_DRAWER_DIRECTIVES } from './info-drawer.module';
 import { mockTabText, mockCardText } from './mock/info-drawer.mock';
 
 export default {
@@ -26,7 +26,7 @@ export default {
     title: 'Core/Info Drawer/Info Drawer',
     decorators: [
         moduleMetadata({
-            imports: [CoreStoryModule, InfoDrawerModule]
+            imports: [CoreStoryModule, ...INFO_DRAWER_DIRECTIVES]
         })
     ],
     parameters: {
@@ -200,10 +200,9 @@ export default {
     }
 } as Meta;
 
-const tabLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
+const tabLayoutTemplate: Story<InfoDrawerComponent> = (args: InfoDrawerComponent) => ({
     props: args,
-    template:
+    template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
-        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
             <div info-drawer-buttons>
                 <mat-icon>clear</mat-icon>
             </div>
@@ -223,10 +222,9 @@ const tabLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) =
         </adf-info-drawer>`
 });
 
-const singleLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
+const singleLayoutTemplate: Story<InfoDrawerComponent> = (args: InfoDrawerComponent) => ({
     props: args,
-    template:
+    template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
-        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
             <div info-drawer-title>File info</div>
 
             <div info-drawer-buttons>

lib/core/src/lib/info-drawer/info-drawer.component.ts

@@ -15,10 +15,32 @@
  * limitations under the License.
  */
 
-import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
-import { MatTabChangeEvent } from '@angular/material/tabs';
+    Component,
+    ContentChildren,
+    EventEmitter,
+    HostListener,
+    Input,
+    Output,
+    QueryList,
+    TemplateRef,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
+import { CommonModule } from '@angular/common';
+import {
+    InfoDrawerButtonsDirective,
+    InfoDrawerContentDirective,
+    InfoDrawerLayoutComponent,
+    InfoDrawerTitleDirective
+} from './info-drawer-layout.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+
 @Component({
     selector: 'adf-info-drawer-tab',
+    standalone: true,
     template: '<ng-template><ng-content></ng-content></ng-template>',
     encapsulation: ViewEncapsulation.None
 })
@@ -37,6 +59,17 @@ export class InfoDrawerTabComponent {
 
 @Component({
     selector: 'adf-info-drawer',
+    standalone: true,
+    imports: [
+        CommonModule,
+        InfoDrawerLayoutComponent,
+        TranslateModule,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective,
+        MatTabsModule,
+        MatIconModule
+    ],
     templateUrl: './info-drawer.component.html',
     styleUrls: ['./info-drawer.component.scss'],
     encapsulation: ViewEncapsulation.None,

lib/core/src/lib/info-drawer/info-drawer.module.ts

@@ -15,41 +15,27 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsDirective, InfoDrawerContentDirective } from './info-drawer-layout.component';
+import {
+    InfoDrawerLayoutComponent,
+    InfoDrawerTitleDirective,
+    InfoDrawerButtonsDirective,
+    InfoDrawerContentDirective
+} from './info-drawer-layout.component';
 import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatCardModule } from '@angular/material/card';
 
-@NgModule({
+export const INFO_DRAWER_DIRECTIVES = [
-    imports: [
-        CommonModule,
-        MatTabsModule,
-        MatIconModule,
-        MatCardModule,
-        TranslateModule
-    ],
-    declarations: [
     InfoDrawerLayoutComponent,
     InfoDrawerTabComponent,
     InfoDrawerComponent,
     InfoDrawerTitleDirective,
     InfoDrawerButtonsDirective,
     InfoDrawerContentDirective
-    ],
+];
-    exports: [
+
-        InfoDrawerLayoutComponent,
+/** @deprecated use `INFO_DRAWER_DIRECTIVES` or import standalone components directly */
-        InfoDrawerTabComponent,
+@NgModule({
-        InfoDrawerComponent,
+    imports: [...INFO_DRAWER_DIRECTIVES],
-        InfoDrawerTitleDirective,
+    exports: [...INFO_DRAWER_DIRECTIVES]
-        InfoDrawerButtonsDirective,
-        InfoDrawerContentDirective,
-        MatTabsModule,
-        MatCardModule,
-        MatIconModule
-    ]
 })
 export class InfoDrawerModule {}

lib/core/src/lib/login/login.module.ts

@@ -23,21 +23,11 @@ import { LoginComponent } from './components/login/login.component';
 import { LoginFooterDirective } from './directives/login-footer.directive';
 import { LoginHeaderDirective } from './directives/login-header.directive';
 
+export const LOGIN_DIRECTIVES = [LoginComponent, LoginFooterDirective, LoginHeaderDirective, LoginDialogComponent, LoginDialogPanelComponent];
+
+/** @deprecated use `LOGIN_DIRECTIVES` or import standalone components directly */
 @NgModule({
-    imports: [
+    imports: [...LOGIN_DIRECTIVES],
-        LoginComponent,
+    exports: [...LOGIN_DIRECTIVES]
-        LoginFooterDirective,
-        LoginHeaderDirective,
-        LoginDialogComponent,
-        LoginDialogPanelComponent
-    ],
-    exports: [
-        LoginComponent,
-        LoginFooterDirective,
-        LoginHeaderDirective,
-        LoginDialogComponent,
-        LoginDialogPanelComponent
-    ]
 })
-export class LoginModule {
+export class LoginModule {}
-}

lib/process-services/src/lib/task-list/components/task-details/task-details.component.ts

@@ -22,7 +22,8 @@ import {
     FormFieldValidator,
     FormModel,
     FormOutcomeEvent,
-    InfoDrawerModule,
+    InfoDrawerComponent,
+    InfoDrawerTabComponent,
     UpdateNotification
 } from '@alfresco/adf-core';
 import {
@@ -53,6 +54,7 @@ import { TaskHeaderComponent } from '../task-header/task-header.component';
 import { TaskCommentsComponent } from '../../../task-comments';
 import { ChecklistComponent } from '../checklist/checklist.component';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
     selector: 'adf-task-details',
@@ -62,14 +64,16 @@ import { MatButtonModule } from '@angular/material/button';
         TranslateModule,
         TaskFormComponent,
         AttachFormComponent,
-        InfoDrawerModule,
         PeopleSearchComponent,
         TaskHeaderComponent,
         PeopleComponent,
         TaskCommentsComponent,
         ChecklistComponent,
         MatDialogModule,
-        MatButtonModule
+        MatButtonModule,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        MatCardModule
     ],
     templateUrl: './task-details.component.html',
     styleUrls: ['./task-details.component.scss'],