From 464a8f989a946d7c2016d88d1b3f17531792bf75 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 5 Apr 2024 09:02:38 -0400 Subject: [PATCH 1/4] chore: remove deprecated Angular api --- .../lib/directives/node-counter.directive.ts | 15 +-- .../search-widget-container.component.ts | 28 +---- .../src/lib/clipboard/clipboard.directive.ts | 14 +-- .../dynamic-column.component.ts | 117 ++++++++---------- .../dynamic-component/dynamic.component.ts | 25 +--- .../dynamic-tab/dynamic-tab.component.ts | 29 +---- .../viewer/preview-extension.component.ts | 32 +---- 7 files changed, 83 insertions(+), 177 deletions(-) diff --git a/lib/content-services/src/lib/directives/node-counter.directive.ts b/lib/content-services/src/lib/directives/node-counter.directive.ts index 7eb08a0b07d..0a149754798 100644 --- a/lib/content-services/src/lib/directives/node-counter.directive.ts +++ b/lib/content-services/src/lib/directives/node-counter.directive.ts @@ -15,27 +15,22 @@ * limitations under the License. */ -import { Directive, Input, Component, OnInit, OnChanges, ComponentFactoryResolver, ViewContainerRef } from '@angular/core'; +import { Directive, Input, Component, OnInit, OnChanges, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[adf-node-counter]' }) export class NodeCounterDirective implements OnInit, OnChanges { - /** Number to display in the counter badge */ @Input('adf-node-counter') counter: number; componentRef: NodeCounterComponent; - constructor( - private resolver: ComponentFactoryResolver, - public viewContainerRef: ViewContainerRef - ) {} + constructor(private viewContainerRef: ViewContainerRef) {} ngOnInit() { - const componentFactory = this.resolver.resolveComponentFactory(NodeCounterComponent); - this.componentRef = this.viewContainerRef.createComponent(componentFactory).instance; + this.componentRef = this.viewContainerRef.createComponent(NodeCounterComponent).instance; this.componentRef.counter = this.counter; } @@ -48,9 +43,7 @@ export class NodeCounterDirective implements OnInit, OnChanges { @Component({ selector: 'adf-node-counter', - template: ` -
{{ 'NODE_COUNTER.SELECTED_COUNT' | translate: { count: counter } }}
- ` + template: `
{{ 'NODE_COUNTER.SELECTED_COUNT' | translate : { count: counter } }}
` }) export class NodeCounterComponent { counter: number; diff --git a/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts b/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts index 33e92d9b696..842489ea672 100644 --- a/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts +++ b/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts @@ -15,18 +15,7 @@ * limitations under the License. */ -import { - Component, - Input, - ViewChild, - ViewContainerRef, - OnInit, - OnDestroy, - ComponentRef, - ComponentFactoryResolver, - SimpleChanges, - OnChanges -} from '@angular/core'; +import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, ComponentRef, SimpleChanges, OnChanges } from '@angular/core'; import { SearchFilterService } from '../../services/search-filter.service'; import { Observable } from 'rxjs'; import { SearchQueryBuilderService } from '../../services'; @@ -56,21 +45,14 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan componentRef: ComponentRef; - constructor( - private searchFilterService: SearchFilterService, - private queryBuilder: SearchQueryBuilderService, - private componentFactoryResolver: ComponentFactoryResolver - ) {} + constructor(private searchFilterService: SearchFilterService, private queryBuilder: SearchQueryBuilderService) {} ngOnInit() { const componentType = this.searchFilterService.widgets[this.selector]; if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory(componentType); - if (factory) { - this.content.clear(); - this.componentRef = this.content.createComponent(factory, 0); - this.setupWidget(this.componentRef); - } + this.content.clear(); + this.componentRef = this.content.createComponent(componentType, { index: 0 }); + this.setupWidget(this.componentRef); } } diff --git a/lib/core/src/lib/clipboard/clipboard.directive.ts b/lib/core/src/lib/clipboard/clipboard.directive.ts index 9abdb46345f..64cdc59d776 100644 --- a/lib/core/src/lib/clipboard/clipboard.directive.ts +++ b/lib/core/src/lib/clipboard/clipboard.directive.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation, OnInit } from '@angular/core'; +import { Directive, Input, HostListener, Component, ViewContainerRef, ViewEncapsulation, OnInit } from '@angular/core'; import { ClipboardService } from './clipboard.service'; @Directive({ @@ -36,16 +36,12 @@ export class ClipboardDirective { // eslint-disable-next-line @angular-eslint/no-input-rename @Input('clipboard-notification') message: string; - constructor(private clipboardService: ClipboardService, - public viewContainerRef: ViewContainerRef, - private resolver: ComponentFactoryResolver) {} - + constructor(private clipboardService: ClipboardService, public viewContainerRef: ViewContainerRef) {} @HostListener('mouseenter') showTooltip() { if (this.placeholder) { - const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent); - const componentRef = this.viewContainerRef.createComponent(componentFactory).instance; + const componentRef = this.viewContainerRef.createComponent(ClipboardComponent).instance; componentRef.placeholder = this.placeholder; } } @@ -70,14 +66,14 @@ export class ClipboardDirective { } } - private copyContentToClipboard(content) { + private copyContentToClipboard(content: string) { this.clipboardService.copyContentToClipboard(content, this.message); } } @Component({ selector: 'adf-copy-content-tooltip', - template: `{{ placeholder | translate }} `, + template: `{{ placeholder | translate }} `, encapsulation: ViewEncapsulation.None }) export class ClipboardComponent implements OnInit { diff --git a/lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts b/lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts index a22a3e9b4c5..04616326657 100644 --- a/lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts +++ b/lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts @@ -16,86 +16,75 @@ */ import { - Component, - Input, - OnInit, - OnDestroy, - ViewChild, - ViewContainerRef, - ComponentRef, - ComponentFactoryResolver, - OnChanges, - SimpleChanges, - ViewEncapsulation, - ChangeDetectionStrategy + Component, + Input, + OnInit, + OnDestroy, + ViewChild, + ViewContainerRef, + ComponentRef, + OnChanges, + SimpleChanges, + ViewEncapsulation, + ChangeDetectionStrategy } from '@angular/core'; import { ExtensionService } from '../../services/extension.service'; @Component({ - selector: 'adf-dynamic-column', - template: ` - - `, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'adf-dynamic-column' }, - styles: [ - ` - .adf-dynamic-column { - display: flex; - align-items: center; - width: inherit; - } - ` - ] + selector: 'adf-dynamic-column', + template: ` `, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'adf-dynamic-column' }, + styles: [ + ` + .adf-dynamic-column { + display: flex; + align-items: center; + width: inherit; + } + ` + ] }) export class DynamicColumnComponent implements OnInit, OnChanges, OnDestroy { - @ViewChild('content', { read: ViewContainerRef, static: true }) - content: ViewContainerRef; + @ViewChild('content', { read: ViewContainerRef, static: true }) + content: ViewContainerRef; - @Input() - id: string; + @Input() + id: string; - @Input() - context: any; + @Input() + context: any; - private componentRef: ComponentRef; + private componentRef: ComponentRef; - constructor( - private extensions: ExtensionService, - private componentFactoryResolver: ComponentFactoryResolver - ) {} + constructor(private extensions: ExtensionService) {} - ngOnInit() { - const componentType = this.extensions.getComponentById(this.id); - if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory( - componentType - ); - if (factory) { - this.content.clear(); - this.componentRef = this.content.createComponent(factory, 0); - this.updateInstance(); - } + ngOnInit() { + const componentType = this.extensions.getComponentById(this.id); + if (componentType) { + this.content.clear(); + this.componentRef = this.content.createComponent(componentType, { index: 0 }); + this.updateInstance(); + } } - } - ngOnChanges(changes: SimpleChanges) { - if (changes.node) { - this.updateInstance(); + ngOnChanges(changes: SimpleChanges) { + if (changes.node) { + this.updateInstance(); + } } - } - ngOnDestroy() { - if (this.componentRef) { - this.componentRef.destroy(); - this.componentRef = null; + ngOnDestroy() { + if (this.componentRef) { + this.componentRef.destroy(); + this.componentRef = null; + } } - } - private updateInstance() { - if (this.componentRef?.instance) { - this.componentRef.instance.context = this.context; + private updateInstance() { + if (this.componentRef?.instance) { + this.componentRef.instance.context = this.context; + } } - } } diff --git a/lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts b/lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts index f32ffa740e0..a7f31c28dd2 100644 --- a/lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts +++ b/lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts @@ -15,17 +15,7 @@ * limitations under the License. */ -import { - Component, - Input, - ComponentRef, - ComponentFactoryResolver, - ViewChild, - ViewContainerRef, - OnDestroy, - OnChanges, - SimpleChanges -} from '@angular/core'; +import { Component, Input, ComponentRef, ViewChild, ViewContainerRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core'; import { ExtensionService } from '../../services/extension.service'; import { ExtensionComponent } from '../../services/component-register.service'; @@ -47,7 +37,7 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy { private componentRef: ComponentRef; private loaded: boolean = false; - constructor(private extensions: ExtensionService, private componentFactoryResolver: ComponentFactoryResolver) {} + constructor(private extensions: ExtensionService) {} ngOnChanges(changes: SimpleChanges) { if (!this.loaded) { @@ -73,13 +63,8 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy { private loadComponent() { const componentType = this.extensions.getComponentById(this.id); if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory( - componentType - ); - if (factory) { - this.content.clear(); - this.componentRef = this.content.createComponent(factory, 0); - } + this.content.clear(); + this.componentRef = this.content.createComponent(componentType, { index: 0 }); } } @@ -97,7 +82,7 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy { } private componentCreated(): boolean { - return !!this.componentRef && !!this.componentRef.instance; + return !!this.componentRef && !!this.componentRef.instance; } private lifecycleHookIsImplemented(lifecycleMethod: string): boolean { diff --git a/lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts b/lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts index e83ab6dbd22..d29f2f47f66 100644 --- a/lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts +++ b/lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts @@ -15,18 +15,7 @@ * limitations under the License. */ -import { - Component, - Input, - OnInit, - OnDestroy, - ViewChild, - ViewContainerRef, - ComponentRef, - ComponentFactoryResolver, - OnChanges, - SimpleChanges -} from '@angular/core'; +import { Component, Input, OnInit, OnDestroy, ViewChild, ViewContainerRef, ComponentRef, OnChanges, SimpleChanges } from '@angular/core'; import { Node } from '@alfresco/js-api'; import { ExtensionService } from '../../services/extension.service'; @@ -47,22 +36,14 @@ export class DynamicTabComponent implements OnInit, OnChanges, OnDestroy { private componentRef: ComponentRef; - constructor( - private extensions: ExtensionService, - private componentFactoryResolver: ComponentFactoryResolver - ) {} + constructor(private extensions: ExtensionService) {} ngOnInit() { const componentType = this.extensions.getComponentById(this.id); if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory( - componentType - ); - if (factory) { - this.content.clear(); - this.componentRef = this.content.createComponent(factory, 0); - this.updateInstance(); - } + this.content.clear(); + this.componentRef = this.content.createComponent(componentType, { index: 0 }); + this.updateInstance(); } } diff --git a/lib/extensions/src/lib/components/viewer/preview-extension.component.ts b/lib/extensions/src/lib/components/viewer/preview-extension.component.ts index fcb059c38ab..c418c386e80 100644 --- a/lib/extensions/src/lib/components/viewer/preview-extension.component.ts +++ b/lib/extensions/src/lib/components/viewer/preview-extension.component.ts @@ -15,24 +15,12 @@ * limitations under the License. */ -import { - Component, - Input, - ComponentRef, - OnInit, - ComponentFactoryResolver, - ViewChild, - ViewContainerRef, - OnDestroy, - OnChanges -} from '@angular/core'; +import { Component, Input, ComponentRef, OnInit, ViewChild, ViewContainerRef, OnDestroy, OnChanges } from '@angular/core'; import { ExtensionService } from '../../services/extension.service'; @Component({ selector: 'adf-preview-extension', - template: ` -
- ` + template: `
` }) export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy { @ViewChild('content', { read: ViewContainerRef, static: true }) @@ -52,10 +40,7 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy { private componentRef: ComponentRef; - constructor( - private extensionService: ExtensionService, - private componentFactoryResolver: ComponentFactoryResolver - ) {} + constructor(private extensionService: ExtensionService) {} ngOnInit() { if (!this.id) { @@ -64,14 +49,9 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy { const componentType = this.extensionService.getComponentById(this.id); if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory( - componentType - ); - if (factory) { - this.content.clear(); - this.componentRef = this.content.createComponent(factory, 0); - this.updateInstance(); - } + this.content.clear(); + this.componentRef = this.content.createComponent(componentType, { index: 0 }); + this.updateInstance(); } } From 507c0dbe41293f841f5de53da4213c1021acc213 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 5 Apr 2024 09:26:49 -0400 Subject: [PATCH 2/4] chore: remove deprecated Angular api [ci:force] --- .../components/form-field/form-field.component.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/lib/core/src/lib/form/components/form-field/form-field.component.ts b/lib/core/src/lib/form/components/form-field/form-field.component.ts index f52d275a08e..9f6cf9187c0 100644 --- a/lib/core/src/lib/form/components/form-field/form-field.component.ts +++ b/lib/core/src/lib/form/components/form-field/form-field.component.ts @@ -19,10 +19,8 @@ import { Compiler, Component, ComponentFactory, - ComponentFactoryResolver, ComponentRef, Input, - ModuleWithComponentFactories, NgModule, OnDestroy, OnInit, @@ -70,12 +68,7 @@ export class FormFieldComponent implements OnInit, OnDestroy { focus: boolean = false; - constructor( - private formRenderingService: FormRenderingService, - private componentFactoryResolver: ComponentFactoryResolver, - private visibilityService: WidgetVisibilityService, - private compiler: Compiler - ) {} + constructor(private formRenderingService: FormRenderingService, private visibilityService: WidgetVisibilityService, private compiler: Compiler) {} ngOnInit() { const w: any = window; @@ -95,8 +88,7 @@ export class FormFieldComponent implements OnInit, OnDestroy { } else { const componentType = this.formRenderingService.resolveComponentType(originalField); if (componentType) { - const factory = this.componentFactoryResolver.resolveComponentFactory(componentType); - this.componentRef = this.container.createComponent(factory); + this.componentRef = this.container.createComponent(componentType); const instance = this.componentRef.instance; instance.field = this.field; instance.fieldChanged.subscribe((field) => { @@ -153,7 +145,7 @@ export class FormFieldComponent implements OnInit, OnDestroy { const decoratedCmp = Component(metadata)(cmpClass); const moduleClass = class RuntimeComponentModule {}; const decoratedNgModule = NgModule({ imports: [], declarations: [decoratedCmp] })(moduleClass); - const module: ModuleWithComponentFactories = compiler.compileModuleAndAllComponentsSync(decoratedNgModule); + const module = compiler.compileModuleAndAllComponentsSync(decoratedNgModule); return module.componentFactories.find((x) => x.componentType === decoratedCmp); } From a2eadb12a263636a27262c5d0e5664c341ab276a Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 5 Apr 2024 09:48:57 -0400 Subject: [PATCH 3/4] chore: remove deprecated Angular api [ci:force] --- .../dynamic.component.spec.ts | 25 ++----------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts b/lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts index 3d99617343b..672e600da7c 100644 --- a/lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts +++ b/lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts @@ -17,13 +17,7 @@ /* eslint-disable @angular-eslint/component-selector */ -import { - Component, - Input, - OnChanges, - SimpleChange, - ComponentFactoryResolver -} from '@angular/core'; +import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DynamicExtensionComponent } from './dynamic.component'; @@ -44,11 +38,9 @@ export class TestComponent implements OnChanges { } describe('DynamicExtensionComponent', () => { - let fixture: ComponentFixture; let componentRegister: ComponentRegisterService; let component: DynamicExtensionComponent; - let componentFactoryResolver: ComponentFactoryResolver; beforeEach(() => { componentRegister = new ComponentRegisterService(); @@ -64,11 +56,8 @@ describe('DynamicExtensionComponent', () => { }); describe('Sub-component creation', () => { - beforeEach(() => { fixture = TestBed.createComponent(DynamicExtensionComponent); - componentFactoryResolver = TestBed.inject(ComponentFactoryResolver); - spyOn(componentFactoryResolver, 'resolveComponentFactory').and.callThrough(); component = fixture.componentInstance; component.id = 'test-component'; component.data = { foo: 'bar' }; @@ -87,22 +76,13 @@ describe('DynamicExtensionComponent', () => { expect(innerElement).not.toBeNull(); }); - it('should load the TestComponent only ONCE', () => { - component.ngOnChanges({}); - fixture.detectChanges(); - component.ngOnChanges({}); - fixture.detectChanges(); - - expect((componentFactoryResolver.resolveComponentFactory as any).calls.count()).toBe(1); - }); - it('should pass through the data', () => { const testComponent = fixture.debugElement.query(By.css('test-component')).componentInstance; expect(testComponent.data).toBe(component.data); }); - it('should update the subcomponent\'s input parameters', () => { + it('should update the subcomponent input parameters', () => { const data = { foo: 'baz' }; component.ngOnChanges({ data: new SimpleChange(component.data, data, false) }); @@ -113,7 +93,6 @@ describe('DynamicExtensionComponent', () => { }); describe('Angular life-cycle methods in sub-component', () => { - let testComponent; beforeEach(() => { From aab46ff0afd80bdace32f4cc71e0b90397bc0f93 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 5 Apr 2024 13:07:41 -0400 Subject: [PATCH 4/4] chore: remove deprecated Angular api [ci:force] --- .../src/lib/card-view/card-view.module.ts | 2 -- ...ard-view-item-dispatcher.component.spec.ts | 16 +++-------- .../card-view-item-dispatcher.component.ts | 27 +++++++------------ .../card-view-content-proxy.directive.ts | 25 ----------------- lib/core/src/lib/card-view/public-api.ts | 2 -- 5 files changed, 13 insertions(+), 59 deletions(-) delete mode 100644 lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts diff --git a/lib/core/src/lib/card-view/card-view.module.ts b/lib/core/src/lib/card-view/card-view.module.ts index af328e99fd3..e38602ffe1e 100644 --- a/lib/core/src/lib/card-view/card-view.module.ts +++ b/lib/core/src/lib/card-view/card-view.module.ts @@ -34,7 +34,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core'; import { TranslateModule } from '@ngx-translate/core'; -import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive'; import { CardViewComponent } from './components/card-view/card-view.component'; import { CardViewBoolItemComponent } from './components/card-view-boolitem/card-view-boolitem.component'; import { CardViewDateItemComponent } from './components/card-view-dateitem/card-view-dateitem.component'; @@ -77,7 +76,6 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se CardViewKeyValuePairsItemComponent, CardViewSelectItemComponent, CardViewItemDispatcherComponent, - CardViewContentProxyDirective, CardViewArrayItemComponent, SelectFilterInputComponent ], diff --git a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts index bb001e0e9c8..801e75b1cb6 100644 --- a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts @@ -22,7 +22,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { CardViewItem } from '../../interfaces/card-view-item.interface'; import { CardItemTypeService } from '../../services/card-item-types.service'; -import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive'; import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component'; @Component({ @@ -35,7 +34,6 @@ export class CardViewShinyCustomElementItemComponent { } describe('CardViewItemDispatcherComponent', () => { - let fixture: ComponentFixture; let cardItemTypeService: CardItemTypeService; let component: CardViewItemDispatcherComponent; @@ -45,12 +43,8 @@ describe('CardViewItemDispatcherComponent', () => { cardItemTypeService.setComponentTypeResolver('shiny-custom-element', () => CardViewShinyCustomElementItemComponent); TestBed.configureTestingModule({ - declarations: [ - CardViewItemDispatcherComponent, - CardViewShinyCustomElementItemComponent, - CardViewContentProxyDirective - ], - providers: [ { provide: CardItemTypeService, useValue: cardItemTypeService } ] + declarations: [CardViewItemDispatcherComponent, CardViewShinyCustomElementItemComponent], + providers: [{ provide: CardItemTypeService, useValue: cardItemTypeService }] }); TestBed.compileComponents(); @@ -83,7 +77,6 @@ describe('CardViewItemDispatcherComponent', () => { }); describe('Sub-component creation', () => { - it('should load the CardViewShinyCustomElementItemComponent', () => { const innerElement = fixture.debugElement.query(By.css('[data-automation-id="found-me"]')); expect(innerElement).not.toBeNull(); @@ -108,7 +101,7 @@ describe('CardViewItemDispatcherComponent', () => { expect(shinyCustomElementItemComponent.displayEmpty).toBe(component.displayEmpty); }); - it('should update the subcomponent\'s input parameters', () => { + it('should update the subcomponent input parameters', () => { const expectedEditable = false; const expectedDisplayEmpty = true; const expectedProperty = {}; @@ -139,8 +132,7 @@ describe('CardViewItemDispatcherComponent', () => { }); describe('Angular life-cycle methods', () => { - - let shinyCustomElementItemComponent; + let shinyCustomElementItemComponent: any; const lifeCycleMethods = [ 'ngOnChanges', diff --git a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts index c121fa9b89d..3d9dd4e4d26 100644 --- a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts @@ -15,22 +15,14 @@ * limitations under the License. */ -import { - Component, - Input, - OnChanges, - SimpleChange, - SimpleChanges, - ViewChild -} from '@angular/core'; +import { Component, Input, OnChanges, SimpleChange, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core'; import { CardViewItem } from '../../interfaces/card-view-item.interface'; import { CardItemTypeService } from '../../services/card-item-types.service'; -import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive'; import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.component'; @Component({ selector: 'adf-card-view-item-dispatcher', - template: '' + template: '' }) export class CardViewItemDispatcherComponent implements OnChanges { @Input() @@ -60,15 +52,15 @@ export class CardViewItemDispatcherComponent implements OnChanges { @Input() displayLabelForChips: boolean = false; - @ViewChild(CardViewContentProxyDirective, { static: true }) - private content: CardViewContentProxyDirective; - private loaded: boolean = false; private componentReference: any = null; public ngOnInit; public ngDoCheck; + @ViewChild('content', { read: ViewContainerRef, static: true }) + content!: ViewContainerRef; + constructor(private cardItemTypeService: CardItemTypeService) { const dynamicLifeCycleMethods = [ 'ngOnInit', @@ -91,10 +83,9 @@ export class CardViewItemDispatcherComponent implements OnChanges { this.loaded = true; } - Object.entries(changes) - .forEach(([changeName, change]: [string, SimpleChange]) => { - this.componentReference.instance[changeName] = change.currentValue; - }); + Object.entries(changes).forEach(([changeName, change]: [string, SimpleChange]) => { + this.componentReference.instance[changeName] = change.currentValue; + }); this.proxy('ngOnChanges', changes); } @@ -102,7 +93,7 @@ export class CardViewItemDispatcherComponent implements OnChanges { private loadComponent() { const factoryClass = this.cardItemTypeService.resolveComponentType(this.property); - this.componentReference = this.content.viewContainerRef.createComponent(factoryClass); + this.componentReference = this.content.createComponent(factoryClass); this.componentReference.instance.editable = this.editable; this.componentReference.instance.property = this.property; diff --git a/lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts b/lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts deleted file mode 100644 index d8192c10c37..00000000000 --- a/lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * @license - * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Directive, ViewContainerRef } from '@angular/core'; - -@Directive({ - selector: '[adf-card-view-content-proxy]' -}) -export class CardViewContentProxyDirective { - constructor(public viewContainerRef: ViewContainerRef) { } -} diff --git a/lib/core/src/lib/card-view/public-api.ts b/lib/core/src/lib/card-view/public-api.ts index c506680da42..6f6f6514cc0 100644 --- a/lib/core/src/lib/card-view/public-api.ts +++ b/lib/core/src/lib/card-view/public-api.ts @@ -32,6 +32,4 @@ export * from './interfaces/card-view.interfaces'; export * from './validators/card-view.validators'; export * from './models/card-view.models'; export * from './services/card-view.services'; -export * from './directives/card-view-content-proxy.directive'; - export * from './card-view.module';