[ACS-7382] Standalone core directives, improved lint performance (#9559)

lib/core/.eslintignore

@@ -1 +1,2 @@
 .storybook
+coverage

lib/core/src/lib/directives/directive.module.ts

@@ -15,38 +15,17 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-
 import { HighlightDirective } from './highlight.directive';
 import { LogoutDirective } from './logout.directive';
 import { UploadDirective } from './upload.directive';
 import { TooltipCardDirective } from './tooltip-card/tooltip-card.directive';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { TooltipCardComponent } from './tooltip-card/tooltip-card.component';
 import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
 
 @NgModule({
-    imports: [
+    imports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective],
-        CommonModule,
+    exports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective]
-        MaterialModule,
-        OverlayModule
-    ],
-    declarations: [
-        HighlightDirective,
-        LogoutDirective,
-        UploadDirective,
-        TooltipCardDirective,
-        TooltipCardComponent,
-        InfiniteSelectScrollDirective
-    ],
-    exports: [
-        HighlightDirective,
-        LogoutDirective,
-        UploadDirective,
-        TooltipCardDirective,
-        InfiniteSelectScrollDirective
-    ]
 })
+/** @deprecated This module is deprecated and will be removed in a future release. Please consider importing standalone components and directives directly. */
 export class DirectiveModule {}

lib/core/src/lib/directives/highlight.directive.ts

