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

2025-05-19 17:14:57 +00:00 · 2024-06-21 10:05:15 -04:00 · 2024-06-21 10:05:15 -04:00 · 215b9c2e4b
commit 215b9c2e4b
parent 3fee18c251
11 changed files with 136 additions and 101 deletions
--- a/demo-shell/src/app/components/file-view/file-view.component.html
+++ b/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>
--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/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
 })
--- a/demo-shell/src/app/components/file-view/file-view.module.ts
+++ b/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: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        CoreModule,
-        ContentModule,
-        InfoDrawerModule,
-        ContentModule,
-        ContentDirectiveModule,
-        ContentMetadataModule,
-        VersionManagerModule
-    ],
-    declarations: [FileViewComponent],
+    imports: [RouterModule.forChild(routes), FileViewComponent],
    exports: [FileViewComponent]
 })
-export class FileViewModule {
-
-}
+export class FileViewModule {}
--- a/lib/core/src/lib/core.module.ts
+++ b/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,
--- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.ts
+++ b/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({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
-@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
+@Directive({
+    standalone: true,
+    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 {}
--- a/lib/core/src/lib/info-drawer/info-drawer.component.html
+++ b/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 info-drawer-buttons select="[info-drawer-buttons]"></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-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>

    <ng-template #tabLayout>
--- a/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
+++ b/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:
-        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
+    template: `<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:
-        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
+    template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
            <div info-drawer-title>File info</div>

            <div info-drawer-buttons>
--- a/lib/core/src/lib/info-drawer/info-drawer.component.ts
+++ b/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 { MatTabChangeEvent } from '@angular/material/tabs';
+import {
+    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,
--- a/lib/core/src/lib/info-drawer/info-drawer.module.ts
+++ b/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({
-    imports: [
-        CommonModule,
-        MatTabsModule,
-        MatIconModule,
-        MatCardModule,
-        TranslateModule
-    ],
-    declarations: [
+export const INFO_DRAWER_DIRECTIVES = [
    InfoDrawerLayoutComponent,
    InfoDrawerTabComponent,
    InfoDrawerComponent,
    InfoDrawerTitleDirective,
    InfoDrawerButtonsDirective,
    InfoDrawerContentDirective
-    ],
-    exports: [
-        InfoDrawerLayoutComponent,
-        InfoDrawerTabComponent,
-        InfoDrawerComponent,
-        InfoDrawerTitleDirective,
-        InfoDrawerButtonsDirective,
-        InfoDrawerContentDirective,
-        MatTabsModule,
-        MatCardModule,
-        MatIconModule
-    ]
+];
+
+/** @deprecated use `INFO_DRAWER_DIRECTIVES` or import standalone components directly */
+@NgModule({
+    imports: [...INFO_DRAWER_DIRECTIVES],
+    exports: [...INFO_DRAWER_DIRECTIVES]
 })
 export class InfoDrawerModule {}
--- a/lib/core/src/lib/login/login.module.ts
+++ b/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: [
-        LoginComponent,
-        LoginFooterDirective,
-        LoginHeaderDirective,
-        LoginDialogComponent,
-        LoginDialogPanelComponent
-    ],
-    exports: [
-        LoginComponent,
-        LoginFooterDirective,
-        LoginHeaderDirective,
-        LoginDialogComponent,
-        LoginDialogPanelComponent
-    ]
+    imports: [...LOGIN_DIRECTIVES],
+    exports: [...LOGIN_DIRECTIVES]
 })
-export class LoginModule {
-}
+export class LoginModule {}
--- a/lib/process-services/src/lib/task-list/components/task-details/task-details.component.ts
+++ b/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'],