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

This reverts commit 215b9c2e4be3ceb67a958a910076aa1640190858.

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

@@ -88,7 +88,7 @@
 
             <p class="toggle">
 
-                <mat-form-field>
+                <mat-form-field floatPlaceholder="float">
                     <input matInput placeholder="Display Aspect" [(ngModel)]="desiredAspect">
                 </mat-form-field>
 
@@ -97,7 +97,7 @@
 
             <p class="toggle">
                 <ng-container *ngIf="isPreset">
-                    <mat-form-field>
+                    <mat-form-field floatPlaceholder="float">
                         <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,44 +17,18 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
-import { InfoDrawerComponent, InfoDrawerTabComponent, NotificationService, ViewerComponent } from '@alfresco/adf-core';
+import { NotificationService } 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,7 +16,10 @@
  */
 
 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 = [
@@ -27,7 +30,20 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes), FileViewComponent],
+    imports: [
+        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,12 +19,15 @@ 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';
@@ -37,10 +40,13 @@ 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';
@@ -62,9 +68,6 @@ 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: [
@@ -88,13 +91,13 @@ import { LOGIN_DIRECTIVES } from './login';
         FormBaseModule,
         CommentsModule,
         CommentListModule,
-        ...LOGIN_DIRECTIVES,
+        LoginModule,
         LanguageMenuModule,
-        ...INFO_DRAWER_DIRECTIVES,
+        InfoDrawerModule,
         DataTableModule,
         ButtonsMenuModule,
         TemplateModule,
-        IconComponent,
+        IconModule,
         SortingPickerModule,
         NotificationHistoryModule,
         SearchTextModule,
@@ -127,15 +130,15 @@ import { LOGIN_DIRECTIVES } from './login';
         FormBaseModule,
         CommentsModule,
         CommentListModule,
-        ...LOGIN_DIRECTIVES,
+        LoginModule,
         LanguageMenuModule,
-        ...INFO_DRAWER_DIRECTIVES,
+        InfoDrawerModule,
         DataTableModule,
         TranslateModule,
         ButtonsMenuModule,
         TemplateModule,
         SortingPickerModule,
-        IconComponent,
+        IconModule,
         NotificationHistoryModule,
         SearchTextModule,
         BlankPageModule,

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

@@ -16,12 +16,9 @@
  */
 
 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,
@@ -36,20 +33,6 @@ export class InfoDrawerLayoutComponent {
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({
+@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
-    standalone: true,
+@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
-    selector: '[adf-info-drawer-title], [info-drawer-title]'
+@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
-})
-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 { INFO_DRAWER_DIRECTIVES } from './info-drawer.module';
+import { InfoDrawerModule } 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, ...INFO_DRAWER_DIRECTIVES]
+            imports: [CoreStoryModule, InfoDrawerModule]
         })
     ],
     parameters: {
@@ -200,9 +200,10 @@ export default {
     }
 } as Meta;
 
-const tabLayoutTemplate: Story<InfoDrawerComponent> = (args: InfoDrawerComponent) => ({
+const tabLayoutTemplate: Story<InfoDrawerModule> = (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>
@@ -222,9 +223,10 @@ const tabLayoutTemplate: Story<InfoDrawerComponent> = (args: InfoDrawerComponent
         </adf-info-drawer>`
 });
 
-const singleLayoutTemplate: Story<InfoDrawerComponent> = (args: InfoDrawerComponent) => ({
+const singleLayoutTemplate: Story<InfoDrawerModule> = (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>

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

@@ -15,32 +15,10 @@
  * limitations under the License.
  */
 
-import {
+import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-    Component,
+import { MatTabChangeEvent } from '@angular/material/tabs';
-    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
 })
@@ -59,17 +37,6 @@ 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,
@@ -78,7 +45,7 @@ export class InfoDrawerTabComponent {
 export class InfoDrawerComponent {
     /** The title of the info drawer (string or translation key). */
     @Input()
-    title: string | null = null;
+    title: string|null = null;
 
     @Input()
     icon: string | null = null;

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

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

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

@@ -23,11 +23,21 @@ 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: [...LOGIN_DIRECTIVES],
+    imports: [
-    exports: [...LOGIN_DIRECTIVES]
+        LoginComponent,
+        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,8 +22,7 @@ import {
     FormFieldValidator,
     FormModel,
     FormOutcomeEvent,
-    InfoDrawerComponent,
+    InfoDrawerModule,
-    InfoDrawerTabComponent,
     UpdateNotification
 } from '@alfresco/adf-core';
 import {
@@ -54,7 +53,6 @@ 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',
@@ -64,16 +62,14 @@ import { MatCardModule } from '@angular/material/card';
         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'],