@@ -21,10 +21,10 @@ import { Directive, ElementRef, Input, Renderer2, AfterViewChecked } from '@angu
 import { HighlightTransformService, HighlightTransformResult } from '../common/services/highlight-transform.service';
 
 @Directive({
-    selector: '[adf-highlight]'
+    selector: '[adf-highlight]',
+    standalone: true
 })
 export class HighlightDirective implements AfterViewChecked {
-
     /** Class selector for highlightable elements. */
     @Input('adf-highlight-selector')
     selector: string = '';
@@ -37,11 +37,7 @@ export class HighlightDirective implements AfterViewChecked {
     @Input('adf-highlight-class')
     classToApply: string = 'adf-highlight';
 
-    constructor(
+    constructor(private el: ElementRef, private renderer: Renderer2, private highlightTransformService: HighlightTransformService) {}
-        private el: ElementRef,
-        private renderer: Renderer2,
-        private highlightTransformService: HighlightTransformService) {
-    }
 
     ngAfterViewChecked() {
         this.highlight();
@@ -52,7 +48,11 @@ export class HighlightDirective implements AfterViewChecked {
             const elements = this.el.nativeElement.querySelectorAll(selector);
 
             elements.forEach((element) => {
-                const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight(element.innerHTML, search, classToApply);
+                const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight(
+                    element.innerHTML,
+                    search,
+                    classToApply
+                );
                 if (highlightTransformResult.changed) {
                     this.renderer.setProperty(element, 'innerHTML', highlightTransformResult.text);
                 }

lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts

@@ -18,22 +18,21 @@
 import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
-import {  MatSelect, MatSelectModule } from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatSelectHarness } from '@angular/material/select/testing';
 
 @Component({
-    template: `
+    template: ` <mat-select adf-infinite-select-scroll (scrollEnd)="load()">
-        <mat-select adf-infinite-select-scroll (scrollEnd)="load()" >
+        <mat-option *ngFor="let option of options; let idx = index">
-            <mat-option *ngFor="let option of options; let idx=index">
+            {{ option.text }}
-                {{ option.text }}
+        </mat-option>
-            </mat-option>
+    </mat-select>`
-        </mat-select>`
 })
 class TestComponent {
-    options = new Array(50).fill({text: 'dummy'});
+    options = new Array(50).fill({ text: 'dummy' });
 
     @ViewChild(MatSelect, { static: true })
     matSelect: MatSelect;
@@ -43,7 +42,7 @@ class TestComponent {
     }
 
     load() {
-        this.options.push(...new Array(10).fill({text: 'dummy'}));
+        this.options.push(...new Array(10).fill({ text: 'dummy' }));
     }
 }
 
@@ -54,14 +53,8 @@ describe('InfiniteSelectScrollDirective', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            imports: [MatSelectModule, NoopAnimationsModule, InfiniteSelectScrollDirective],
-                MatSelectModule,
+            declarations: [TestComponent]
-                NoopAnimationsModule
-            ],
-            declarations: [
-                TestComponent,
-                InfiniteSelectScrollDirective
-            ]
         });
         fixture = TestBed.createComponent(TestComponent);
         component = fixture.componentInstance;
@@ -77,7 +70,7 @@ describe('InfiniteSelectScrollDirective', () => {
 
     it('should call an action on scrollEnd event', async () => {
         const select = await loader.getHarness(MatSelectHarness);
-        const panel = (await select.host());
+        const panel = await select.host();
 
         await panel.dispatchEvent('scrollEnd');
 

lib/core/src/lib/directives/infinite-select-scroll.directive.ts

@@ -23,7 +23,8 @@ import { takeUntil } from 'rxjs/operators';
 const SELECT_ITEM_HEIGHT_EM = 3;
 
 @Directive({
-    selector: '[adf-infinite-select-scroll]'
+    selector: '[adf-infinite-select-scroll]',
+    standalone: true
 })
 export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
     static readonly MAX_ITEMS = 50;
@@ -37,14 +38,12 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
     constructor(@Inject(MatSelect) private matSelect: MatSelect) {}
 
     ngAfterViewInit() {
-        this.matSelect.openedChange
+        this.matSelect.openedChange.pipe(takeUntil(this.onDestroy$)).subscribe((opened: boolean) => {
-            .pipe(takeUntil(this.onDestroy$))
+            if (opened) {
-            .subscribe((opened: boolean) => {
+                this.itemHeightToWaitBeforeLoadNext = this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2);
-                if (opened) {
+                this.matSelect.panel.nativeElement.addEventListener('scroll', (event: Event) => this.handleScrollEvent(event));
-                    this.itemHeightToWaitBeforeLoadNext = (this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2));
+            }
-                    this.matSelect.panel.nativeElement.addEventListener('scroll', (event: Event) => this.handleScrollEvent(event));
+        });
-                }
-            });
     }
 
     ngOnDestroy() {
@@ -60,7 +59,7 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy {
 
     private isScrollInNextFetchArea(event: Event): boolean {
         const target = event.target as HTMLElement;
-        return target.scrollTop >= (target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext);
+        return target.scrollTop >= target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext;
     }
 
     private getItemHeight(): number {

lib/core/src/lib/directives/logout.directive.ts

@@ -21,10 +21,10 @@ import { AppConfigService } from '../app-config/app-config.service';
 import { AuthenticationService } from '../auth/services/authentication.service';
 
 @Directive({
-    selector: '[adf-logout]'
+    selector: '[adf-logout]',
+    standalone: true
 })
 export class LogoutDirective implements OnInit {
-
     /** URI to redirect to after logging out. */
     @Input()
     redirectUri: string;
@@ -33,15 +33,15 @@ export class LogoutDirective implements OnInit {
     @Input()
     enableRedirect: boolean = true;
 
-    constructor(private elementRef: ElementRef,
+    constructor(
-                private renderer: Renderer2,
+        private elementRef: ElementRef,
-                private router: Router,
+        private renderer: Renderer2,
-                private appConfig: AppConfigService,
+        private router: Router,
-                private authenticationService: AuthenticationService) {
+        private appConfig: AppConfigService,
-    }
+        private authenticationService: AuthenticationService
+    ) {}
 
     ngOnInit() {
-
         if (this.elementRef.nativeElement) {
             this.renderer.listen(this.elementRef.nativeElement, 'click', (evt) => {
                 evt.preventDefault();
@@ -51,7 +51,7 @@ export class LogoutDirective implements OnInit {
     }
 
     getRedirectUri() {
-        if (this.redirectUri === undefined ) {
+        if (this.redirectUri === undefined) {
             return this.appConfig.get<string>('loginRoute', '/login');
         }
         return this.redirectUri;

lib/core/src/lib/directives/public-api.ts

@@ -15,10 +15,12 @@
  * limitations under the License.
  */
 
+export * from './tooltip-card/tooltip-card.directive';
+export * from './tooltip-card/tooltip-card.component';
+
 export * from './highlight.directive';
+export * from './infinite-select-scroll.directive';
 export * from './logout.directive';
 export * from './upload.directive';
-export * from './tooltip-card/tooltip-card.directive';
-export * from './infinite-select-scroll.directive';
 
 export * from './directive.module';

lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts

@@ -18,21 +18,18 @@
 import { Component, Input, SecurityContext } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { DomSanitizer } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'adf-tooltip-card-component',
+    standalone: true,
+    imports: [CommonModule],
     templateUrl: './tooltip-card.component.html',
     styleUrls: ['./tooltip-card.component.scss'],
     animations: [
         trigger('tooltip', [
-            transition(':enter', [
+            transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
-                style({ opacity: 0 }),
+            transition(':leave', [animate(200, style({ opacity: 0 }))])
-                animate(200, style({ opacity: 1 }))
-            ]),
-            transition(':leave', [
-                animate(200, style({ opacity: 0 }))
-
-            ])
         ])
     ]
 })
@@ -42,7 +39,7 @@ export class TooltipCardComponent {
     @Input() htmlContent = '';
     @Input() width = '300';
 
-    constructor(private sanitizer: DomSanitizer) { }
+    constructor(private sanitizer: DomSanitizer) {}
 
     sanitizedHtmlContent(): string {
         return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent);

lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts

@@ -27,7 +27,14 @@ import { TooltipCardComponent } from './tooltip-card.component';
 const IMAGE_URL = 'alfresco-logo.svg';
 
 @Component({
-    template: `<span #span [adf-tooltip-card]="'Sample text'" [image]="'${IMAGE_URL}'" [width]="'400'" [htmlContent]="'this is the <b>html</b> raw code'" class="test-component"></span>`
+    template: `<span
+        #span
+        [adf-tooltip-card]="'Sample text'"
+        [image]="'${IMAGE_URL}'"
+        [width]="'400'"
+        [htmlContent]="'this is the <b>html</b> raw code'"
+        class="test-component"
+    ></span>`
 })
 class TestComponent {
     @ViewChild(TooltipCardDirective, { static: true })
@@ -43,20 +50,12 @@ describe('TooltipCardDirective', () => {
     let overlayService: Overlay;
     let overlayContainer: OverlayContainer;
 
-    beforeEach((() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            imports: [CommonModule, OverlayModule, NoopAnimationsModule, TooltipCardDirective, TooltipCardComponent],
-                CommonModule,
+            declarations: [TestComponent]
-                OverlayModule,
-                NoopAnimationsModule
-            ],
-            declarations: [
-                TooltipCardDirective,
-                TooltipCardComponent,
-                TestComponent
-            ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);

lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts

@@ -20,9 +20,11 @@ import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overla
 import { ComponentPortal } from '@angular/cdk/portal';
 import { TooltipCardComponent } from './tooltip-card.component';
 
-@Directive({ selector: '[adf-tooltip-card]' })
+@Directive({
+    selector: '[adf-tooltip-card]',
+    standalone: true
+})
 export class TooltipCardDirective implements OnInit, OnDestroy {
-
     @Input('adf-tooltip-card') text = '';
     @Input() image = '';
     @Input() width = '300';
@@ -36,11 +38,7 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
 
     private overlayRef: OverlayRef;
 
-    constructor(
+    constructor(private overlay: Overlay, private overlayPositionBuilder: OverlayPositionBuilder, private elementRef: ElementRef) {}
-        private overlay: Overlay,
-        private overlayPositionBuilder: OverlayPositionBuilder,
-        private elementRef: ElementRef) {
-    }
 
     ngOnDestroy(): void {
         if (this.overlayRef) {
@@ -49,24 +47,23 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
-        const positionStrategy = this.overlayPositionBuilder
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
-            .flexibleConnectedTo(this.elementRef)
+            {
-            .withPositions([{
                 originX: this.originX,
                 originY: this.originY,
                 overlayX: this.overlayX,
                 overlayY: this.overlayY,
                 offsetY: this.offsetY,
                 offsetX: this.offsetX
-            }]);
+            }
+        ]);
 
         this.overlayRef = this.overlay.create({ positionStrategy });
     }
 
     @HostListener('mouseenter')
     show() {
-        const tooltipRef: ComponentRef<TooltipCardComponent>
+        const tooltipRef: ComponentRef<TooltipCardComponent> = this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent));
-            = this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent));
         tooltipRef.instance.text = this.text;
         tooltipRef.instance.image = this.image;
         tooltipRef.instance.width = this.width;

lib/core/src/lib/directives/upload.directive.ts

@@ -21,7 +21,8 @@ import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit,
 import { FileInfo, FileUtils } from '../common/utils/file-utils';
 
 @Directive({
-    selector: '[adf-upload]'
+    selector: '[adf-upload]',
+    standalone: true
 })
 export class UploadDirective implements OnInit, OnDestroy {
     /** Enables/disables uploading. */

lib/extensions/.eslintignore

@@ -0,0 +1,2 @@
+.storybook
+coverage

lib/insights/.eslintignore

@@ -0,0 +1,2 @@
+.storybook
+coverage

lib/js-api/.eslintignore

@@ -0,0 +1,3 @@
+.storybook
+coverage
+docs

lib/process-services-cloud/.eslintignore

@@ -1 +1,2 @@
 .storybook
+coverage

lib/process-services/.eslintignore

@@ -0,0 +1,2 @@
+.storybook
+coverage