From 96c126eaac76e70cf5dd1d2544d53af18bc31483 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 24 Jul 2025 17:03:24 +0300 Subject: [PATCH 1/7] refactor(*): migrate DI from constructors to inject() API --- .../src/app/wrapper/wrapper.component.ts | 6 +- .../src/lib/icon.broadcast.service.spec.ts | 5 +- .../src/lib/icon.broadcast.service.ts | 10 +- .../src/lib/state.component.ts | 23 +- .../src/lib/accordion/accordion.component.ts | 9 +- .../action-strip/action-strip.component.ts | 33 +- .../grid-actions-base.directive.ts | 8 +- .../src/lib/avatar/avatar.component.ts | 14 +- .../src/lib/banner/banner.component.ts | 15 +- .../lib/buttonGroup/buttonGroup.component.ts | 27 +- .../src/lib/calendar/calendar-base.ts | 17 +- .../src/lib/calendar/calendar.directives.ts | 31 +- .../src/lib/calendar/calendar.services.ts | 10 +- .../common/calendar-view.directive.ts | 6 +- .../calendar/days-view/day-item.component.ts | 6 +- .../calendar/days-view/days-view.component.ts | 34 +- .../months-view/months-view.component.ts | 19 +- .../years-view/years-view.component.ts | 18 +- .../src/lib/card/card.component.ts | 17 +- .../src/lib/carousel/carousel-base.ts | 10 +- .../lib/carousel/carousel.component.spec.ts | 2 +- .../src/lib/carousel/carousel.component.ts | 46 +- .../src/lib/carousel/slide.component.ts | 6 +- .../lib/checkbox/checkbox-base.directive.ts | 30 +- .../lib/checkbox/checkbox.component.spec.ts | 6 +- .../src/lib/chips/chip.component.ts | 30 +- .../src/lib/chips/chip.spec.ts | 6 +- .../src/lib/chips/chips-area.component.ts | 24 +- .../src/lib/chips/chips-area.spec.ts | 10 +- .../src/lib/combo/combo-dropdown.component.ts | 18 +- .../src/lib/combo/combo-item.component.ts | 23 +- .../src/lib/combo/combo.common.ts | 25 +- .../src/lib/combo/combo.component.spec.ts | 1186 ++++++++--------- .../src/lib/combo/combo.component.ts | 21 +- .../src/lib/combo/combo.pipes.ts | 4 +- .../src/lib/core/navigation/directives.ts | 10 +- .../igniteui-angular/src/lib/core/touch.ts | 8 +- .../igniteui-angular/src/lib/core/utils.ts | 6 +- .../lib/date-common/picker-base.directive.ts | 11 +- .../lib/date-common/picker-icons.common.ts | 4 +- .../lib/date-picker/date-picker.component.ts | 47 +- .../date-range-picker.component.spec.ts | 6 +- .../date-range-picker.component.ts | 27 +- .../src/lib/dialog/dialog.component.ts | 23 +- .../autocomplete.directive.spec.ts | 6 +- .../autocomplete/autocomplete.directive.ts | 32 +- .../src/lib/directives/button/button-base.ts | 6 +- .../lib/directives/button/button.directive.ts | 21 +- .../date-time-editor.directive.spec.ts | 6 +- .../date-time-editor.directive.ts | 22 +- .../drag-drop/drag-drop.directive.ts | 28 +- .../directives/drag-drop/drag-drop.spec.ts | 6 +- .../focus-trap/focus-trap.directive.ts | 11 +- .../lib/directives/focus/focus.directive.ts | 12 +- .../for-of/base.helper.component.ts | 26 +- .../directives/for-of/display.container.ts | 13 +- .../for-of/for_of.directive.spec.ts | 58 +- .../lib/directives/for-of/for_of.directive.ts | 64 +- .../horizontal.virtual.helper.component.ts | 7 +- .../for-of/virtual.helper.component.ts | 8 +- .../form-control/form-control.directive.ts | 15 +- .../directives/input/input.directive.spec.ts | 14 +- .../lib/directives/input/input.directive.ts | 35 +- .../src/lib/directives/mask/mask.directive.ts | 17 +- .../radio/radio-group.directive.spec.ts | 10 +- .../directives/radio/radio-group.directive.ts | 29 +- .../lib/directives/ripple/ripple.directive.ts | 13 +- .../scroll_inertia.directive.spec.ts | 14 +- .../scroll_inertia.directive.ts | 7 +- .../template_outlet.directive.ts | 12 +- .../text-highlight.directive.spec.ts | 6 +- .../text-highlight.directive.ts | 18 +- .../text-selection.directive.spec.ts | 5 +- .../text-selection.directive.ts | 6 +- .../toggle/toggle.directive.spec.ts | 8 +- .../lib/directives/toggle/toggle.directive.ts | 40 +- .../tooltip/tooltip-target.directive.ts | 14 +- .../directives/tooltip/tooltip.directive.ts | 15 +- .../src/lib/drop-down/drop-down-item.base.ts | 14 +- .../drop-down-navigation.directive.ts | 6 +- .../src/lib/drop-down/drop-down.base.ts | 13 +- .../src/lib/drop-down/drop-down.component.ts | 31 +- .../expansion-panel-body.component.ts | 10 +- .../expansion-panel-header.component.ts | 27 +- .../expansion-panel/expansion-panel.common.ts | 5 +- .../expansion-panel.component.ts | 26 +- .../toggle-animation-component.ts | 7 +- .../src/lib/grids/api.service.ts | 11 +- .../src/lib/grids/cell.component.ts | 26 +- .../column-actions.component.ts | 10 +- .../column-actions/column-hiding.directive.ts | 10 +- .../column-pinning.directive.ts | 10 +- .../src/lib/grids/columns/column.component.ts | 38 +- .../lib/grids/columns/templates.directive.ts | 25 +- .../src/lib/grids/common/pipes.ts | 14 +- .../src/lib/grids/common/types.ts | 3 +- .../advanced-filtering-dialog.component.ts | 10 +- .../base/grid-filtering-cell.component.ts | 22 +- .../base/grid-filtering-row.component.ts | 29 +- .../excel-style/base-filtering.component.ts | 13 +- .../excel-style-clear-filters.component.ts | 9 +- ...xcel-style-conditional-filter.component.ts | 10 +- .../excel-style-custom-dialog.component.ts | 25 +- ...xcel-style-default-expression.component.ts | 15 +- .../excel-style-filtering.component.ts | 39 +- .../excel-style-header.component.ts | 6 +- .../excel-style-hiding.component.ts | 4 +- .../excel-style-moving.component.ts | 6 +- .../excel-style-pinning.component.ts | 4 +- .../excel-style-search.component.ts | 23 +- .../excel-style-selecting.component.ts | 4 +- .../excel-style-sorting.component.ts | 13 +- .../grids/filtering/grid-filtering.service.ts | 13 +- .../src/lib/grids/grid-base.directive.ts | 60 +- .../src/lib/grids/grid-navigation.service.ts | 4 +- .../src/lib/grids/grid-public-cell.ts | 2 + .../src/lib/grids/grid.directives.ts | 19 +- .../src/lib/grids/grid.rowEdit.directive.ts | 9 +- .../grids/grid/expandable-cell.component.ts | 32 +- .../src/lib/grids/grid/grid.component.spec.ts | 17 +- .../src/lib/grids/grid/grid.component.ts | 2 +- .../src/lib/grids/grid/grid.details.pipe.ts | 4 +- .../lib/grids/grid/grid.master-detail.spec.ts | 2 +- .../src/lib/grids/grid/grid.pipes.ts | 10 +- .../src/lib/grids/grid/grid.summary.pipe.ts | 4 +- .../lib/grids/grid/groupby-row.component.ts | 27 +- .../grouping/grid-group-by-area.component.ts | 11 +- .../grids/grouping/group-by-area.directive.ts | 7 +- .../tree-grid-group-by-area.component.ts | 18 +- .../headers/grid-header-group.component.ts | 30 +- .../headers/grid-header-row.component.ts | 22 +- .../grids/headers/grid-header.component.ts | 26 +- .../hierarchical-cell.component.ts | 19 +- .../hierarchical-grid-base.directive.ts | 72 +- .../hierarchical-grid.component.ts | 34 +- .../hierarchical-grid.pipes.ts | 7 +- .../hierarchical-grid.spec.ts | 16 +- .../hierarchical-grid/row-island.component.ts | 89 +- .../lib/grids/moving/moving.drag.directive.ts | 17 +- .../lib/grids/moving/moving.drop.directive.ts | 21 +- .../pivot-data-selector.component.ts | 17 +- .../grids/pivot-grid/pivot-grid.component.ts | 87 +- .../grids/pivot-grid/pivot-grid.directives.ts | 8 +- .../lib/grids/pivot-grid/pivot-grid.pipes.ts | 21 +- .../pivot-grid/pivot-header-row.component.ts | 27 +- .../pivot-row-dimension-content.component.ts | 36 +- ...ot-row-dimension-header-group.component.ts | 17 +- .../pivot-row-dimension-header.component.ts | 18 +- .../pivot-row-dimension-mrl-row.component.ts | 31 +- .../pivot-row-header-group.component.ts | 16 +- .../grids/pivot-grid/pivot-row.component.ts | 23 +- .../src/lib/grids/pivot-grid/pivot-util.ts | 2 +- .../pivot-resize-handle.directive.ts | 15 +- .../pivot-grid/pivot-resizer.component.ts | 6 +- .../grids/resizing/resize-handle.directive.ts | 18 +- .../lib/grids/resizing/resizer.component.ts | 6 +- .../lib/grids/resizing/resizer.directive.ts | 22 +- .../lib/grids/resizing/resizing.service.ts | 6 +- .../src/lib/grids/row-drag.directive.ts | 5 +- .../src/lib/grids/row.directive.ts | 31 +- .../grids/selection/drag-select.directive.ts | 7 +- .../src/lib/grids/selection/row-selectors.ts | 11 +- .../lib/grids/selection/selection.service.ts | 7 +- .../src/lib/grids/state-base.directive.ts | 14 +- .../grids/summaries/grid-root-summary.pipe.ts | 4 +- .../grids/summaries/summary-cell.component.ts | 7 +- .../grids/summaries/summary-row.component.ts | 22 +- .../src/lib/grids/toolbar/common.ts | 5 +- ...id-toolbar-advanced-filtering.component.ts | 6 +- .../grid-toolbar-exporter.component.ts | 14 +- .../lib/grids/toolbar/grid-toolbar.base.ts | 6 +- .../grids/toolbar/grid-toolbar.component.ts | 21 +- .../grids/tree-grid/tree-grid.component.ts | 90 +- .../grids/tree-grid/tree-grid.directives.ts | 5 +- .../tree-grid/tree-grid.filtering.pipe.ts | 4 +- .../lib/grids/tree-grid/tree-grid.pipes.ts | 17 +- .../grids/tree-grid/tree-grid.summary.pipe.ts | 4 +- .../src/lib/icon/icon.component.ts | 22 +- .../src/lib/icon/icon.service.spec.ts | 4 +- .../src/lib/icon/icon.service.ts | 18 +- .../input-group/input-group.component.spec.ts | 6 +- .../lib/input-group/input-group.component.ts | 34 +- .../src/lib/list/list-item.component.ts | 22 +- .../src/lib/list/list.common.ts | 14 +- .../src/lib/list/list.component.ts | 23 +- .../navigation-drawer.component.ts | 34 +- .../navigation-drawer.directives.ts | 10 +- .../src/lib/paginator/paginator-interfaces.ts | 5 +- .../src/lib/paginator/paginator.component.ts | 17 +- .../src/lib/progressbar/progressbar.common.ts | 6 +- .../lib/progressbar/progressbar.component.ts | 7 +- .../query-builder-tree.component.ts | 24 +- .../query-builder/query-builder.component.ts | 6 +- .../query-builder/query-builder.directives.ts | 4 +- .../src/lib/radio/radio.component.spec.ts | 6 +- .../lib/select/select-navigation.directive.ts | 4 - .../src/lib/select/select.component.spec.ts | 6 +- .../src/lib/select/select.component.ts | 45 +- .../animation/angular-animation-service.ts | 5 +- .../services/direction/directionality.spec.ts | 4 +- .../lib/services/direction/directionality.ts | 6 +- .../src/lib/services/overlay/overlay.spec.ts | 53 +- .../src/lib/services/overlay/overlay.ts | 29 +- .../overlay/scroll/scroll-strategy.ts | 1 - .../simple-combo.component.spec.ts | 21 +- .../simple-combo/simple-combo.component.ts | 38 +- .../lib/slider/label/thumb-label.component.ts | 6 +- .../src/lib/slider/slider.component.spec.ts | 6 +- .../src/lib/slider/slider.component.ts | 17 +- .../slider/thumb/thumb-slider.component.ts | 19 +- .../splitter-pane/splitter-pane.component.ts | 7 +- .../src/lib/splitter/splitter.component.ts | 8 +- .../src/lib/stepper/step/step.component.ts | 43 +- .../src/lib/stepper/stepper.component.spec.ts | 33 +- .../src/lib/stepper/stepper.component.ts | 19 +- .../src/lib/stepper/stepper.directive.ts | 12 +- .../src/lib/switch/switch.component.spec.ts | 6 +- .../src/lib/tabs/tab-content.directive.ts | 10 +- .../src/lib/tabs/tab-header.directive.ts | 20 +- .../src/lib/tabs/tab-item.directive.ts | 8 +- .../src/lib/tabs/tabs.directive.ts | 18 +- .../src/lib/tabs/tabs/tab-header.component.ts | 19 +- .../src/lib/tabs/tabs/tabs.component.ts | 19 +- .../test-utils/grid-base-components.spec.ts | 22 +- .../src/lib/time-picker/time-picker.common.ts | 4 +- .../time-picker/time-picker.component.spec.ts | 31 +- .../lib/time-picker/time-picker.component.ts | 35 +- .../lib/time-picker/time-picker.directives.ts | 28 +- .../src/lib/time-picker/time-picker.pipes.ts | 8 +- .../src/lib/toast/toast.component.ts | 26 +- .../src/lib/tree/tree-navigation.service.ts | 7 +- .../src/lib/tree/tree-navigation.spec.ts | 38 +- .../lib/tree/tree-node/tree-node.component.ts | 56 +- .../src/lib/tree/tree-samples.spec.ts | 6 +- .../src/lib/tree/tree-selection.spec.ts | 72 +- .../src/lib/tree/tree.component.ts | 30 +- .../src/lib/tree/tree.spec.ts | 114 +- .../hierarchical-remote.service.ts | 2 +- 238 files changed, 1950 insertions(+), 3542 deletions(-) diff --git a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts index bf6fbbc5c0e..b5ea969f472 100644 --- a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts +++ b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core'; +import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { TemplateRefWrapper } from './template-ref-wrapper'; @@ -13,6 +13,8 @@ type TemplateFunction = (arg: any) => TemplateResult; imports: [] }) export class TemplateWrapperComponent { + private cdr = inject(ChangeDetectorRef); + public templateFunctions: TemplateFunction[] = []; public templateRendered = new Subject(); @@ -25,8 +27,6 @@ export class TemplateWrapperComponent { */ @ViewChildren(TemplateRef) public templateRefs: QueryList>; - - constructor(private cdr: ChangeDetectorRef) { } protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) { const part = render(templateFunc(arg), container); diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts index 7c3ff8ed07f..f445c4943fe 100644 --- a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts +++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service'; -import { Component, SecurityContext } from '@angular/core'; +import { Component, SecurityContext, inject } from '@angular/core'; import { IconMeta, IgxIconService } from 'igniteui-angular'; import { wait } from 'igniteui-angular/src/lib/test-utils/ui-interactions.spec'; @@ -111,5 +111,6 @@ describe('Icon broadcast service', () => { providers: [IgxIconBroadcastService, IgxIconService] }) export class BroadcastServiceComponent { - constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {} + iconBroadcast = inject(IgxIconBroadcastService); + iconService = inject(IgxIconService); } diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts index 0ae7f09a676..cebe8e536f6 100644 --- a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts +++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Optional } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils'; import { IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service'; import { IconMeta } from '../../../igniteui-angular/src/lib/icon/public_api'; @@ -26,12 +26,12 @@ export interface BroadcastIconsChangeMessage { /** @hidden @internal **/ @Injectable() export class IgxIconBroadcastService { + protected _iconService = inject(IgxIconService); + private _platformUtil = inject(PlatformUtil, { optional: true }); + private iconBroadcastChannel: BroadcastChannel | null; - constructor( - protected _iconService: IgxIconService, - @Optional() private _platformUtil: PlatformUtil - ) { + constructor() { if (this._platformUtil?.isBrowser) { this.create(); diff --git a/projects/igniteui-angular-elements/src/lib/state.component.ts b/projects/igniteui-angular-elements/src/lib/state.component.ts index f5a28252bd1..9106e71021a 100644 --- a/projects/igniteui-angular-elements/src/lib/state.component.ts +++ b/projects/igniteui-angular-elements/src/lib/state.component.ts @@ -1,4 +1,4 @@ -import { Component, EnvironmentInjector, EventEmitter, Inject, Injector, Output, ViewContainerRef } from '@angular/core'; +import { Component, EnvironmentInjector, EventEmitter, Injector, Output, ViewContainerRef, inject } from '@angular/core'; import { IPinningConfig, GridType, IGX_GRID_BASE} from '../../../igniteui-angular/src/lib/grids/common/grid.interface'; import { IFilteringExpressionsTree } from '../../../igniteui-angular/src/lib/data-operations/filtering-expressions-tree'; import { IPagingState } from '../../../igniteui-angular/src/lib/data-operations/paging-state.interface'; @@ -50,14 +50,23 @@ export interface IGridStateInfo { standalone: true }) export class IgxGridStateComponent extends IgxGridStateBaseDirective { + protected override viewRef: ViewContainerRef; + protected override envInjector: EnvironmentInjector; + protected override injector: Injector; + + + constructor() { + const grid = inject(IGX_GRID_BASE); + const viewRef = inject(ViewContainerRef); + const envInjector = inject(EnvironmentInjector); + const injector = inject(Injector); - constructor( - @Inject(IGX_GRID_BASE) grid: GridType, - protected override viewRef: ViewContainerRef, protected override envInjector: EnvironmentInjector, - protected override injector: Injector, - ) { super(grid, viewRef, envInjector, injector); - } + + this.viewRef = viewRef; + this.envInjector = envInjector; + this.injector = injector; + } /** * Restores grid features' state based on the IGridStateInfo object passed as an argument. diff --git a/projects/igniteui-angular/src/lib/accordion/accordion.component.ts b/projects/igniteui-angular/src/lib/accordion/accordion.component.ts index 85bffdce5d1..2168ccbdcd3 100644 --- a/projects/igniteui-angular/src/lib/accordion/accordion.component.ts +++ b/projects/igniteui-angular/src/lib/accordion/accordion.component.ts @@ -1,7 +1,4 @@ -import { - AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter, - HostBinding, Input, OnDestroy, Output, QueryList, booleanAttribute -} from '@angular/core'; +import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter, HostBinding, Input, OnDestroy, Output, QueryList, booleanAttribute, inject } from '@angular/core'; import { fromEvent, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { ACCORDION_NAVIGATION_KEYS } from '../core/utils'; @@ -55,6 +52,8 @@ let NEXT_ID = 0; standalone: true }) export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + /** * Get/Set the `id` of the accordion component. * Default value is `"igx-accordion-0"`; @@ -216,8 +215,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O private _enabledPanels!: IgxExpansionPanelComponent[]; private _singleBranchExpand = false; - constructor(private cdr: ChangeDetectorRef) { } - /** @hidden @internal **/ public ngAfterContentInit(): void { this.updatePanelsAnimation(); diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index ff848fa4846..15f369174cc 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -1,20 +1,4 @@ -import { - Component, - Directive, - HostBinding, - Input, - Renderer2, - ViewContainerRef, - ContentChildren, - QueryList, - ViewChild, - TemplateRef, - AfterContentInit, - ChangeDetectorRef, - AfterViewInit, - ElementRef, - booleanAttribute -} from '@angular/core'; +import { Component, Directive, HostBinding, Input, Renderer2, ViewContainerRef, ContentChildren, QueryList, ViewChild, TemplateRef, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, booleanAttribute, inject } from '@angular/core'; import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources'; import { IgxDropDownComponent } from '../drop-down/drop-down.component'; import { CloseScrollStrategy, OverlaySettings } from '../services/public_api'; @@ -35,7 +19,7 @@ import { trackByIdentity } from '../core/utils'; standalone: true }) export class IgxActionStripMenuItemDirective { - constructor(public templateRef: TemplateRef) {} + public templateRef = inject>(TemplateRef); } /* blazorElement */ @@ -86,6 +70,11 @@ export class IgxActionStripMenuItemDirective { providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }] }) export class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit { + private _viewContainer = inject(ViewContainerRef); + private renderer = inject(Renderer2); + protected el = inject(ElementRef); + public cdr = inject(ChangeDetectorRef); + /* blazorSuppress */ /** @@ -191,14 +180,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten private _resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN); private _originalParent!: HTMLElement; - constructor( - private _viewContainer: ViewContainerRef, - private renderer: Renderer2, - protected el: ElementRef, - /** @hidden @internal **/ - public cdr: ChangeDetectorRef, - ) { } - /** * Menu Items list. * diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts index 75426f93ee2..48f52be91ce 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts @@ -1,5 +1,5 @@ import { IgxGridActionButtonComponent } from './grid-action-button.component'; -import { Directive, Input, AfterViewInit, QueryList, ViewChildren, IterableDiffers, booleanAttribute } from '@angular/core'; +import { Directive, Input, AfterViewInit, QueryList, ViewChildren, IterableDiffers, booleanAttribute, inject } from '@angular/core'; import { IgxActionStripComponent } from '../action-strip.component'; import { IgxRowDirective } from '../../grids/row.directive'; import { IgxIconService } from '../../icon/icon.service'; @@ -14,6 +14,9 @@ import { IgxIconService } from '../../icon/icon.service'; standalone: true }) export class IgxGridActionsBaseDirective implements AfterViewInit { + protected iconService = inject(IgxIconService); + protected differs = inject(IterableDiffers); + /** @hidden @internal **/ @ViewChildren(IgxGridActionButtonComponent) public buttons: QueryList; @@ -51,9 +54,6 @@ export class IgxGridActionsBaseDirective implements AfterViewInit { return this.isRow(this.strip?.context) && !this.strip.context.inEditMode; } - constructor(protected iconService: IgxIconService, - protected differs: IterableDiffers) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts index 24b10eddfe7..22a6a7b7fa5 100644 --- a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts +++ b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts @@ -1,13 +1,5 @@ import { NgTemplateOutlet } from '@angular/common'; -import { - Component, - ElementRef, - HostBinding, - Input, - OnInit, - TemplateRef, - ViewChild -} from '@angular/core'; +import { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild, inject } from '@angular/core'; import { normalizeURI } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; @@ -56,6 +48,8 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType]; imports: [IgxIconComponent, NgTemplateOutlet] }) export class IgxAvatarComponent implements OnInit { + public elementRef = inject(ElementRef); + /** * Returns the `aria-label` attribute of the avatar. * @@ -332,8 +326,6 @@ export class IgxAvatarComponent implements OnInit { } } - constructor(public elementRef: ElementRef) { } - /** * Returns the css url of the image. * diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index b6055d350a1..81476dbdc9b 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -1,13 +1,4 @@ -import { - Component, - ContentChild, - ElementRef, - EventEmitter, - HostBinding, - Input, - Output, - ViewChild -} from '@angular/core'; +import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, inject } from '@angular/core'; import { IgxIconComponent } from '../icon/icon.component'; import { IToggleView } from '../core/navigation'; @@ -51,6 +42,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective] }) export class IgxBannerComponent implements IToggleView { + public elementRef = inject>(ElementRef); + /** * @hidden */ @@ -237,8 +230,6 @@ export class IgxBannerComponent implements IToggleView { private _animationSettings: ToggleAnimationSettings; private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN); - constructor(public elementRef: ElementRef) { } - /** * Opens the banner * diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts index 9d78e2fa85a..854013ed2ce 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts @@ -1,19 +1,4 @@ -import { - AfterViewInit, - Component, - ContentChildren, - ChangeDetectorRef, - EventEmitter, - HostBinding, - Input, - Output, - QueryList, - Renderer2, - ViewChildren, - OnDestroy, - ElementRef, - booleanAttribute -} from '@angular/core'; +import { AfterViewInit, Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren, OnDestroy, ElementRef, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; @@ -59,6 +44,10 @@ let NEXT_ID = 0; imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { + private _cdr = inject(ChangeDetectorRef); + private _renderer = inject(Renderer2); + private _el = inject(ElementRef); + /** * A collection containing all buttons inside the button group. */ @@ -309,12 +298,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { subtree: true, }; - constructor( - private _cdr: ChangeDetectorRef, - private _renderer: Renderer2, - private _el: ElementRef - ) {} - /** * Gets the selected button/buttons. * ```typescript diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts index 94f0a85d2a0..b32572dc15a 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts @@ -1,4 +1,4 @@ -import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID, HostListener, booleanAttribute, ViewChildren, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core'; +import { Input, Output, EventEmitter, Directive, LOCALE_ID, HostListener, booleanAttribute, ViewChildren, QueryList, ElementRef, ChangeDetectorRef, inject } from '@angular/core'; import { WEEKDAYS, IFormattingOptions, IFormattingViews, IViewDateChangeEventArgs, ScrollDirection, IgxCalendarView, CalendarSelection } from './calendar'; import { ControlValueAccessor } from '@angular/forms'; import { DateRangeDescriptor } from '../core/dates'; @@ -19,6 +19,11 @@ import { CalendarDay } from './common/model'; providers: [KeyboardNavigationService] }) export class IgxCalendarBaseDirective implements ControlValueAccessor { + protected platform = inject(PlatformUtil); + protected _localeId = inject(LOCALE_ID); + protected keyboardNavigation? = inject(KeyboardNavigationService); + protected cdr? = inject(ChangeDetectorRef); + /** * Holds month view index we are operating on. */ @@ -649,13 +654,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor { /** * @hidden */ - constructor( - protected platform: PlatformUtil, - @Inject(LOCALE_ID) - protected _localeId: string, - protected keyboardNavigation?: KeyboardNavigationService, - protected cdr?: ChangeDetectorRef, - ) { + constructor() { + const _localeId = this._localeId; + this.locale = _localeId; this.viewDate = this.viewDate ? this.viewDate : new Date(); this.initFormatters(); diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts index 91381fcc2e2..918b39a82d9 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts @@ -5,20 +5,7 @@ * * @preferred */ -import { - Directive, - EventEmitter, - HostBinding, - HostListener, - Input, - InjectionToken, - Output, - TemplateRef, - ElementRef, - AfterViewInit, - OnDestroy, - NgZone -} from '@angular/core'; +import { Directive, EventEmitter, HostBinding, HostListener, Input, InjectionToken, Output, TemplateRef, ElementRef, AfterViewInit, OnDestroy, NgZone, inject } from '@angular/core'; import { fromEvent, Subject, interval } from 'rxjs'; import { takeUntil, debounce, tap } from 'rxjs/operators'; import { PlatformUtil } from '../core/utils'; @@ -29,6 +16,8 @@ export const IGX_CALENDAR_VIEW_ITEM = @Directive() export abstract class IgxCalendarViewBaseDirective { + public elementRef = inject(ElementRef); + @Input() public value: Date; @@ -45,8 +34,6 @@ export abstract class IgxCalendarViewBaseDirective { return this.elementRef.nativeElement; } - constructor(public elementRef: ElementRef) { } - @HostListener('mousedown', ['$event']) public onMouseDown(event: MouseEvent) { event.preventDefault(); @@ -123,7 +110,7 @@ export class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective { standalone: true }) export class IgxCalendarHeaderTitleTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -134,7 +121,7 @@ export class IgxCalendarHeaderTitleTemplateDirective { standalone: true }) export class IgxCalendarHeaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -145,7 +132,7 @@ export class IgxCalendarHeaderTemplateDirective { standalone: true }) export class IgxCalendarSubheaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -156,6 +143,10 @@ export class IgxCalendarSubheaderTemplateDirective { standalone: true }) export class IgxCalendarScrollPageDirective implements AfterViewInit, OnDestroy { + private element = inject(ElementRef); + private zone = inject(NgZone); + protected platform = inject(PlatformUtil); + /** * A callback function to be invoked when increment/decrement page is triggered. * @@ -177,8 +168,6 @@ export class IgxCalendarScrollPageDirective implements AfterViewInit, OnDestroy */ private destroy$ = new Subject(); - constructor(private element: ElementRef, private zone: NgZone, protected platform: PlatformUtil) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.services.ts b/projects/igniteui-angular/src/lib/calendar/calendar.services.ts index 450f310d1ba..4cc36e3ea05 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.services.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.services.ts @@ -1,16 +1,14 @@ -import { Injectable, ElementRef, NgZone } from "@angular/core"; +import { Injectable, ElementRef, NgZone, inject } from "@angular/core"; import { EventManager } from "@angular/platform-browser"; @Injectable() export class KeyboardNavigationService { + private eventManager = inject(EventManager); + private ngZone = inject(NgZone); + private keyHandlers = new Map void>(); private eventUnsubscribeFn: Function | null = null; - constructor( - private eventManager: EventManager, - private ngZone: NgZone, - ) {} - public attachKeyboardHandlers(elementRef: ElementRef, context: any) { this.detachKeyboardHandlers(); // Clean up any existing listeners diff --git a/projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts b/projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts index 174da6a25f9..c3ce8c9998c 100644 --- a/projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts +++ b/projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts @@ -9,7 +9,7 @@ import { Directive, HostBinding, InjectionToken, - Inject, + inject, } from "@angular/core"; import { noop } from "rxjs"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; @@ -43,6 +43,8 @@ export const DAY_INTERVAL_TOKEN = new InjectionToken( standalone: true, }) export abstract class IgxCalendarViewDirective implements ControlValueAccessor { + protected dayInterval = inject(DAY_INTERVAL_TOKEN); + @HostBinding("attr.role") @Input() public role = 'grid'; @@ -177,7 +179,7 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor { this.initFormatter(); } - constructor(@Inject(DAY_INTERVAL_TOKEN) protected dayInterval?: DayInterval) { + constructor() { this.initFormatter(); } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts index 5fe28032534..7f1a5513010 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, HostBinding, ElementRef, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Input, Output, EventEmitter, HostBinding, ElementRef, booleanAttribute, ChangeDetectionStrategy, inject } from '@angular/core'; import { CalendarSelection } from '../calendar'; import { DateRangeDescriptor } from '../../core/dates'; import { CalendarDay } from '../common/model' @@ -14,6 +14,8 @@ import { areSameMonth, isNextMonth, isPreviousMonth, isDateInRanges } from '../c standalone: true }) export class IgxDayItemComponent { + private elementRef = inject(ElementRef); + @Input() public date: CalendarDay; @@ -191,6 +193,4 @@ export class IgxDayItemComponent { } private _selected = false; - - constructor(private elementRef: ElementRef) { } } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index 173dbbce11d..e04e1264888 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -1,26 +1,11 @@ -import { - Component, - Output, - EventEmitter, - Input, - HostListener, - ViewChildren, - QueryList, - HostBinding, - Inject, - LOCALE_ID, - booleanAttribute, - ElementRef, - ChangeDetectorRef, - ChangeDetectionStrategy, -} from '@angular/core'; +import { Component, Output, EventEmitter, Input, HostListener, ViewChildren, QueryList, HostBinding, booleanAttribute, ElementRef, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { TitleCasePipe } from '@angular/common'; import { CalendarSelection, ScrollDirection } from '../../calendar/calendar'; import { IgxDayItemComponent } from './day-item.component'; import { DateRangeType } from '../../core/dates'; import { IgxCalendarBaseDirective } from '../calendar-base'; -import { PlatformUtil, intoChunks } from '../../core/utils'; +import { intoChunks } from '../../core/utils'; import { IViewChangingEventArgs } from './days-view.interface'; import { areSameMonth, @@ -48,6 +33,9 @@ let NEXT_ID = 0; imports: [IgxDayItemComponent, TitleCasePipe] }) export class IgxDaysViewComponent extends IgxCalendarBaseDirective { + protected el = inject(ElementRef); + public override cdr = inject(ChangeDetectorRef); + #standalone = true; /** @@ -197,18 +185,6 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective { private _hideTrailingDays: boolean; private _showActiveDay: boolean; - /** - * @hidden - */ - constructor( - platform: PlatformUtil, - @Inject(LOCALE_ID) _localeId: string, - protected el: ElementRef, - public override cdr: ChangeDetectorRef, - ) { - super(platform, _localeId, null, cdr); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts index 956e7acc000..c1bec1b7e3b 100644 --- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts @@ -1,11 +1,4 @@ -import { - Component, - Input, - HostBinding, - ElementRef, - booleanAttribute, - Inject, -} from "@angular/core"; +import { Component, Input, HostBinding, ElementRef, booleanAttribute, inject } from "@angular/core"; import { IgxCalendarMonthDirective } from "../calendar.directives"; import { TitleCasePipe } from "@angular/common"; import { @@ -14,7 +7,6 @@ import { } from "../common/calendar-view.directive"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { CalendarDay } from "../common/model"; -import type { DayInterval } from "../common/model"; import { calendarRange } from "../common/helpers"; let NEXT_ID = 0; @@ -36,6 +28,8 @@ let NEXT_ID = 0; imports: [IgxCalendarMonthDirective, TitleCasePipe] }) export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { + public el = inject(ElementRef); + #standalone = true; /** @@ -128,13 +122,6 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements */ private _monthFormat = "short"; - constructor( - public el: ElementRef, - @Inject(DAY_INTERVAL_TOKEN) dayInterval: DayInterval, - ) { - super(dayInterval); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts index 07fd46a8de5..abf1e8f1f2f 100644 --- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts @@ -1,10 +1,4 @@ -import { - Component, - Input, - HostBinding, - ElementRef, - Inject, -} from "@angular/core"; +import { Component, Input, HostBinding, ElementRef, inject } from "@angular/core"; import { IgxCalendarYearDirective } from "../calendar.directives"; import { IgxCalendarViewDirective, @@ -12,7 +6,6 @@ import { } from "../common/calendar-view.directive"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { CalendarDay } from "../common/model"; -import type { DayInterval } from "../common/model"; import { calendarRange } from "../common/helpers"; @Component({ @@ -32,6 +25,8 @@ import { calendarRange } from "../common/helpers"; imports: [IgxCalendarYearDirective] }) export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { + public el = inject(ElementRef); + #standalone = true; /** @@ -110,13 +105,6 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C ); } - constructor( - public el: ElementRef, - @Inject(DAY_INTERVAL_TOKEN) dayInterval: DayInterval, - ) { - super(dayInterval); - } - /** * Returns the locale representation of the year in the years view. * diff --git a/projects/igniteui-angular/src/lib/card/card.component.ts b/projects/igniteui-angular/src/lib/card/card.component.ts index 60f713e41ee..eeb346f783b 100644 --- a/projects/igniteui-angular/src/lib/card/card.component.ts +++ b/projects/igniteui-angular/src/lib/card/card.component.ts @@ -1,15 +1,4 @@ -import { - Component, - Directive, - HostBinding, - Optional, - Inject, - Input, - OnInit, - OnChanges, - SimpleChanges, - booleanAttribute -} from '@angular/core'; +import { Component, Directive, HostBinding, Input, OnInit, OnChanges, SimpleChanges, booleanAttribute, inject } from '@angular/core'; let NEXT_ID = 0; @@ -283,6 +272,8 @@ export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof Ig standalone: true }) export class IgxCardActionsComponent implements OnInit, OnChanges { + public card = inject(IgxCardComponent, { optional: true }); + /** * Sets the layout style of the actions. * You can justify the elements slotted in the igx-card-action container @@ -317,8 +308,6 @@ export class IgxCardActionsComponent implements OnInit, OnChanges { private isVerticalSet = false; - constructor(@Optional() @Inject(IgxCardComponent) public card: IgxCardComponent) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts index 994e2e46d0c..9d4a6b92845 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts @@ -1,5 +1,5 @@ import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; -import { ChangeDetectorRef, Directive, EventEmitter, Inject, OnDestroy } from '@angular/core'; +import { ChangeDetectorRef, Directive, EventEmitter, inject, OnDestroy } from '@angular/core'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationPlayer, AnimationService } from '../services/animation/animation'; import { fadeIn, slideInLeft } from 'igniteui-angular/animations'; @@ -21,6 +21,9 @@ export interface IgxSlideComponentBase { /** @hidden */ @Directive() export abstract class IgxCarouselComponentBase implements OnDestroy { + private animationService = inject(IgxAngularAnimationService); + protected cdr = inject(ChangeDetectorRef); + /** @hidden */ public animationType: CarouselAnimationType = CarouselAnimationType.slide; @@ -46,11 +49,6 @@ export abstract class IgxCarouselComponentBase implements OnDestroy { /** @hidden */ protected vertical = false; - constructor( - @Inject(IgxAngularAnimationService) private animationService: AnimationService, - protected cdr: ChangeDetectorRef) { - } - public ngOnDestroy(): void { this.enterAnimationPlayer?.destroy(); this.leaveAnimationPlayer?.destroy(); diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index b99e6ec5007..9e352f2f74b 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -184,7 +184,7 @@ describe('Carousel', () => { expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3); spyOn(carousel.slideAdded, 'emit'); - const newSlide = new IgxSlideComponent(null); + const newSlide = new IgxSlideComponent(); carousel.add(newSlide); fixture.detectChanges(); args = { diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 8f740c49d02..66353de231c 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -1,36 +1,10 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; -import { - AfterContentInit, - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Inject, - Injectable, - Input, - IterableChangeRecord, - IterableDiffer, - IterableDiffers, - OnDestroy, - Output, - QueryList, - TemplateRef, - ViewChild, - ViewChildren, - booleanAttribute, - DOCUMENT -} from '@angular/core'; +import { AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injectable, Input, IterableChangeRecord, IterableDiffer, IterableDiffers, OnDestroy, Output, QueryList, TemplateRef, ViewChild, ViewChildren, booleanAttribute, DOCUMENT, inject } from '@angular/core'; import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; import { merge, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18n/carousel-resources'; import { first, IBaseEventArgs, last, PlatformUtil } from '../core/utils'; -import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { AnimationService } from '../services/animation/animation'; import { Direction, IgxCarouselComponentBase } from './carousel-base'; import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives'; import { IgxSlideComponent } from './slide.component'; @@ -88,6 +62,12 @@ export class CarouselHammerConfig extends HammerGestureConfig { imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet] }) export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { + private element = inject(ElementRef); + private iterableDiffers = inject(IterableDiffers); + private platformUtil = inject(PlatformUtil); + private dir = inject(IgxDirectionality); + private document = inject(DOCUMENT); + /** * Sets the `id` of the carousel. @@ -565,16 +545,8 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On this.restartInterval(); } - constructor( - cdr: ChangeDetectorRef, - private element: ElementRef, - private iterableDiffers: IterableDiffers, - @Inject(IgxAngularAnimationService) animationService: AnimationService, - private platformUtil: PlatformUtil, - private dir: IgxDirectionality, - @Inject(DOCUMENT) private document: any - ) { - super(animationService, cdr); + constructor() { + super(); this.differ = this.iterableDiffers.find([]).create(null); } diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.ts b/projects/igniteui-angular/src/lib/carousel/slide.component.ts index f4c8273eecd..aa9778109dd 100644 --- a/projects/igniteui-angular/src/lib/carousel/slide.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/slide.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, Inject } from '@angular/core'; +import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { Direction, IgxSlideComponentBase } from './carousel-base'; @@ -20,6 +20,8 @@ import { Direction, IgxSlideComponentBase } from './carousel-base'; standalone: true }) export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase { + private elementRef = inject(ElementRef); + /** * Gets/sets the `index` of the slide inside the carousel. * ```html @@ -130,8 +132,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli private _active = false; private _destroy$ = new Subject(); - constructor(private elementRef: ElementRef) { } - /** * Returns a reference to the carousel element in the DOM. * ```typescript diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts index e2820b92d01..3368e59f8c1 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts @@ -1,21 +1,4 @@ -import { - Directive, - EventEmitter, - HostListener, - HostBinding, - Input, - Output, - ViewChild, - ElementRef, - ChangeDetectorRef, - Optional, - Self, - booleanAttribute, - inject, - DestroyRef, - Inject, - AfterViewInit, -} from '@angular/core'; +import { Directive, EventEmitter, HostListener, HostBinding, Input, Output, ViewChild, ElementRef, ChangeDetectorRef, booleanAttribute, inject, DestroyRef, AfterViewInit } from '@angular/core'; import { NgControl, Validators } from '@angular/forms'; import { IBaseEventArgs, getComponentTheme } from '../core/utils'; import { noop, Subject } from 'rxjs'; @@ -41,6 +24,10 @@ let nextId = 0; @Directive() export class CheckboxBaseDirective implements AfterViewInit { + protected cdr = inject(ChangeDetectorRef); + protected themeToken = inject(THEME_TOKEN); + public ngControl = inject(NgControl, { optional: true, self: true }); + /** * An event that is emitted after the checkbox state is changed. * Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. @@ -247,12 +234,7 @@ export class CheckboxBaseDirective implements AfterViewInit { @Input('aria-label') public ariaLabel: string | null = null; - constructor( - protected cdr: ChangeDetectorRef, - @Inject(THEME_TOKEN) - protected themeToken: ThemeToken, - @Optional() @Self() public ngControl: NgControl - ) { + constructor() { if (this.ngControl !== null) { this.ngControl.valueAccessor = this; } diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts index 436883f1145..1c0cd7e15f7 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -504,11 +504,11 @@ class CheckboxDisabledTransitionsComponent { imports: [IgxCheckboxComponent, ReactiveFormsModule] }) class CheckboxFormGroupComponent { + private fb = inject(UntypedFormBuilder); + @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent; public myForm = this.fb.group({ checkbox: ['', Validators.required] }); - - constructor(private fb: UntypedFormBuilder) {} } @Component({ template: ` diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index b4ef3466e29..da4c17a67a2 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -1,21 +1,4 @@ -import { - Component, - ChangeDetectorRef, - EventEmitter, - ElementRef, - HostBinding, - HostListener, - Input, - Output, - ViewChild, - Renderer2, - TemplateRef, - OnDestroy, - booleanAttribute, - OnInit, - Inject, - DOCUMENT -} from '@angular/core'; +import { Component, ChangeDetectorRef, EventEmitter, ElementRef, HostBinding, HostListener, Input, Output, ViewChild, Renderer2, TemplateRef, OnDestroy, booleanAttribute, OnInit, DOCUMENT, inject } from '@angular/core'; import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive'; import { IBaseEventArgs } from '../core/utils'; import { ChipResourceStringsEN, IChipResourceStrings } from '../core/i18n/chip-resources'; @@ -88,6 +71,11 @@ let CHIP_ID = 0; imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent] }) export class IgxChipComponent implements OnInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + private ref = inject>(ElementRef); + private renderer = inject(Renderer2); + public document = inject(DOCUMENT); + /** * Sets/gets the variant of the chip. @@ -606,12 +594,6 @@ export class IgxChipComponent implements OnInit, OnDestroy { protected computedStyles; private _resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN); - constructor( - public cdr: ChangeDetectorRef, - private ref: ElementRef, - private renderer: Renderer2, - @Inject(DOCUMENT) public document: any) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index 3aa27a14a12..ec190469378 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, inject } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxChipComponent } from './chip.component'; @@ -43,6 +43,8 @@ import { getComponentSize } from '../core/utils'; imports: [IgxChipComponent, IgxChipsAreaComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) public chipsArea: IgxChipsAreaComponent; @@ -57,8 +59,6 @@ class TestChipComponent { { id: 'FirstName', text: 'First Name', removable: true, selectable: true, draggable: true, chipSize: '--ig-size-medium' } ]; - constructor(public cdr: ChangeDetectorRef) { } - public chipRemoved(event) { this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); this.cdr.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts index 63f44fe15bb..a2d22189a9d 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts @@ -1,19 +1,4 @@ -import { - Component, - ContentChildren, - ChangeDetectorRef, - EventEmitter, - HostBinding, - Input, - IterableDiffer, - IterableDiffers, - Output, - QueryList, - DoCheck, - AfterViewInit, - OnDestroy, - ElementRef -} from '@angular/core'; +import { Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, QueryList, DoCheck, AfterViewInit, OnDestroy, ElementRef, inject } from '@angular/core'; import { IgxChipComponent, IChipSelectEventArgs, @@ -66,6 +51,10 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs { standalone: true }) export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + public element = inject(ElementRef); + private _iterableDiffers = inject(IterableDiffers); + /** * Returns the `role` attribute of the chips area. @@ -192,8 +181,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy private modifiedChipsArray: IgxChipComponent[]; private _differ: IterableDiffer | null = null; - constructor(public cdr: ChangeDetectorRef, public element: ElementRef, - private _iterableDiffers: IterableDiffers) { + constructor() { this._differ = this._iterableDiffers.find([]).create(null); } diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts index 8184038e650..3e943e87178 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, inject } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxChipComponent } from './chip.component'; @@ -22,6 +22,8 @@ import { IgxPrefixDirective } from './public_api'; imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) public chipsArea: IgxChipsAreaComponent; @@ -32,8 +34,6 @@ class TestChipComponent { { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: false }, { id: 'City', text: 'City', removable: true, selectable: true, draggable: true } ]; - - constructor(public cdr: ChangeDetectorRef) { } } @Component({ @@ -70,6 +70,8 @@ class TestChipSelectComponent extends TestChipComponent { imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipReorderComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) public chipsArea: IgxChipsAreaComponent; @@ -83,8 +85,6 @@ class TestChipReorderComponent { { id: 'FirstName', text: 'First Name' }, ]; - constructor(public cdr: ChangeDetectorRef) { } - public chipsOrderChanged(event) { const newChipList = []; for (const chip of event.chipsArray) { diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index fcf22a4a2d3..c4c5210664a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -1,6 +1,4 @@ -import { - ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute, DOCUMENT -} from '@angular/core'; +import { Component, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute, inject } from '@angular/core'; import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common'; import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common'; import { IgxDropDownComponent } from '../drop-down/drop-down.component'; @@ -8,7 +6,6 @@ import { DropDownActionKey } from '../drop-down/drop-down.common'; import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; -import { IgxSelectionAPIService } from '../core/selection'; import { IgxComboItemComponent } from './combo-item.component'; import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; @@ -20,6 +17,9 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; imports: [IgxToggleDirective] }) export class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit { + public combo = inject(IGX_COMBO_COMPONENT); + protected comboAPI = inject(IgxComboAPIService); + /** @hidden @internal */ @Input({ transform: booleanAttribute }) public singleMode = false; @@ -78,16 +78,6 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I return items; } - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - @Inject(DOCUMENT) document: any, - selection: IgxSelectionAPIService, - @Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase, - protected comboAPI: IgxComboAPIService) { - super(elementRef, cdr, document, selection); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index ff74a3ebf3f..0634927f968 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -1,15 +1,7 @@ -import { - Component, - ElementRef, - HostBinding, - Inject, - Input, - booleanAttribute -} from '@angular/core'; +import { Component, HostBinding, Input, booleanAttribute, inject } from '@angular/core'; import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component'; -import { IGX_DROPDOWN_BASE, IDropDownBase, Navigate } from '../drop-down/drop-down.common'; +import { Navigate } from '../drop-down/drop-down.common'; import { IgxComboAPIService } from './combo.api'; -import { IgxSelectionAPIService } from '../core/selection'; import { rem } from '../core/utils'; import { IgxCheckboxComponent } from '../checkbox/checkbox.component'; @@ -20,6 +12,8 @@ import { IgxCheckboxComponent } from '../checkbox/checkbox.component'; imports: [IgxCheckboxComponent] }) export class IgxComboItemComponent extends IgxDropDownItemComponent { + protected comboAPI = inject(IgxComboAPIService); + /** * Gets the height of a list item @@ -71,15 +65,6 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent { return this.comboAPI.disableTransitions; } - constructor( - protected comboAPI: IgxComboAPIService, - @Inject(IGX_DROPDOWN_BASE) dropDown: IDropDownBase, - elementRef: ElementRef, - @Inject(IgxSelectionAPIService) selection: IgxSelectionAPIService - ) { - super(dropDown, elementRef, null, selection); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 6084b0ef637..726d2e8fbd0 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -11,19 +11,18 @@ import { EventEmitter, forwardRef, HostBinding, - Inject, InjectionToken, Injector, Input, OnDestroy, OnInit, - Optional, Output, QueryList, TemplateRef, ViewChild, DOCUMENT, - ViewChildren + ViewChildren, + inject } from '@angular/core'; import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms'; import { caseSensitive } from '@igniteui/material-icons-extended'; @@ -107,6 +106,15 @@ export interface IComboFilteringOptions { @Directive() export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewChecked, OnInit, AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor { + protected elementRef = inject(ElementRef); + protected cdr = inject(ChangeDetectorRef); + protected selectionService = inject(IgxSelectionAPIService); + protected comboAPI = inject(IgxComboAPIService); + public document = inject(DOCUMENT); + protected _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true }); + protected _injector = inject(Injector, { optional: true }); + protected _iconService = inject(IgxIconService, { optional: true }); + /** * Defines whether the caseSensitive icon should be shown in the search input * @@ -958,17 +966,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh public abstract dropdown: IgxComboDropDownComponent; public abstract selectionChanging: EventEmitter; - constructor( - protected elementRef: ElementRef, - protected cdr: ChangeDetectorRef, - protected selectionService: IgxSelectionAPIService, - protected comboAPI: IgxComboAPIService, - @Inject(DOCUMENT) public document: Document, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType: IgxInputGroupType, - @Optional() protected _injector: Injector, - @Optional() @Inject(IgxIconService) protected _iconService?: IgxIconService, - ) { } - public ngAfterViewChecked() { const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index e60214a6542..ff901636bcf 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1,8 +1,8 @@ import { AsyncPipe } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, ElementRef, Injectable, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, ElementRef, Injectable, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { - FormsModule, NgControl, NgForm, NgModel, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators + FormsModule, NgForm, NgModel, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -13,19 +13,20 @@ import { IBaseCancelableBrowserEventArgs } from '../core/utils'; import { SortingDirection } from '../data-operations/sorting-strategy'; import { IForOfState } from '../directives/for-of/for_of.directive'; import { IgxInputState } from '../directives/input/input.directive'; -import { IgxLabelDirective } from '../input-group/public_api'; +import { IGX_INPUT_GROUP_TYPE, IgxLabelDirective } from '../input-group/public_api'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboDropDownComponent } from './combo-dropdown.component'; import { IgxComboItemComponent } from './combo-item.component'; -import { IComboFilteringOptions } from './combo.common'; +import { IComboFilteringOptions, IGX_COMBO_COMPONENT } from './combo.common'; import { IComboItemAdditionEvent, IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, IgxComboComponent } from './combo.component'; import { IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective } from './combo.directives'; import { IgxComboFilteringPipe, comboIgnoreDiacriticsFilter } from './combo.pipes'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; +import { IgxComboAPIService } from './combo.api'; const CSS_CLASS_COMBO = 'igx-combo'; const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down'; @@ -81,30 +82,53 @@ describe('igxCombo', () => { const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']); const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register', 'clear']); const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']); - const mockInjector = jasmine.createSpyObj('Injector', { - get: mockNgControl - }); + const mockInjector = jasmine.createSpyObj('Injector', ['get']); + mockInjector.get.and.returnValue(mockNgControl); mockSelection.get.and.returnValue(new Set([])); - const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }}); jasmine.getEnv().allowRespy(true); + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [IgxComboComponent, NoopAnimationsModule], + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxSelectionAPIService, useValue: mockSelection }, + { provide: IgxComboAPIService, useValue: mockComboService }, + { provide: IGX_INPUT_GROUP_TYPE, useValue: null }, + { provide: Injector, useValue: mockInjector } + ] + }) + .overrideComponent(IgxComboComponent, { + set: { + providers: [ + { provide: IgxComboAPIService, useValue: mockComboService }, + { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent } + ] + } + }) + .compileComponents(); + + fixture = TestBed.createComponent(IgxComboComponent); + combo = fixture.componentInstance; + + const dropdown = (combo as any).dropdown; + if (dropdown) { + (dropdown as any).virtDir = { + getScroll: () => ({ + removeEventListener: () => { } + }) + }; + } + }) + afterAll(() => { jasmine.getEnv().allowRespy(false); }); it('should correctly implement interface methods - ControlValueAccessor ', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); - combo.ngOnInit(); - expect(mockInjector.get).toHaveBeenCalledWith(NgControl, null); + expect(combo['ngControl']).toBeDefined(); combo.registerOnChange(mockNgControl.registerOnChangeCb); combo.registerOnTouched(mockNgControl.registerOnTouchedCb); @@ -139,16 +163,6 @@ describe('igxCombo', () => { expect(mockNgControl.registerOnTouchedCb).toHaveBeenCalledTimes(1); }); it('should properly call dropdown methods on toggle', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']); combo.ngOnInit(); combo.dropdown = dropdown; @@ -170,15 +184,7 @@ describe('igxCombo', () => { expect(combo.collapsed).toBe(false); }); it(`should not focus search input when property autoFocusSearch=false`, () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + const dropdownContainer = { nativeElement: { focus: () => { } } }; combo['dropdownContainer'] = dropdownContainer; spyOn(combo, 'focusSearchInput'); @@ -196,15 +202,7 @@ describe('igxCombo', () => { expect(combo.focusSearchInput).toHaveBeenCalledTimes(1); }); it('should call dropdown toggle with correct overlaySettings', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']); combo.ngOnInit(); combo.dropdown = dropdown; @@ -221,15 +219,7 @@ describe('igxCombo', () => { expect(combo.dropdown.toggle).toHaveBeenCalledWith(expectedSettings); }); it('should properly get/set displayKey', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); combo.valueKey = 'field'; expect(combo.displayKey).toEqual(combo.valueKey); @@ -238,15 +228,7 @@ describe('igxCombo', () => { expect(combo.displayKey === combo.valueKey).toBeFalsy(); }); it('should properly call "writeValue" method', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); combo.data = data; mockSelection.select_items.calls.reset(); @@ -262,107 +244,8 @@ describe('igxCombo', () => { // When value key is specified, the item's value key is stored in the selection expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, [], true); }); - it('should select items through setSelctedItem method', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = complexData; - combo.valueKey = 'country'; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - - const selectedItems = [combo.data[0]]; - const selectedValues = [combo.data[0].country]; - combo.setSelectedItem('UK', true); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedValues); - combo.setSelectedItem('Germany', true); - selectedItems.push(combo.data[2]); - selectedValues.push(combo.data[2].country); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedValues); - selectedItems.pop(); - selectedValues.pop(); - combo.setSelectedItem('Germany', false); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedValues); - selectedItems.pop(); - selectedValues.pop(); - combo.setSelectedItem('UK', false); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedValues); - - combo.valueKey = null; - selectedItems.push(combo.data[5]); - combo.setSelectedItem(combo.data[5], true); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedItems); - selectedItems.push(combo.data[1]); - combo.setSelectedItem(combo.data[1], true); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedItems); - selectedItems.pop(); - combo.setSelectedItem(combo.data[1], false); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedItems); - }); - it('should set selectedItems correctly on selectItems method call', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - - combo.select([], false); - expect(combo.selection).toEqual([]); - expect(combo.value).toEqual([]); - combo.select([], true); - expect(combo.selection).toEqual([]); - expect(combo.value).toEqual([]); - const selectedItems = combo.data.slice(0, 3); - combo.select(combo.data.slice(0, 3), true); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedItems); - combo.select([], false); - expect(combo.selection).toEqual(selectedItems); - expect(combo.value).toEqual(selectedItems); - selectedItems.push(combo.data[3]); - combo.select([combo.data[3]], false); - expect(combo.selection).toEqual(combo.data.slice(0, 4)); - expect(combo.value).toEqual(combo.data.slice(0, 4)); - combo.select([], true); - expect(combo.selection).toEqual([]); - expect(combo.value).toEqual([]); - }); it('should emit owner on `opening` and `closing`', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); spyOn(combo.opening, 'emit').and.callThrough(); spyOn(combo.closing, 'emit').and.callThrough(); @@ -398,327 +281,8 @@ describe('igxCombo', () => { expect(inputEvent.cancel).toEqual(true); sub.unsubscribe(); }); - it('should fire selectionChanging event on item selection', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - spyOn(combo.selectionChanging, 'emit'); - - let oldValue = []; - let newValue = [combo.data[1], combo.data[5], combo.data[6]]; - - let oldSelection = []; - let newSelection = [combo.data[1], combo.data[5], combo.data[6]]; - - combo.select(newSelection); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(1); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue, - newValue, - oldSelection, - newSelection, - added: newSelection, - removed: [], - event: undefined, - owner: combo, - displayText: `${newSelection.join(', ')}`, - cancel: false - }); - - let newItem = combo.data[3]; - combo.select([newItem]); - oldValue = [...newValue]; - newValue.push(newItem); - oldSelection = [...newSelection]; - newSelection.push(newItem); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(2); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue, - newValue, - oldSelection, - newSelection, - removed: [], - added: [combo.data[3]], - event: undefined, - owner: combo, - displayText: `${newSelection.join(', ')}`, - cancel: false - }); - - oldValue = [...newValue]; - newValue = [combo.data[0]]; - oldSelection = [...newSelection]; - newSelection = [combo.data[0]]; - combo.select(newSelection, true); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(3); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue, - newValue, - oldSelection, - newSelection, - removed: oldSelection, - added: newSelection, - event: undefined, - owner: combo, - displayText: `${newSelection.join(', ')}`, - cancel: false - }); - - oldValue = [...newValue]; - newValue = []; - oldSelection = [...newSelection]; - newSelection = []; - newItem = combo.data[0]; - combo.deselect([newItem]); - expect(combo.selection.length).toEqual(0); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(4); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue, - newValue, - oldSelection, - newSelection, - removed: [combo.data[0]], - added: [], - event: undefined, - owner: combo, - displayText: `${newSelection.join(', ')}`, - cancel: false - }); - }); - it('should properly emit added and removed values in change event on single value selection', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = complexData; - combo.valueKey = 'country'; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - const selectionSpy = spyOn(combo.selectionChanging, 'emit'); - const expectedResults: IComboSelectionChangingEventArgs = { - newValue: [combo.data[0][combo.valueKey]], - oldValue: [], - newSelection: [combo.data[0]], - oldSelection: [], - added: [combo.data[0]], - removed: [], - event: undefined, - owner: combo, - displayText: `${combo.data[0][combo.displayKey]}`, - cancel: false - }; - combo.select([combo.data[0][combo.valueKey]]); - expect(selectionSpy).toHaveBeenCalledWith(expectedResults); - Object.assign(expectedResults, { - newValue: [], - oldValue: [combo.data[0][combo.valueKey]], - newSelection: [], - oldSelection: [combo.data[0]], - added: [], - displayText: '', - removed: [combo.data[0]] - }); - combo.deselect([combo.data[0][combo.valueKey]]); - expect(selectionSpy).toHaveBeenCalledWith(expectedResults); - }); - it('should properly emit added and removed values in change event on multiple values selection', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = complexData; - combo.valueKey = 'country'; - combo.displayKey = 'city'; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - const selectionSpy = spyOn(combo.selectionChanging, 'emit'); - - let oldSelection = []; - let newSelection = [combo.data[0], combo.data[1], combo.data[2]]; - combo.select(newSelection.map(e => e[combo.valueKey])); - const expectedResults: IComboSelectionChangingEventArgs = { - newValue: newSelection.map(e => e[combo.valueKey]), - oldValue: [], - newSelection: newSelection, - oldSelection, - added: newSelection, - removed: [], - event: undefined, - owner: combo, - displayText: `${newSelection.map(entry => entry[combo.displayKey]).join(', ')}`, - cancel: false - }; - expect(selectionSpy).toHaveBeenCalledWith(expectedResults); - - oldSelection = [...newSelection]; - newSelection = [combo.data[1], combo.data[2]]; - combo.deselect([combo.data[0][combo.valueKey]]); - Object.assign(expectedResults, { - newValue: newSelection.map(e => e[combo.valueKey]), - oldValue: oldSelection.map(e => e[combo.valueKey]), - newSelection, - oldSelection, - added: [], - displayText: newSelection.map(e => e[combo.displayKey]).join(', '), - removed: [combo.data[0]] - }); - expect(selectionSpy).toHaveBeenCalledWith(expectedResults); - - oldSelection = [...newSelection]; - newSelection = [combo.data[4], combo.data[5], combo.data[6]]; - combo.select(newSelection.map(e => e[combo.valueKey]), true); - Object.assign(expectedResults, { - newValue: newSelection.map(e => e[combo.valueKey]), - oldValue: oldSelection.map(e => e[combo.valueKey]), - newSelection, - oldSelection, - added: newSelection, - displayText: newSelection.map(e => e[combo.displayKey]).join(', '), - removed: oldSelection - }); - expect(selectionSpy).toHaveBeenCalledWith(expectedResults); - }); - it('should handle select/deselect ALL items', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - spyOn(combo, 'selectAllItems'); - spyOn(combo, 'deselectAllItems'); - - combo.handleSelectAll({ checked: true }); - expect(combo.selectAllItems).toHaveBeenCalledTimes(1); - expect(combo.deselectAllItems).toHaveBeenCalledTimes(0); - - combo.handleSelectAll({ checked: false }); - expect(combo.selectAllItems).toHaveBeenCalledTimes(1); - expect(combo.deselectAllItems).toHaveBeenCalledTimes(1); - }); - it('should emit onSelectonChange event on select/deselect ALL items method call', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - spyOn(combo.selectionChanging, 'emit'); - - combo.selectAllItems(true); - expect(combo.selection).toEqual(data); - expect(combo.value).toEqual(data); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(1); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue: [], - newValue: data, - oldSelection: [], - newSelection: data, - added: data, - removed: [], - owner: combo, - event: undefined, - displayText: `${combo.data.join(', ')}`, - cancel: false - }); - - combo.deselectAllItems(true); - expect(combo.selection).toEqual([]); - expect(combo.value).toEqual([]); - expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(2); - expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ - oldValue: data, - newValue: [], - oldSelection: data, - newSelection: [], - added: [], - removed: data, - owner: combo, - event: undefined, - displayText: '', - cancel: false - }); - }); - it('should properly handle selection manipulation through selectionChanging emit', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.newValue = []); - // No items are initially selected - expect(combo.selection).toEqual([]); - // Select the first 5 items - combo.select(combo.data.splice(0, 5)); - // selectionChanging fires and overrides the selection to be []; - expect(combo.selection).toEqual([]); - }); it('should not throw error when setting data to null', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); let errorMessage = ''; try { @@ -732,15 +296,7 @@ describe('igxCombo', () => { expect(combo.data.length).toBe(0); }); it('should not throw error when setting data to undefined', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); let errorMessage = ''; try { @@ -754,15 +310,7 @@ describe('igxCombo', () => { expect(combo.data.length).toBe(0); }); it('should properly handleInputChange', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); combo.ngOnInit(); combo.data = data; @@ -800,15 +348,7 @@ describe('igxCombo', () => { expect(combo.searchInputUpdate.emit).toHaveBeenCalledTimes(2); }); it('should be able to cancel searchInputUpdate', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + combo.ngOnInit(); combo.data = data; combo.disableFiltering = false; @@ -823,15 +363,7 @@ describe('igxCombo', () => { expect(matchSpy).toHaveBeenCalledTimes(1); }); it('should not open on click if combo is disabled', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']); const spyObj = jasmine.createSpyObj('event', ['stopPropagation', 'preventDefault']); combo.ngOnInit(); @@ -842,150 +374,472 @@ describe('igxCombo', () => { combo.onClick(spyObj); expect(combo.dropdown.collapsed).toBeTruthy(); }); - it('should not clear value when combo is disabled', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - const spyObj = jasmine.createSpyObj('event', ['stopPropagation']); - combo.ngOnInit(); - combo.data = data; - combo.dropdown = dropdown; - combo.disabled = true; - spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); - - const item = combo.data.slice(0, 1); - combo.select(item, true); - combo.handleClearItems(spyObj); - expect(combo.displayValue).toEqual(item[0]); + it('should delete the selection on destroy', () => { + combo.ngOnDestroy(); + expect(mockComboService.clear).toHaveBeenCalled(); + expect(mockSelection.delete).toHaveBeenCalled(); }); - it('should allow canceling and overwriting of item addition', fakeAsync(() => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - mockDocument, - null, - mockInjector - ); - const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); - const mockVirtDir = jasmine.createSpyObj('virtDir', ['scrollTo']); - const mockInput = jasmine.createSpyObj('mockInput', [], { - nativeElement: jasmine.createSpyObj('mockElement', ['focus']) - }); - spyOn(combo.addition, 'emit').and.callThrough(); - const subParams: { cancel: boolean; newValue: string; modify: boolean } = { - cancel: false, - modify: false, - newValue: 'mockValue' - }; - const sub = combo.addition.subscribe((e) => { - if (subParams.cancel) { - e.cancel = true; - } - if (subParams.modify) { - e.addedItem = subParams.newValue; + describe('Combo selection API unit tests: ', () => { + let selectionService: IgxSelectionAPIService; + beforeEach(() => { + selectionService = new IgxSelectionAPIService(); + TestBed.resetTestingModule(); + + TestBed.configureTestingModule({ + imports: [IgxComboComponent, NoopAnimationsModule], + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxSelectionAPIService, useValue: selectionService }, + { provide: IgxComboAPIService, useValue: mockComboService }, + { provide: IGX_INPUT_GROUP_TYPE, useValue: null }, + { provide: Injector, useValue: mockInjector } + ] + }).compileComponents(); + + fixture = TestBed.createComponent(IgxComboComponent); + combo = fixture.componentInstance; + + const dropdown = (combo as any).dropdown; + if (dropdown) { + (dropdown as any).virtDir = { + getScroll: () => ({ removeEventListener: () => { } }) + }; } }); - combo.ngOnInit(); - combo.data = ['Item 1', 'Item 2', 'Item 3']; - combo.dropdown = dropdown; - combo.searchInput = mockInput; - (combo as any).virtDir = mockVirtDir; - let mockAddParams: IComboItemAdditionEvent = { - cancel: false, - owner: combo, - addedItem: 'Item 99', - newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'], - oldCollection: ['Item 1', 'Item 2', 'Item 3'] - }; + it('should select items through setSelctedItem method', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = complexData; + combo.valueKey = 'country'; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + + const selectedItems = [combo.data[0]]; + const selectedValues = [combo.data[0].country]; + combo.setSelectedItem('UK', true); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedValues); + combo.setSelectedItem('Germany', true); + selectedItems.push(combo.data[2]); + selectedValues.push(combo.data[2].country); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedValues); + selectedItems.pop(); + selectedValues.pop(); + combo.setSelectedItem('Germany', false); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedValues); + selectedItems.pop(); + selectedValues.pop(); + combo.setSelectedItem('UK', false); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedValues); + combo.valueKey = null; + selectedItems.push(combo.data[5]); + combo.setSelectedItem(combo.data[5], true); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedItems); + selectedItems.push(combo.data[1]); + combo.setSelectedItem(combo.data[1], true); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedItems); + selectedItems.pop(); + combo.setSelectedItem(combo.data[1], false); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedItems); + }); + it('should set selectedItems correctly on selectItems method call', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + + combo.select([], false); + expect(combo.selection).toEqual([]); + expect(combo.value).toEqual([]); + combo.select([], true); + expect(combo.selection).toEqual([]); + expect(combo.value).toEqual([]); + const selectedItems = combo.data.slice(0, 3); + combo.select(combo.data.slice(0, 3), true); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedItems); + combo.select([], false); + expect(combo.selection).toEqual(selectedItems); + expect(combo.value).toEqual(selectedItems); + selectedItems.push(combo.data[3]); + combo.select([combo.data[3]], false); + expect(combo.selection).toEqual(combo.data.slice(0, 4)); + expect(combo.value).toEqual(combo.data.slice(0, 4)); + combo.select([], true); + expect(combo.selection).toEqual([]); + expect(combo.value).toEqual([]); + }); + it('should fire selectionChanging event on item selection', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + spyOn(combo.selectionChanging, 'emit'); - // handle addition - - combo.searchValue = 'Item 99'; - combo.addItemToCollection(); - tick(); - expect(combo.data.length).toEqual(4); - expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); - expect(combo.addition.emit).toHaveBeenCalledTimes(1); - expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1); - expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1); - expect(combo.data[combo.data.length - 1]).toBe('Item 99'); - expect(selectionService.get(combo.id).size).toBe(1); - expect([...selectionService.get(combo.id)][0]).toBe('Item 99'); - - // cancel - subParams.cancel = true; - mockAddParams = { - cancel: true, - owner: combo, - addedItem: 'Item 99', - newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'], - oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'] - }; + let oldValue = []; + let newValue = [combo.data[1], combo.data[5], combo.data[6]]; - combo.searchValue = 'Item 99'; - combo.addItemToCollection(); - tick(); - expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); - expect(combo.addition.emit).toHaveBeenCalledTimes(2); - expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1); - expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1); - expect(combo.data.length).toEqual(4); - expect(combo.data[combo.data.length - 1]).toBe('Item 99'); - expect(selectionService.get(combo.id).size).toBe(1); - expect([...selectionService.get(combo.id)][0]).toBe('Item 99'); - - // overwrite - subParams.modify = true; - subParams.cancel = false; - mockAddParams = { - cancel: false, - owner: combo, - addedItem: 'mockValue', - newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'], - oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'] - }; + let oldSelection = []; + let newSelection = [combo.data[1], combo.data[5], combo.data[6]]; - combo.searchValue = 'Item 99'; - combo.addItemToCollection(); - tick(); - expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); - expect(combo.addition.emit).toHaveBeenCalledTimes(3); - expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(2); - expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(2); - expect(combo.data.length).toEqual(5); - expect(combo.data[combo.data.length - 1]).toBe(subParams.newValue); - expect(selectionService.get(combo.id).size).toBe(2); - expect([...selectionService.get(combo.id)][1]).toBe(subParams.newValue); - sub.unsubscribe(); - })); + combo.select(newSelection); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(1); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue, + newValue, + oldSelection, + newSelection, + added: newSelection, + removed: [], + event: undefined, + owner: combo, + displayText: `${newSelection.join(', ')}`, + cancel: false + }); - it('should delete the selection on destroy', () => { - combo = new IgxComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - mockDocument, - null, - mockInjector - ); - combo.ngOnDestroy(); - expect(mockComboService.clear).toHaveBeenCalled(); - expect(mockSelection.delete).toHaveBeenCalled(); + let newItem = combo.data[3]; + combo.select([newItem]); + oldValue = [...newValue]; + newValue.push(newItem); + oldSelection = [...newSelection]; + newSelection.push(newItem); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(2); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue, + newValue, + oldSelection, + newSelection, + removed: [], + added: [combo.data[3]], + event: undefined, + owner: combo, + displayText: `${newSelection.join(', ')}`, + cancel: false + }); + + oldValue = [...newValue]; + newValue = [combo.data[0]]; + oldSelection = [...newSelection]; + newSelection = [combo.data[0]]; + combo.select(newSelection, true); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(3); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue, + newValue, + oldSelection, + newSelection, + removed: oldSelection, + added: newSelection, + event: undefined, + owner: combo, + displayText: `${newSelection.join(', ')}`, + cancel: false + }); + + oldValue = [...newValue]; + newValue = []; + oldSelection = [...newSelection]; + newSelection = []; + newItem = combo.data[0]; + combo.deselect([newItem]); + expect(combo.selection.length).toEqual(0); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(4); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue, + newValue, + oldSelection, + newSelection, + removed: [combo.data[0]], + added: [], + event: undefined, + owner: combo, + displayText: `${newSelection.join(', ')}`, + cancel: false + }); + }); + it('should properly emit added and removed values in change event on single value selection', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = complexData; + combo.valueKey = 'country'; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + const selectionSpy = spyOn(combo.selectionChanging, 'emit'); + const expectedResults: IComboSelectionChangingEventArgs = { + newValue: [combo.data[0][combo.valueKey]], + oldValue: [], + newSelection: [combo.data[0]], + oldSelection: [], + added: [combo.data[0]], + removed: [], + event: undefined, + owner: combo, + displayText: `${combo.data[0][combo.displayKey]}`, + cancel: false + }; + combo.select([combo.data[0][combo.valueKey]]); + expect(selectionSpy).toHaveBeenCalledWith(expectedResults); + Object.assign(expectedResults, { + newValue: [], + oldValue: [combo.data[0][combo.valueKey]], + newSelection: [], + oldSelection: [combo.data[0]], + added: [], + displayText: '', + removed: [combo.data[0]] + }); + combo.deselect([combo.data[0][combo.valueKey]]); + expect(selectionSpy).toHaveBeenCalledWith(expectedResults); + }); + it('should properly emit added and removed values in change event on multiple values selection', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = complexData; + combo.valueKey = 'country'; + combo.displayKey = 'city'; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + const selectionSpy = spyOn(combo.selectionChanging, 'emit'); + + let oldSelection = []; + let newSelection = [combo.data[0], combo.data[1], combo.data[2]]; + combo.select(newSelection.map(e => e[combo.valueKey])); + const expectedResults: IComboSelectionChangingEventArgs = { + newValue: newSelection.map(e => e[combo.valueKey]), + oldValue: [], + newSelection: newSelection, + oldSelection, + added: newSelection, + removed: [], + event: undefined, + owner: combo, + displayText: `${newSelection.map(entry => entry[combo.displayKey]).join(', ')}`, + cancel: false + }; + expect(selectionSpy).toHaveBeenCalledWith(expectedResults); + + oldSelection = [...newSelection]; + newSelection = [combo.data[1], combo.data[2]]; + combo.deselect([combo.data[0][combo.valueKey]]); + Object.assign(expectedResults, { + newValue: newSelection.map(e => e[combo.valueKey]), + oldValue: oldSelection.map(e => e[combo.valueKey]), + newSelection, + oldSelection, + added: [], + displayText: newSelection.map(e => e[combo.displayKey]).join(', '), + removed: [combo.data[0]] + }); + expect(selectionSpy).toHaveBeenCalledWith(expectedResults); + + oldSelection = [...newSelection]; + newSelection = [combo.data[4], combo.data[5], combo.data[6]]; + combo.select(newSelection.map(e => e[combo.valueKey]), true); + Object.assign(expectedResults, { + newValue: newSelection.map(e => e[combo.valueKey]), + oldValue: oldSelection.map(e => e[combo.valueKey]), + newSelection, + oldSelection, + added: newSelection, + displayText: newSelection.map(e => e[combo.displayKey]).join(', '), + removed: oldSelection + }); + expect(selectionSpy).toHaveBeenCalledWith(expectedResults); + }); + it('should handle select/deselect ALL items', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + spyOn(combo, 'selectAllItems'); + spyOn(combo, 'deselectAllItems'); + + combo.handleSelectAll({ checked: true }); + expect(combo.selectAllItems).toHaveBeenCalledTimes(1); + expect(combo.deselectAllItems).toHaveBeenCalledTimes(0); + + combo.handleSelectAll({ checked: false }); + expect(combo.selectAllItems).toHaveBeenCalledTimes(1); + expect(combo.deselectAllItems).toHaveBeenCalledTimes(1); + }); + it('should emit onSelectonChange event on select/deselect ALL items method call', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + spyOn(combo.selectionChanging, 'emit'); + + combo.selectAllItems(true); + expect(combo.selection).toEqual(data); + expect(combo.value).toEqual(data); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(1); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue: [], + newValue: data, + oldSelection: [], + newSelection: data, + added: data, + removed: [], + owner: combo, + event: undefined, + displayText: `${combo.data.join(', ')}`, + cancel: false + }); + + combo.deselectAllItems(true); + expect(combo.selection).toEqual([]); + expect(combo.value).toEqual([]); + expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(2); + expect(combo.selectionChanging.emit).toHaveBeenCalledWith({ + oldValue: data, + newValue: [], + oldSelection: data, + newSelection: [], + added: [], + removed: data, + owner: combo, + event: undefined, + displayText: '', + cancel: false + }); + }); + it('should properly handle selection manipulation through selectionChanging emit', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.newValue = []); + // No items are initially selected + expect(combo.selection).toEqual([]); + // Select the first 5 items + combo.select(combo.data.splice(0, 5)); + // selectionChanging fires and overrides the selection to be []; + expect(combo.selection).toEqual([]); + }); + it('should not clear value when combo is disabled', () => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + const spyObj = jasmine.createSpyObj('event', ['stopPropagation']); + combo.ngOnInit(); + combo.data = data; + combo.dropdown = dropdown; + combo.disabled = true; + spyOnProperty(combo, 'totalItemCount').and.returnValue(combo.data.length); + + const item = combo.data.slice(0, 1); + combo.select(item, true); + combo.handleClearItems(spyObj); + expect(combo.displayValue).toEqual(item[0]); + }); + it('should allow canceling and overwriting of item addition', fakeAsync(() => { + const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); + const mockVirtDir = jasmine.createSpyObj('virtDir', ['scrollTo']); + const mockInput = jasmine.createSpyObj('mockInput', [], { + nativeElement: jasmine.createSpyObj('mockElement', ['focus']) + }); + spyOn(combo.addition, 'emit').and.callThrough(); + const subParams: { cancel: boolean; newValue: string; modify: boolean } = { + cancel: false, + modify: false, + newValue: 'mockValue' + }; + const sub = combo.addition.subscribe((e) => { + if (subParams.cancel) { + e.cancel = true; + } + if (subParams.modify) { + e.addedItem = subParams.newValue; + } + }); + + combo.ngOnInit(); + combo.data = ['Item 1', 'Item 2', 'Item 3']; + combo.dropdown = dropdown; + combo.searchInput = mockInput; + (combo as any).virtDir = mockVirtDir; + let mockAddParams: IComboItemAdditionEvent = { + cancel: false, + owner: combo, + addedItem: 'Item 99', + newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'], + oldCollection: ['Item 1', 'Item 2', 'Item 3'] + }; + + + // handle addition + + combo.searchValue = 'Item 99'; + combo.addItemToCollection(); + tick(); + expect(combo.data.length).toEqual(4); + expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); + expect(combo.addition.emit).toHaveBeenCalledTimes(1); + expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1); + expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1); + expect(combo.data[combo.data.length - 1]).toBe('Item 99'); + expect(selectionService.get(combo.id).size).toBe(1); + expect([...selectionService.get(combo.id)][0]).toBe('Item 99'); + + // cancel + subParams.cancel = true; + mockAddParams = { + cancel: true, + owner: combo, + addedItem: 'Item 99', + newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'], + oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'] + }; + + combo.searchValue = 'Item 99'; + combo.addItemToCollection(); + tick(); + expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); + expect(combo.addition.emit).toHaveBeenCalledTimes(2); + expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1); + expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1); + expect(combo.data.length).toEqual(4); + expect(combo.data[combo.data.length - 1]).toBe('Item 99'); + expect(selectionService.get(combo.id).size).toBe(1); + expect([...selectionService.get(combo.id)][0]).toBe('Item 99'); + + // overwrite + subParams.modify = true; + subParams.cancel = false; + mockAddParams = { + cancel: false, + owner: combo, + addedItem: 'mockValue', + newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'], + oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'] + }; + + combo.searchValue = 'Item 99'; + combo.addItemToCollection(); + tick(); + expect(combo.addition.emit).toHaveBeenCalledWith(mockAddParams); + expect(combo.addition.emit).toHaveBeenCalledTimes(3); + expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(2); + expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(2); + expect(combo.data.length).toEqual(5); + expect(combo.data[combo.data.length - 1]).toBe(subParams.newValue); + expect(selectionService.get(combo.id).size).toBe(2); + expect([...selectionService.get(combo.id)][1]).toBe(subParams.newValue); + sub.unsubscribe(); + })); }); }); @@ -1311,7 +1165,7 @@ describe('igxCombo', () => { expect(errorSpy).not.toHaveBeenCalled(); }); - it('should properly assign the resource string to the aria-label of the clear button',() => { + it('should properly assign the resource string to the aria-label of the clear button', () => { combo.toggle(); fixture.detectChanges(); @@ -3598,6 +3452,8 @@ describe('igxCombo', () => { imports: [IgxComboComponent, IgxComboItemDirective, IgxComboHeaderDirective, IgxComboFooterDirective] }) class IgxComboSampleComponent { + public elementRef = inject(ElementRef); + /** * TODO * Test that use this component should properly call `selectItems` method @@ -3611,7 +3467,7 @@ class IgxComboSampleComponent { public initData = []; public size = 'medium'; - constructor(public elementRef: ElementRef) { + constructor() { const division = { 'New England 01': ['Connecticut', 'Maine', 'Massachusetts'], @@ -3687,7 +3543,9 @@ class IgxComboFormComponent { public reactiveForm: UntypedFormGroup; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + const division = { 'New England 01': ['Connecticut', 'Maine', 'Massachusetts'], @@ -3814,12 +3672,14 @@ export class LocalService { imports: [IgxComboComponent] }) export class IgxComboBindingTestComponent { + private localService = inject(LocalService); + @ViewChild('combo', { read: IgxComboComponent, static: true }) public combo: IgxComboComponent; public items = []; - constructor(private localService: LocalService) { + constructor() { this.localService.getData().subscribe( (data: any[]) => { this.items = data; @@ -3910,10 +3770,12 @@ export class RemoteDataService { imports: [IgxComboComponent, AsyncPipe] }) export class IgxComboRemoteDataComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteDataService = inject(RemoteDataService); + public cdr = inject(ChangeDetectorRef); + @ViewChild('combo', { read: IgxComboComponent, static: true }) public instance: IgxComboComponent; public data; - constructor(private remoteDataService: RemoteDataService, public cdr: ChangeDetectorRef) { } public ngOnInit(): void { this.data = this.remoteDataService.records; } @@ -3958,11 +3820,11 @@ export class ComboModelBindingComponent implements OnInit { imports: [IgxComboComponent, FormsModule] }) export class IgxComboBindingDataAfterInitComponent implements AfterViewInit { + private cdr = inject(ChangeDetectorRef); + public items: any[] = []; public selectedItems: any[] = [0]; - constructor(private cdr: ChangeDetectorRef) { } - public ngAfterViewInit() { setTimeout(() => { this.items = [{ text: 'One', id: 0 }, { text: 'Two', id: 1 }, { text: 'Three', id: 2 }, diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index f3b0d6add53..19f1456044a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -1,15 +1,10 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; -import { - AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, DOCUMENT, - Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute, -} from '@angular/core'; +import { AfterViewInit, Component, OnInit, OnDestroy, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { IgxSelectionAPIService } from '../core/selection'; import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils'; import { IgxForOfDirective } from '../directives/for-of/for_of.directive'; -import { IgxIconService } from '../icon/icon.service'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxInputGroupComponent } from '../input-group/input-group.component'; @@ -20,7 +15,6 @@ import { IGX_COMBO_COMPONENT, IgxComboBaseDirective } from './combo.common'; import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; import { EditorProvider } from '../core/edit-provider'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxSuffixDirective } from '../directives/suffix/suffix.directive'; @@ -186,17 +180,8 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie private _displayText: string; private _disableFiltering = false; - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - selectionService: IgxSelectionAPIService, - comboAPI: IgxComboAPIService, - @Inject(DOCUMENT) document: any, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType: IgxInputGroupType, - @Optional() _injector: Injector, - @Optional() @Inject(IgxIconService) _iconService?: IgxIconService, - ) { - super(elementRef, cdr, selectionService, comboAPI, document, _inputGroupType, _injector, _iconService); + constructor() { + super(); this.comboAPI.register(this); } diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts index 1213380f561..f6dbaf7125c 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { SortingDirection } from '../data-operations/sorting-strategy'; import { IComboFilteringOptions, IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common'; @@ -32,8 +32,8 @@ export class IgxComboFilteringPipe implements PipeTransform { standalone: true }) export class IgxComboGroupingPipe implements PipeTransform { + public combo = inject(IGX_COMBO_COMPONENT); - constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { } public transform(collection: any[], groupKey: any, valueKey: any, sortingDirection: SortingDirection, compareCollator: Intl.Collator) { // TODO: should filteredData be changed here? diff --git a/projects/igniteui-angular/src/lib/core/navigation/directives.ts b/projects/igniteui-angular/src/lib/core/navigation/directives.ts index eac108b1a0b..c900ad410f6 100644 --- a/projects/igniteui-angular/src/lib/core/navigation/directives.ts +++ b/projects/igniteui-angular/src/lib/core/navigation/directives.ts @@ -1,4 +1,4 @@ -import { Directive, HostListener, Input } from '@angular/core'; +import { Directive, HostListener, Input, inject } from '@angular/core'; import { IgxNavigationService } from './nav.service'; /** @@ -19,7 +19,9 @@ export class IgxNavigationToggleDirective { public state: IgxNavigationService; - constructor(nav: IgxNavigationService) { + constructor() { + const nav = inject(IgxNavigationService); + this.state = nav; } @@ -47,7 +49,9 @@ export class IgxNavigationCloseDirective { public state: IgxNavigationService; - constructor(nav: IgxNavigationService) { + constructor() { + const nav = inject(IgxNavigationService); + this.state = nav; } diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index 7a5df7824f4..36341f15bc7 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable, NgZone, DOCUMENT } from '@angular/core'; +import { Injectable, NgZone, DOCUMENT, inject } from '@angular/core'; import { ɵgetDOM as getDOM } from '@angular/platform-browser'; import { PlatformUtil } from './utils'; import { HammerManager, HammerOptions, HammerStatic } from './touch-annotations'; @@ -13,6 +13,10 @@ const EVENT_SUFFIX = 'precise'; */ @Injectable() export class HammerGesturesManager { + private _zone = inject(NgZone); + private doc = inject(DOCUMENT); + private platformUtil = inject(PlatformUtil); + public static Hammer: HammerStatic = typeof window !== 'undefined' ? (window as any).Hammer : null; /** * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing. @@ -22,7 +26,7 @@ export class HammerGesturesManager { private platformBrowser: boolean; private _hammerManagers: Array<{ element: EventTarget; manager: HammerManager }> = []; - constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { + constructor() { this.platformBrowser = this.platformUtil.isBrowser; if (this.platformBrowser && HammerGesturesManager.Hammer) { this.hammerOptions = { diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index a787a9cdcd5..d55e5bb0363 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,5 +1,5 @@ import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common'; -import { Inject, Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core'; +import { Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core'; import { mergeWith } from 'lodash-es'; import { NEVER, Observable } from 'rxjs'; import { setImmediate } from './setImmediate'; @@ -233,6 +233,8 @@ export const isEqual = (obj1, obj2): boolean => { */ @Injectable({ providedIn: 'root' }) export class PlatformUtil { + private platformId = inject(PLATFORM_ID); + public isBrowser: boolean = isPlatformBrowser(this.platformId); public isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); public isSafari = this.isBrowser && /Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent); @@ -269,8 +271,6 @@ export class PlatformUtil { Z: 'z' } as const; - constructor(@Inject(PLATFORM_ID) private platformId: any) { } - /** * @hidden @internal * Returns the actual size of the node content, using Range diff --git a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts index e32b343d088..0f1705b65e2 100644 --- a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts +++ b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts @@ -1,7 +1,8 @@ import { AfterContentChecked, AfterViewInit, booleanAttribute, ContentChildren, Directive, ElementRef, EventEmitter, - Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList, ViewChild + inject, + Input, LOCALE_ID, OnDestroy, Output, QueryList, ViewChild } from '@angular/core'; import { getLocaleFirstDayOfWeek } from "@angular/common"; @@ -24,6 +25,10 @@ import { IgxInputGroupComponent } from '../input-group/input-group.component'; @Directive() export abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy { + public element = inject(ElementRef); + protected _localeId = inject(LOCALE_ID); + protected _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true }); + /** * The editor's input mask. * @@ -291,9 +296,7 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider // w/ TS2416 Type 'string | Date ...' not assignable to type 'DateRange' due to observer method check public abstract valueChange: EventEmitter; - constructor(public element: ElementRef, - @Inject(LOCALE_ID) protected _localeId: string, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) { + constructor() { this.locale = this.locale || this._localeId; } diff --git a/projects/igniteui-angular/src/lib/date-common/picker-icons.common.ts b/projects/igniteui-angular/src/lib/date-common/picker-icons.common.ts index dea7d37bc9a..c3b3b0f6e80 100644 --- a/projects/igniteui-angular/src/lib/date-common/picker-icons.common.ts +++ b/projects/igniteui-angular/src/lib/date-common/picker-icons.common.ts @@ -1,4 +1,4 @@ -import { Component, Output, EventEmitter, HostListener, Directive, TemplateRef } from '@angular/core'; +import { Component, Output, EventEmitter, HostListener, Directive, TemplateRef, inject } from '@angular/core'; /** * Templates the default toggle icon in the picker. @@ -63,6 +63,6 @@ export class IgxPickerClearComponent extends IgxPickerToggleComponent { } standalone: true }) export class IgxPickerActionsDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index a3a6935af7d..0cd8f6d8a18 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -1,30 +1,4 @@ -import { - AfterViewChecked, - AfterViewInit, - AfterContentChecked, - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Inject, - Injector, - Input, - LOCALE_ID, - OnDestroy, - OnInit, - Optional, - Output, - PipeTransform, - QueryList, - Renderer2, - ViewChild, - ViewContainerRef, - booleanAttribute -} from '@angular/core'; +import { AfterViewChecked, AfterViewInit, AfterContentChecked, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injector, Input, OnDestroy, OnInit, Output, PipeTransform, QueryList, Renderer2, ViewChild, ViewContainerRef, booleanAttribute, inject } from '@angular/core'; import { AbstractControl, ControlValueAccessor, @@ -40,7 +14,7 @@ import { } from '../calendar/public_api'; import { isDateInRanges } from '../calendar/common/helpers'; import { - IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxInputGroupType, IgxInputState, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective + IgxLabelDirective, IgxInputState, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective } from '../input-group/public_api'; import { fromEvent, Subscription, noop, MonoTypeOperatorFunction } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -103,6 +77,12 @@ let NEXT_ID = 0; }) export class IgxDatePickerComponent extends PickerBaseDirective implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy, AfterViewChecked, AfterContentChecked { + private _overlayService = inject(IgxOverlayService); + private _injector = inject(Injector); + private _renderer = inject(Renderer2); + private platform = inject(PlatformUtil); + private cdr = inject(ChangeDetectorRef); + /** * Gets/Sets whether the inactive dates will be hidden. @@ -507,15 +487,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr private _onTouchedCallback: () => void = noop; private _onValidatorChange: () => void = noop; - constructor(element: ElementRef, - @Inject(LOCALE_ID) _localeId: string, - @Inject(IgxOverlayService) private _overlayService: IgxOverlayService, - private _injector: Injector, - private _renderer: Renderer2, - private platform: PlatformUtil, - private cdr: ChangeDetectorRef, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { - super(element, _localeId, _inputGroupType); + constructor() { + super(); this.locale = this.locale || this._localeId; } diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 01d03dc791d..79ea947956f 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing'; -import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy, inject } from '@angular/core'; import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api'; import { PickerInteractionMode } from '../date-common/types'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -1789,6 +1789,8 @@ export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledCompon ] }) export class DateRangeReactiveFormComponent { + private fb = inject(UntypedFormBuilder); + @ViewChild('range', {read: IgxDateRangePickerComponent}) public dateRange: IgxDateRangePickerComponent; @ViewChild('twoInputs', {read: IgxDateRangePickerComponent}) public dateRangeWithTwoInputs: IgxDateRangePickerComponent; @@ -1797,8 +1799,6 @@ export class DateRangeReactiveFormComponent { twoInputs: ['', Validators.required] }); - constructor(private fb: UntypedFormBuilder) { } - public markAsTouched() { if (!this.form.valid) { for (const key in this.form.controls) { diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index e6b5edca0ba..bea7bd3823e 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -1,9 +1,4 @@ -import { - AfterViewInit, booleanAttribute, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, - EventEmitter, HostBinding, HostListener, Inject, Injector, Input, LOCALE_ID, - OnChanges, OnDestroy, OnInit, Optional, Output, QueryList, - SimpleChanges, TemplateRef, ViewChild, ViewContainerRef -} from '@angular/core'; +import { AfterViewInit, booleanAttribute, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injector, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { NgTemplateOutlet, getLocaleFirstDayOfWeek } from '@angular/common'; import { AbstractControl, ControlValueAccessor, NgControl, @@ -23,9 +18,8 @@ import { IgxPickerActionsDirective } from '../date-common/picker-icons.common'; import { DateTimeUtil } from '../date-common/util/date-time.util'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { - IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, - IgxLabelDirective, IGX_INPUT_GROUP_TYPE -} from '../input-group/public_api'; + IgxInputDirective, IgxInputGroupComponent, IgxInputState, + IgxLabelDirective} from '../input-group/public_api'; import { AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs, OverlaySettings, PositionSettings @@ -78,6 +72,11 @@ const SingleInputDatesConcatenationString = ' - '; }) export class IgxDateRangePickerComponent extends PickerBaseDirective implements OnChanges, OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator { + protected platform = inject(PlatformUtil); + private _injector = inject(Injector); + private _cdr = inject(ChangeDetectorRef); + private _overlayService = inject(IgxOverlayService); + /** * The number of displayed month views. @@ -467,14 +466,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective private onTouchCallback: () => void = noop; private onValidatorChange: () => void = noop; - constructor(element: ElementRef, - @Inject(LOCALE_ID) _localeId: string, - protected platform: PlatformUtil, - private _injector: Injector, - private _cdr: ChangeDetectorRef, - @Inject(IgxOverlayService) private _overlayService: IgxOverlayService, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { - super(element, _localeId, _inputGroupType); + constructor() { + super(); this.locale = this.locale || this._localeId; } diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 09c76ecfdd5..42aa92f4559 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -1,17 +1,4 @@ -import { - Component, - ElementRef, - EventEmitter, - HostBinding, - Input, - OnDestroy, - OnInit, - Optional, - Output, - ViewChild, - AfterContentInit, - booleanAttribute -} from '@angular/core'; +import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, AfterContentInit, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; @@ -58,6 +45,9 @@ let DIALOG_ID = 0; imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective] }) export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit { + private elementRef = inject(ElementRef); + private navService = inject(IgxNavigationService, { optional: true }); + private static NEXT_ID = 1; private static readonly DIALOG_CLASS = 'igx-dialog'; @@ -443,10 +433,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After private _isModal = true; private _titleId: string; - constructor( - private elementRef: ElementRef, - @Optional() private navService: IgxNavigationService - ) { + constructor() { this._titleId = IgxDialogComponent.NEXT_ID++ + '_title'; this._overlayDefaultSettings = { diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 882f7c6ac61..ab6bec4864f 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, Pipe, PipeTransform, ElementRef } from '@angular/core'; +import { Component, ViewChild, Pipe, PipeTransform, ElementRef, inject } from '@angular/core'; import { TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -1062,7 +1062,9 @@ class AutocompleteFormComponent { public reactiveForm: UntypedFormGroup; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.towns = [ 'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen', 'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad', 'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa', 'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom', 'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat', 'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa', 'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik', 'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya', 'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim', 'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop', 'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli', 'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo', 'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik', 'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya', 'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo', 'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo', 'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla', 'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya', 'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa', 'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka', 'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat', 'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo', 'Batanovtsi', 'Chernomorets', 'Aheloy', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo', 'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka', 'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik' diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts index fbc0dd8d6fe..42d74520ac3 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts @@ -1,20 +1,4 @@ -import { - ChangeDetectorRef, - Directive, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - Optional, - Output, - Self, - AfterViewInit, - OnInit, - booleanAttribute -} from '@angular/core'; +import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, Output, AfterViewInit, OnInit, booleanAttribute, inject } from '@angular/core'; import { NgModel, FormControlName } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -78,6 +62,12 @@ export interface AutocompleteOverlaySettings { standalone: true }) export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit { + protected ngModel = inject(NgModel, { self: true, optional: true }); + protected formControl = inject(FormControlName, { self: true, optional: true }); + protected group = inject(IgxInputGroupComponent, { optional: true }); + protected elementRef = inject(ElementRef); + protected cdr = inject(ChangeDetectorRef); + /** * Sets the target of the autocomplete directive * @@ -219,14 +209,6 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective private destroy$ = new Subject(); private defaultSettings: OverlaySettings; - constructor(@Self() @Optional() @Inject(NgModel) protected ngModel: NgModel, - @Self() @Optional() @Inject(FormControlName) protected formControl: FormControlName, - @Optional() protected group: IgxInputGroupComponent, - protected elementRef: ElementRef, - protected cdr: ChangeDetectorRef) { - super(null); - } - /** @hidden @internal */ @HostListener('input') public onInput() { diff --git a/projects/igniteui-angular/src/lib/directives/button/button-base.ts b/projects/igniteui-angular/src/lib/directives/button/button-base.ts index 3cad5e9d78d..3cf800748b0 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button-base.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button-base.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute, inject } from '@angular/core'; export const IgxBaseButtonType = { Flat: 'flat', @@ -8,6 +8,8 @@ export const IgxBaseButtonType = { @Directive() export abstract class IgxButtonBaseDirective { + public element = inject(ElementRef); + /** * Emitted when the button is clicked. */ @@ -79,8 +81,6 @@ export abstract class IgxButtonBaseDirective { return this.disabled || null; } - constructor(public element: ElementRef) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts index 41f4329a5d1..f36a5ae20e7 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts @@ -1,14 +1,4 @@ -import { - Directive, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Input, - Output, - Renderer2, - booleanAttribute, -} from '@angular/core'; +import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, Renderer2, booleanAttribute, inject } from '@angular/core'; import { IBaseEventArgs } from '../../core/utils'; import { IgxBaseButtonType, IgxButtonBaseDirective } from './button-base'; @@ -46,6 +36,8 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType]; standalone: true }) export class IgxButtonDirective extends IgxButtonBaseDirective { + private _renderer = inject(Renderer2); + private static ngAcceptInputType_type: IgxButtonType | ''; /** @@ -119,13 +111,6 @@ export class IgxButtonDirective extends IgxButtonBaseDirective { return this._selected; } - constructor( - public override element: ElementRef, - private _renderer: Renderer2, - ) { - super(element); - } - /** * Sets the type of the button. * diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts index 86a1802bf19..6c36128f68e 100644 --- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts @@ -1,7 +1,7 @@ import { IgxDateTimeEditorDirective } from './date-time-editor.directive'; import { DatePart } from './date-time-editor.common'; import { formatDate, registerLocaleData } from '@angular/common'; -import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges, DOCUMENT } from '@angular/core'; +import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges, DOCUMENT, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -1430,7 +1430,9 @@ class IgxDateTimeEditorFormComponent { public minDate: Date; public maxDate: Date; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.reactiveForm = fb.group({ dateEditor: ['', Validators.required] }); diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts index 0a82d0d1dd1..f37395cb88a 100644 --- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts @@ -1,15 +1,10 @@ -import { - Directive, Input, ElementRef, DOCUMENT, - Renderer2, Output, EventEmitter, Inject, - LOCALE_ID, OnChanges, SimpleChanges, HostListener, OnInit, booleanAttribute -} from '@angular/core'; +import { Directive, Input, DOCUMENT, Output, EventEmitter, LOCALE_ID, OnChanges, SimpleChanges, HostListener, OnInit, booleanAttribute, inject } from '@angular/core'; import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NG_VALIDATORS, NG_VALUE_ACCESSOR, } from '@angular/forms'; import { IgxMaskDirective } from '../mask/mask.directive'; -import { MaskParsingService } from '../mask/mask-parsing.service'; -import { isDate, PlatformUtil } from '../../core/utils'; +import { isDate } from '../../core/utils'; import { IgxDateTimeEditorEventArgs, DatePartInfo, DatePart } from './date-time-editor.common'; import { noop } from 'rxjs'; import { DatePartDeltas } from './date-time-editor.common'; @@ -53,6 +48,9 @@ import { DateTimeUtil } from '../../date-common/util/date-time.util'; standalone: true }) export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, OnInit, Validator, ControlValueAccessor { + private _document = inject(DOCUMENT); + private _locale = inject(LOCALE_ID); + /** * Locale settings used for value formatting. * @@ -294,14 +292,8 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh return this._dateValue; } - constructor( - renderer: Renderer2, - elementRef: ElementRef, - maskParser: MaskParsingService, - platform: PlatformUtil, - @Inject(DOCUMENT) private _document: any, - @Inject(LOCALE_ID) private _locale: any) { - super(elementRef, maskParser, renderer, platform); + constructor() { + super(); this.document = this._document as Document; this.locale = this.locale || this._locale; } diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index dec32a095a9..9f0d6277d80 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts @@ -159,6 +159,7 @@ export class IgxDragLocation { standalone: true }) export class IgxDragHandleDirective { + public element = inject(ElementRef); @HostBinding('class.igx-drag__handle') public baseClass = true; @@ -167,8 +168,6 @@ export class IgxDragHandleDirective { * @hidden */ public parentDragElement: HTMLElement = null; - - constructor(public element: ElementRef) { } } @Directive({ @@ -176,11 +175,10 @@ export class IgxDragHandleDirective { standalone: true }) export class IgxDragIgnoreDirective { + public element = inject(ElementRef); @HostBinding('class.igx-drag__ignore') public baseClass = true; - - constructor(public element: ElementRef) { } } @Directive({ @@ -687,14 +685,14 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { return this._offsetY !== undefined ? this._offsetY : this._defaultOffsetY; } - constructor( - public cdr: ChangeDetectorRef, - public element: ElementRef, - public viewContainer: ViewContainerRef, - public zone: NgZone, - public renderer: Renderer2, - protected platformUtil: PlatformUtil - ) { + public cdr = inject(ChangeDetectorRef); + public element = inject(ElementRef); + public viewContainer = inject(ViewContainerRef); + public zone = inject(NgZone); + public renderer = inject(Renderer2); + protected platformUtil = inject(PlatformUtil); + + constructor() { this.onTransitionEnd = this.onTransitionEnd.bind(this); this.onPointerMove = this.onPointerMove.bind(this); this.onPointerUp = this.onPointerUp.bind(this); @@ -1772,7 +1770,11 @@ export class IgxDropDirective implements OnInit, OnDestroy { private _data: any; - constructor(public element: ElementRef, private _renderer: Renderer2, private _zone: NgZone) { + public element = inject(ElementRef); + protected _renderer = inject(Renderer2); + private _zone = inject(NgZone); + + constructor() { this._dropStrategy = new IgxDefaultDropStrategy(); } diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts index 2fc26885b7c..c17dd15e915 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, Renderer2 } from '@angular/core'; +import { Component, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, Renderer2, inject } from '@angular/core'; import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { UIInteractions, wait} from '../../test-utils/ui-interactions.spec'; @@ -2023,6 +2023,8 @@ const generalStyles = [` imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective] }) class TestDragDropComponent { + public renderer = inject(Renderer2); + @ViewChildren(IgxDragDirective) public dragElems: QueryList; @@ -2037,8 +2039,6 @@ class TestDragDropComponent { @ViewChild('ghostTemplateContents', { read: TemplateRef, static: true }) public ghostTemplateContents: TemplateRef; - - constructor(public renderer: Renderer2) { } } @Component({ diff --git a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts index 254a75f3dcf..4c6f7addce3 100644 --- a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, booleanAttribute } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, booleanAttribute, inject } from '@angular/core'; import { fromEvent, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { PlatformUtil } from '../../core/utils'; @@ -8,6 +8,9 @@ import { PlatformUtil } from '../../core/utils'; standalone: true }) export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy { + private elementRef = inject(ElementRef); + protected platformUtil = inject(PlatformUtil); + /** @hidden */ public get element(): HTMLElement | null { return this.elementRef.nativeElement; @@ -16,12 +19,6 @@ export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy { private destroy$ = new Subject(); private _focusTrap = true; - /** @hidden */ - constructor( - private elementRef: ElementRef, - protected platformUtil: PlatformUtil) { - } - /** * Sets whether the Tab key focus is trapped within the element. * diff --git a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.ts b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.ts index e19485069fe..8ce6ae6792d 100644 --- a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Input, Optional, Inject, Self, booleanAttribute } from '@angular/core'; +import { Directive, ElementRef, Input, booleanAttribute, inject } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { EditorProvider, EDITOR_PROVIDER } from '../../core/edit-provider'; @@ -8,6 +8,10 @@ import { EditorProvider, EDITOR_PROVIDER } from '../../core/edit-provider'; standalone: true }) export class IgxFocusDirective { + private element = inject(ElementRef); + private comp = inject(NG_VALUE_ACCESSOR, { self: true, optional: true }); + private control = inject(EDITOR_PROVIDER, { self: true, optional: true }); + private focusState = true; @@ -63,12 +67,6 @@ export class IgxFocusDirective { return this.element.nativeElement; } - constructor( - private element: ElementRef, - @Inject(NG_VALUE_ACCESSOR) @Self() @Optional() private comp?: any[], - @Inject(EDITOR_PROVIDER) @Self() @Optional() private control?: any[], - ) { } - /** * Triggers the igxFocus state. * ```typescript diff --git a/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts index e188bc53944..51824b8a995 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts @@ -1,14 +1,4 @@ -import { - HostListener, - ElementRef, - ChangeDetectorRef, - OnDestroy, - Directive, - AfterViewInit, - Inject, - NgZone, - DOCUMENT -} from '@angular/core'; +import { HostListener, ElementRef, ChangeDetectorRef, OnDestroy, Directive, AfterViewInit, NgZone, DOCUMENT, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, throttleTime } from 'rxjs/operators'; import { resizeObservable, PlatformUtil } from '../../core/utils'; @@ -18,6 +8,12 @@ import { resizeObservable, PlatformUtil } from '../../core/utils'; standalone: true }) export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { + public elementRef = inject>(ElementRef); + public cdr = inject(ChangeDetectorRef); + protected _zone = inject(NgZone); + public document = inject(DOCUMENT); + protected platformUtil = inject(PlatformUtil); + public scrollAmount = 0; public _size = 0; public destroyed; @@ -28,13 +24,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { private _scrollNativeSize: number; private _detached = false; - constructor( - public elementRef: ElementRef, - public cdr: ChangeDetectorRef, - protected _zone: NgZone, - @Inject(DOCUMENT) public document: any, - protected platformUtil: PlatformUtil, - ) { + constructor() { this._scrollNativeSize = this.calculateScrollNativeSize(); } diff --git a/projects/igniteui-angular/src/lib/directives/for-of/display.container.ts b/projects/igniteui-angular/src/lib/directives/for-of/display.container.ts index 79ccacbfa99..764807e6f32 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/display.container.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/display.container.ts @@ -1,10 +1,4 @@ -import { - ChangeDetectorRef, - Component, - HostBinding, - ViewChild, - ViewContainerRef -} from '@angular/core'; +import { ChangeDetectorRef, Component, HostBinding, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { IgxScrollInertiaDirective } from '../scroll-inertia/scroll_inertia.directive'; @Component({ @@ -20,6 +14,9 @@ import { IgxScrollInertiaDirective } from '../scroll-inertia/scroll_inertia.dire imports: [IgxScrollInertiaDirective] }) export class DisplayContainerComponent { + public cdr = inject(ChangeDetectorRef); + public _viewContainer = inject(ViewContainerRef); + @ViewChild('display_container', { read: ViewContainerRef, static: true }) public _vcr; @@ -35,6 +32,4 @@ export class DisplayContainerComponent { public scrollDirection: string; public scrollContainer; - - constructor(public cdr: ChangeDetectorRef, public _viewContainer: ViewContainerRef) { } } diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts index d4e2e4f1d3a..7e8c4317971 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts @@ -1,22 +1,5 @@ import { AsyncPipe, NgClass, NgForOfContext } from '@angular/common'; -import { - AfterViewInit, - ChangeDetectorRef, - Component, - Directive, - Injectable, - IterableDiffers, - NgZone, - OnInit, - QueryList, - TemplateRef, - ViewChild, - ViewChildren, - ViewContainerRef, - DebugElement, - Pipe, - PipeTransform -} from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, Directive, Injectable, IterableDiffers, NgZone, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, DebugElement, Pipe, PipeTransform, inject } from '@angular/core'; import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { BehaviorSubject, Observable } from 'rxjs'; @@ -1356,17 +1339,32 @@ class DataGenerator { standalone: true }) export class TestIgxForOfDirective extends IgxForOfDirective { + public viewContainer: ViewContainerRef; + public template: TemplateRef>; + public differs: IterableDiffers; + public changeDet: ChangeDetectorRef; + public zone: NgZone; + protected syncService: IgxForOfScrollSyncService; + public scrStepArray = []; public scrTopArray = []; - constructor( - public viewContainer: ViewContainerRef, - public template: TemplateRef>, - public differs: IterableDiffers, - public changeDet: ChangeDetectorRef, - public zone: NgZone, - protected syncService: IgxForOfScrollSyncService, - platformUtil: PlatformUtil) { + constructor() { + const viewContainer = inject(ViewContainerRef); + const template = inject>>(TemplateRef); + const differs = inject(IterableDiffers); + const changeDet = inject(ChangeDetectorRef); + const zone = inject(NgZone); + const syncService = inject(IgxForOfScrollSyncService); + const platformUtil = inject(PlatformUtil); + super(viewContainer, template, differs, changeDet, zone, syncService, platformUtil, document); + + this.viewContainer = viewContainer; + this.template = template; + this.differs = differs; + this.changeDet = changeDet; + this.zone = zone; + this.syncService = syncService; } public override onScroll(evt) { const ind = this.scrTopArray.length - 1; @@ -1745,6 +1743,8 @@ export class LocalService { imports: [TestIgxForOfDirective, AsyncPipe] }) export class RemoteVirtualizationComponent implements OnInit, AfterViewInit { + private localService = inject(LocalService); + @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true }) public parentVirtDir: TestIgxForOfDirective; @@ -1753,8 +1753,6 @@ export class RemoteVirtualizationComponent implements OnInit, AfterViewInit { public height = '500px'; public data; - - constructor(private localService: LocalService) { } public ngOnInit(): void { this.data = this.localService.records; } @@ -1790,6 +1788,8 @@ export class RemoteVirtualizationComponent implements OnInit, AfterViewInit { imports: [TestIgxForOfDirective, AsyncPipe] }) export class RemoteVirtCountComponent implements OnInit, AfterViewInit { + private localService = inject(LocalService); + @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true }) public parentVirtDir: TestIgxForOfDirective; @@ -1799,8 +1799,6 @@ export class RemoteVirtCountComponent implements OnInit, AfterViewInit { public height = '500px'; public data; public count: Observable; - - constructor(private localService: LocalService) { } public ngOnInit(): void { this.data = this.localService.records; this.count = this.localService.count; diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index de6c031eede..218e0b6e117 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -1,29 +1,5 @@ import { NgForOfContext } from '@angular/common'; -import { - ChangeDetectorRef, - ComponentRef, - Directive, - DoCheck, - EmbeddedViewRef, - EventEmitter, - Input, - IterableChanges, - IterableDiffer, - IterableDiffers, - NgZone, - OnChanges, - OnDestroy, - OnInit, - Output, - SimpleChanges, - TemplateRef, - TrackByFunction, - ViewContainerRef, - AfterViewInit, - Inject, - booleanAttribute, - DOCUMENT -} from '@angular/core'; +import { ChangeDetectorRef, ComponentRef, Directive, DoCheck, EmbeddedViewRef, EventEmitter, Input, IterableChanges, IterableDiffer, IterableDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, AfterViewInit, booleanAttribute, DOCUMENT, inject } from '@angular/core'; import { DisplayContainerComponent } from './display.container'; import { HVirtualHelperComponent } from './horizontal.virtual.helper.component'; @@ -109,6 +85,15 @@ export abstract class IgxForOfToken { standalone: true }) export class IgxForOfDirective extends IgxForOfToken implements OnInit, OnChanges, DoCheck, OnDestroy, AfterViewInit { + private _viewContainer = inject(ViewContainerRef); + protected _template = inject>>(TemplateRef); + protected _differs = inject(IterableDiffers); + public cdr = inject(ChangeDetectorRef); + protected _zone = inject(NgZone); + protected syncScrollService = inject(IgxForOfScrollSyncService); + protected platformUtil = inject(PlatformUtil); + protected document = inject(DOCUMENT); + /** * Sets the data to be rendered. @@ -404,20 +389,6 @@ export class IgxForOfDirective extends IgxForOfToken this.igxForOf.length; } - constructor( - private _viewContainer: ViewContainerRef, - protected _template: TemplateRef>, - protected _differs: IterableDiffers, - public cdr: ChangeDetectorRef, - protected _zone: NgZone, - protected syncScrollService: IgxForOfScrollSyncService, - protected platformUtil: PlatformUtil, - @Inject(DOCUMENT) - protected document: any, - ) { - super(); - } - public verticalScrollHandler(event) { this.onScroll(event); } @@ -1539,6 +1510,8 @@ export class IgxGridForOfContext extends IgxForOfContext standalone: true }) export class IgxGridForOfDirective extends IgxForOfDirective implements OnInit, OnChanges, DoCheck { + protected syncService = inject(IgxForOfSyncService); + @Input() public set igxGridForOf(value: U & T[] | null) { this.igxForOf = value; @@ -1593,19 +1566,6 @@ export class IgxGridForOfDirective extends IgxForOfDirec @Output() public dataChanging = new EventEmitter(); - constructor( - _viewContainer: ViewContainerRef, - _template: TemplateRef>, - _differs: IterableDiffers, - cdr: ChangeDetectorRef, - _zone: NgZone, - _platformUtil: PlatformUtil, - @Inject(DOCUMENT) _document: any, - syncScrollService: IgxForOfScrollSyncService, - protected syncService: IgxForOfSyncService) { - super(_viewContainer, _template, _differs, cdr, _zone, syncScrollService, _platformUtil, _document); - } - /** * @hidden @internal * Asserts the correct type of the context for the template that `IgxGridForOfDirective` will render. diff --git a/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts index b456bf656f5..71981c495ef 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts @@ -1,6 +1,5 @@ -import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone, DOCUMENT } from '@angular/core'; +import { Component, HostBinding, Input, ViewChild, ViewContainerRef } from '@angular/core'; import { VirtualHelperBaseDirective } from './base.helper.component'; -import { PlatformUtil } from '../../core/utils'; /** * @hidden @@ -18,10 +17,6 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective { @HostBinding('class') public cssClasses = 'igx-vhelper--horizontal'; - constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) { - super(elementRef, cdr, zone, document, platformUtil); - } - protected override restoreScroll() { this.nativeElement.scrollLeft = this.scrollAmount; } diff --git a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts index e75b602c201..cc437108c36 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts @@ -1,7 +1,5 @@ -import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, - ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone, DOCUMENT } from '@angular/core'; +import { Component, HostBinding, Input, ViewChild, ViewContainerRef, OnDestroy, OnInit } from '@angular/core'; import { VirtualHelperBaseDirective } from './base.helper.component'; -import { PlatformUtil } from '../../core/utils'; @Component({ selector: 'igx-virtual-helper', @@ -20,10 +18,6 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement @HostBinding('class') public cssClasses = 'igx-vhelper--vertical'; - constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) { - super(elementRef, cdr, zone, document, platformUtil); - } - public ngOnInit() { this.scrollWidth = this.scrollNativeSize; this.document.documentElement.style.setProperty( diff --git a/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.ts b/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.ts index d683aca9b58..91d7b6f1478 100644 --- a/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.ts @@ -1,10 +1,4 @@ -import { - Directive, - forwardRef, - ElementRef, - HostListener, - Renderer2 -} from '@angular/core'; +import { Directive, forwardRef, ElementRef, HostListener, Renderer2, inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Directive({ @@ -19,15 +13,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; standalone: true }) export class IgcFormControlDirective implements ControlValueAccessor { + private elementRef = inject(ElementRef); + private renderer = inject(Renderer2); + /** @hidden @internal */ private onChange: any = () => { }; /** @hidden @internal */ private onTouched: any = () => { }; - constructor( - private elementRef: ElementRef, - private renderer: Renderer2) { } - /** @hidden @internal */ @HostListener('blur') public onBlur() { diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts index 5142e7030fd..98d9833f8d4 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, DebugElement } from '@angular/core'; +import { Component, ViewChild, ViewChildren, QueryList, DebugElement, inject } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, UntypedFormBuilder, ReactiveFormsModule, Validators, UntypedFormControl, UntypedFormGroup, FormControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -1150,6 +1150,8 @@ class DataBoundDisabledInputWithoutValueComponent extends DataBoundDisabledInput imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective, ReactiveFormsModule] }) class ReactiveFormComponent { + private fb = inject(UntypedFormBuilder); + @ViewChild('strinput', { static: true, read: IgxInputDirective }) public strIgxInput: IgxInputDirective; public form = this.fb.group({ @@ -1162,8 +1164,6 @@ class ReactiveFormComponent { public inputControl = new FormControl('', [Validators.required]); public textareaControl = new FormControl('', [Validators.required]); - constructor(private fb: UntypedFormBuilder) { } - public markAsTouched() { if (!this.form.valid) { for (const key in this.form.controls) { @@ -1230,7 +1230,9 @@ class InputReactiveFormComponent { fullName: [Validators.required] }; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.reactiveForm = fb.group({ fullName: new UntypedFormControl('', Validators.required) }); @@ -1295,7 +1297,9 @@ class FileInputFormComponent { inputValue: null }; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.formWithFileInput = fb.group({ fileInput: new UntypedFormControl('') }); diff --git a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts index daf01c89904..040d358ed69 100644 --- a/projects/igniteui-angular/src/lib/directives/input/input.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/input/input.directive.ts @@ -1,18 +1,4 @@ -import { - AfterViewInit, - ChangeDetectorRef, - Directive, - ElementRef, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - Optional, - Renderer2, - Self, - booleanAttribute, -} from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, OnDestroy, Renderer2, booleanAttribute, inject } from '@angular/core'; import { AbstractControl, NgControl, @@ -64,6 +50,13 @@ export enum IgxInputState { standalone: true }) export class IgxInputDirective implements AfterViewInit, OnDestroy { + public inputGroup = inject(IgxInputGroupBase); + protected ngModel = inject(NgModel, { optional: true, self: true }); + protected formControl = inject(NgControl, { optional: true, self: true }); + protected element = inject>(ElementRef); + protected cdr = inject(ChangeDetectorRef); + protected renderer = inject(Renderer2); + /** * Sets/gets whether the `"igx-input-group__input"` class is added to the host element. * Default value is `false`. @@ -103,18 +96,6 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy { private _fileNames: string; private _disabled = false; - constructor( - public inputGroup: IgxInputGroupBase, - @Optional() @Self() @Inject(NgModel) protected ngModel: NgModel, - @Optional() - @Self() - @Inject(NgControl) - protected formControl: NgControl, - protected element: ElementRef, - protected cdr: ChangeDetectorRef, - protected renderer: Renderer2 - ) { } - private get ngControl(): NgControl { return this.ngModel ? this.ngModel : this.formControl; } diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts index 62dd9b4f53b..74ce3d32466 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts @@ -1,8 +1,4 @@ -import { - Directive, ElementRef, EventEmitter, HostListener, - Output, PipeTransform, Renderer2, - Input, OnInit, AfterViewChecked, booleanAttribute, -} from '@angular/core'; +import { Directive, ElementRef, EventEmitter, HostListener, Output, PipeTransform, Renderer2, Input, OnInit, AfterViewChecked, booleanAttribute, inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { MaskParsingService, MaskOptions, parseMask } from './mask-parsing.service'; import { IBaseEventArgs, PlatformUtil } from '../../core/utils'; @@ -15,6 +11,11 @@ import { noop } from 'rxjs'; standalone: true }) export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueAccessor { + protected elementRef = inject>(ElementRef); + protected maskParser = inject(MaskParsingService); + protected renderer = inject(Renderer2); + protected platform = inject(PlatformUtil); + /** * Sets the input mask. * ```html @@ -146,12 +147,6 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA protected _onTouchedCallback: () => void = noop; protected _onChangeCallback: (_: any) => void = noop; - constructor( - protected elementRef: ElementRef, - protected maskParser: MaskParsingService, - protected renderer: Renderer2, - protected platform: PlatformUtil) { } - /** @hidden */ @HostListener('keydown', ['$event']) public onKeyDown(event: KeyboardEvent): void { diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts index 41c4836eccd..1abc3ebdf8f 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ViewChild, inject } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxRadioGroupDirective } from './radio-group.directive'; import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, FormGroup, FormControl } from '@angular/forms'; @@ -372,6 +372,8 @@ class RadioGroupWithModelComponent { imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupReactiveFormsComponent { + private _formBuilder = inject(UntypedFormBuilder); + public seasons = [ 'Winter', 'Spring', @@ -383,7 +385,7 @@ class RadioGroupReactiveFormsComponent { public model: Person = { name: 'Kirk', favoriteSeason: this.seasons[1] }; public personForm: UntypedFormGroup; - constructor(private _formBuilder: UntypedFormBuilder) { + constructor() { this._createForm(); } @@ -426,6 +428,8 @@ class RadioGroupReactiveFormsComponent { imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupDeepProjectionComponent { + private _builder = inject(UntypedFormBuilder); + @ViewChild(IgxRadioGroupDirective, { static: true }) public radioGroup: IgxRadioGroupDirective; @@ -433,7 +437,7 @@ class RadioGroupDeepProjectionComponent { public choices = [0, 1, 2]; public group1: UntypedFormGroup; - constructor(private _builder: UntypedFormBuilder) { + constructor() { this._createForm(); } diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts index cbcfce78128..d7a4fa19d43 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts @@ -1,21 +1,4 @@ -import { - ChangeDetectorRef, - Directive, - DoCheck, - EventEmitter, - HostBinding, - HostListener, - Input, - OnDestroy, - Optional, - Output, - QueryList, - Self, - booleanAttribute, - contentChildren, - effect, - signal -} from '@angular/core'; +import { ChangeDetectorRef, Directive, DoCheck, EventEmitter, HostBinding, HostListener, Input, OnDestroy, Output, QueryList, booleanAttribute, contentChildren, effect, signal, inject } from '@angular/core'; import { ControlValueAccessor, NgControl, Validators } from '@angular/forms'; import { fromEvent, noop, Subject, takeUntil } from 'rxjs'; import { IgxRadioComponent } from '../../radio/radio.component'; @@ -62,6 +45,10 @@ let nextId = 0; standalone: true }) export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck { + public ngControl = inject(NgControl, { optional: true, self: true }); + private _directionality = inject(IgxDirectionality); + private cdr = inject(ChangeDetectorRef); + private _radioButtons = contentChildren(IgxRadioComponent, { descendants: true }); private _radioButtonsList = new QueryList(); @@ -481,11 +468,7 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, this.destroy$.complete(); } - constructor( - @Optional() @Self() public ngControl: NgControl, - private _directionality: IgxDirectionality, - private cdr: ChangeDetectorRef, - ) { + constructor() { if (this.ngControl !== null) { this.ngControl.valueAccessor = this; } diff --git a/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts b/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts index 84ebeb95753..d7e0dc61fd8 100644 --- a/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, HostListener, Input, NgZone, Renderer2, booleanAttribute } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input, NgZone, Renderer2, booleanAttribute, inject } from '@angular/core'; import { AnimationBuilder, style, animate } from '@angular/animations'; @Directive({ @@ -6,6 +6,11 @@ import { AnimationBuilder, style, animate } from '@angular/animations'; standalone: true }) export class IgxRippleDirective { + protected builder = inject(AnimationBuilder); + protected elementRef = inject(ElementRef); + protected renderer = inject(Renderer2); + private zone = inject(NgZone); + /** * Sets/gets the ripple target. * ```html @@ -95,12 +100,6 @@ export class IgxRippleDirective { private rippleHostClass = 'igx-ripple'; private _centered = false; private animationQueue = []; - - constructor( - protected builder: AnimationBuilder, - protected elementRef: ElementRef, - protected renderer: Renderer2, - private zone: NgZone) { } /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts index 71f5face630..6237f0f421a 100644 --- a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts @@ -1,11 +1,4 @@ -import { - Component, - Directive, - NgZone, - OnInit, - ViewChild, - ElementRef, -} from '@angular/core'; +import { Component, Directive, NgZone, OnInit, ViewChild, ElementRef, inject } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxScrollInertiaDirective } from './scroll_inertia.directive'; @@ -317,7 +310,10 @@ describe('Scroll Inertia Directive - Scrolling', () => { }) export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { - constructor(element: ElementRef, _zone: NgZone) { + constructor() { + const element = inject(ElementRef); + const _zone = inject(NgZone); + super(element, _zone); } public override onWheel(evt) { diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts index 474be997a01..867f72f585a 100644 --- a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy } from '@angular/core'; +import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy, inject } from '@angular/core'; /** * @hidden @@ -8,6 +8,9 @@ import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy } from '@angula standalone: true }) export class IgxScrollInertiaDirective implements OnInit, OnDestroy { + private element = inject(ElementRef); + private _zone = inject(NgZone); + @Input() public IgxScrollInertiaDirection: string; @@ -60,8 +63,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { private baseDeltaMultiplier = 1 / 120; private firefoxDeltaMultiplier = 1 / 30; - constructor(private element: ElementRef, private _zone: NgZone) { } - public ngOnInit(): void { this._zone.runOutsideAngular(() => { this.parentElement = this.element.nativeElement.parentElement || this.element.nativeElement.parentNode; diff --git a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts index 742cc0b98e7..4960e8b4e38 100644 --- a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts @@ -1,7 +1,4 @@ -import { - Directive, EmbeddedViewRef, Input, OnChanges, ChangeDetectorRef, - SimpleChange, SimpleChanges, TemplateRef, ViewContainerRef, NgZone, Output, EventEmitter -} from '@angular/core'; +import { Directive, EmbeddedViewRef, Input, OnChanges, ChangeDetectorRef, SimpleChange, SimpleChanges, TemplateRef, ViewContainerRef, NgZone, Output, EventEmitter, inject } from '@angular/core'; import { IBaseEventArgs } from '../../core/utils'; @@ -13,6 +10,10 @@ import { IBaseEventArgs } from '../../core/utils'; standalone: true }) export class IgxTemplateOutletDirective implements OnChanges { + public _viewContainerRef = inject(ViewContainerRef); + private _zone = inject(NgZone); + public cdr = inject(ChangeDetectorRef); + @Input() public igxTemplateOutletContext !: any; @Input() public igxTemplateOutlet !: TemplateRef; @@ -38,9 +39,6 @@ export class IgxTemplateOutletDirective implements OnChanges { */ private _embeddedViewsMap: Map>> = new Map(); - constructor(public _viewContainerRef: ViewContainerRef, private _zone: NgZone, public cdr: ChangeDetectorRef) { - } - public ngOnChanges(changes: SimpleChanges) { const actionType: TemplateOutletAction = this._getActionType(changes); switch (actionType) { diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts index faa0a923117..98e10d64095 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { IgxTextHighlightDirective, IActiveHighlightInfo} from './text-highlight.directive'; @@ -319,6 +319,8 @@ describe('IgxHighlight', () => { imports: [IgxTextHighlightDirective] }) class HighlightLoremIpsumComponent { + private highlightService = inject(IgxTextHighlightService); + @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true }) public highlight: IgxTextHighlightDirective; @@ -328,8 +330,6 @@ class HighlightLoremIpsumComponent { public html = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate luctus dui ut maximus. Quisque sed suscipit lorem. Vestibulum sit.'; - constructor(private highlightService: IgxTextHighlightService) { } - public highlightText(text: string, caseSensitive?: boolean, exactMatch?: boolean) { return this.highlight.highlight(text, caseSensitive, exactMatch); } diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index 5a7a1794f7e..c8e31813175 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -1,14 +1,4 @@ -import { - AfterViewInit, - Directive, - ElementRef, - Input, - OnChanges, - OnDestroy, - Renderer2, - SimpleChanges, - AfterViewChecked, -} from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, AfterViewChecked, inject } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { compareMaps } from '../../core/utils'; @@ -49,6 +39,10 @@ export interface IActiveHighlightInfo { standalone: true }) export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges { + private element = inject(ElementRef); + private service = inject(IgxTextHighlightService); + private renderer = inject(Renderer2); + /** * Determines the `CSS` class of the highlight elements. * This allows the developer to provide custom `CSS` to customize the highlight. @@ -199,7 +193,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke private _defaultCssClass = 'igx-highlight'; private _defaultActiveCssClass = 'igx-highlight--active'; - constructor(private element: ElementRef, private service: IgxTextHighlightService, private renderer: Renderer2) { + constructor() { this.service.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => { if (this.groupName === groupName) { if (this._activeElementIndex !== -1) { diff --git a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts index 777675ef759..2446d1c1eb1 100644 --- a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, Directive, ElementRef, HostListener, ViewChild } from '@angular/core'; +import { Component, DebugElement, Directive, ElementRef, HostListener, ViewChild, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -145,7 +145,8 @@ describe('IgxSelection', () => { standalone: true }) class IgxTestFocusDirective { - constructor(private element: ElementRef) { } + private element = inject(ElementRef); + @HostListener('focus') public onFocus() { diff --git a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts index c1cd541ebb8..06828898bb4 100644 --- a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, HostListener, Input, booleanAttribute } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input, booleanAttribute, inject } from '@angular/core'; @Directive({ exportAs: 'igxTextSelection', @@ -6,6 +6,8 @@ import { Directive, ElementRef, HostListener, Input, booleanAttribute } from '@a standalone: true }) export class IgxTextSelectionDirective { + private element = inject(ElementRef); + /** * Determines whether the input element could be selected through the directive. * @@ -53,8 +55,6 @@ export class IgxTextSelectionDirective { return this.element.nativeElement; } - constructor(private element: ElementRef) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts index 8180148ca75..92c2043119e 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, DebugElement, ViewChild, ElementRef, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, DebugElement, ViewChild, ElementRef, OnInit, inject as inject_1 } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -721,12 +721,10 @@ export class IgxToggleServiceInjectComponent { imports: [IgxToggleDirective] }) export class IgxOverlayServiceComponent { + public overlay = inject_1(IgxOverlayService); + @ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective; @ViewChild(`other`, { static: true }) public other: ElementRef; - /** - * - */ - constructor(public overlay: IgxOverlayService) { } } @Component({ diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 72b44260461..a5ce6e02b25 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -1,17 +1,4 @@ -import { - ChangeDetectorRef, - Directive, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - OnInit, - Optional, - Output -} from '@angular/core'; +import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, inject } from '@angular/core'; import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy'; import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils'; import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy'; @@ -37,6 +24,12 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc standalone: true }) export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { + private elementRef = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); + protected overlayService = inject(IgxOverlayService); + private navigationService = inject(IgxNavigationService, { optional: true }); + private platform = inject(PlatformUtil, { optional: true }); + /** * Emits an event after the toggle container is opened. * @@ -194,18 +187,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { private _overlayClosedSub: Subscription; private _overlayContentAppendedSub: Subscription; - /** - * @hidden - */ - constructor( - private elementRef: ElementRef, - private cdr: ChangeDetectorRef, - @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, - @Optional() private navigationService: IgxNavigationService, - @Optional() private platform?: PlatformUtil - ) { - } - /** * Opens the toggle. * @@ -409,6 +390,9 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { standalone: true }) export class IgxToggleActionDirective implements OnInit { + protected element = inject(ElementRef); + protected navigationService = inject(IgxNavigationService, { optional: true }); + /** * Provide settings that control the toggle overlay positioning, interaction and scroll behavior. * ```typescript @@ -461,8 +445,6 @@ export class IgxToggleActionDirective implements OnInit { protected _overlayDefaults: OverlaySettings; protected _target: IToggleView | string; - constructor(private element: ElementRef, @Optional() private navigationService: IgxNavigationService) { } - /** * @hidden */ @@ -522,7 +504,7 @@ export class IgxToggleActionDirective implements OnInit { standalone: true }) export class IgxOverlayOutletDirective { - constructor(public element: ElementRef) { } + public element = inject>(ElementRef); /** @hidden */ public get nativeElement() { diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts index c82d10bc719..601078a18b9 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts @@ -1,8 +1,7 @@ import { useAnimation } from '@angular/animations'; -import { Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener, Input, EventEmitter, booleanAttribute } from '@angular/core'; +import { Directive, OnInit, OnDestroy, Output, ViewContainerRef, HostListener, Input, EventEmitter, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { IgxNavigationService } from '../../core/navigation'; import { IBaseEventArgs } from '../../core/utils'; import { AutoPositionStrategy, HorizontalAlignment, PositionSettings } from '../../services/public_api'; import { IgxToggleActionDirective } from '../toggle/toggle.directive'; @@ -41,6 +40,8 @@ export interface ITooltipHideEventArgs extends IBaseEventArgs { standalone: true }) export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, OnDestroy { + private _viewContainerRef = inject(ViewContainerRef); + /** * Gets/sets the amount of milliseconds that should pass before showing the tooltip. * @@ -109,7 +110,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen */ public override get target(): any { if (typeof this._target === 'string') { - return this._navigationService.get(this._target); + return this.navigationService.get(this._target); } return this._target; } @@ -135,7 +136,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen * ``` */ public get nativeElement() { - return this._element.nativeElement; + return this.element.nativeElement; } /** @@ -187,11 +188,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen private destroy$ = new Subject(); - constructor(private _element: ElementRef, - @Optional() private _navigationService: IgxNavigationService, private _viewContainerRef: ViewContainerRef) { - super(_element, _navigationService); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts index e03128ec49c..df26daf252a 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts @@ -1,9 +1,5 @@ -import { - Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject, OnDestroy, inject, DOCUMENT -} from '@angular/core'; -import { IgxOverlayService } from '../../services/overlay/overlay'; +import { Directive, Input, HostBinding, OnDestroy, inject, DOCUMENT } from '@angular/core'; import { OverlaySettings } from '../../services/public_api'; -import { IgxNavigationService } from '../../core/navigation'; import { IgxToggleDirective } from '../toggle/toggle.directive'; import { IgxTooltipTargetDirective } from './tooltip-target.directive'; import { Subject, takeUntil } from 'rxjs'; @@ -113,13 +109,8 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy private _document = inject(DOCUMENT); /** @hidden */ - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - @Optional() navigationService: IgxNavigationService) { - // D.P. constructor duplication due to es6 compilation, might be obsolete in the future - super(elementRef, cdr, overlayService, navigationService); + constructor() { + super(); this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this); this.overlayService.opening.pipe(takeUntil(this._destroy$)).subscribe(() => { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts index b18d65bf2d2..cd14a32fdb4 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts @@ -1,5 +1,5 @@ import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common'; -import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, Output, EventEmitter, booleanAttribute, DoCheck } from '@angular/core'; +import { Directive, Input, HostBinding, HostListener, ElementRef, Output, EventEmitter, booleanAttribute, DoCheck, inject } from '@angular/core'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxDropDownGroupComponent } from './drop-down-group.component'; @@ -17,6 +17,11 @@ let NEXT_ID = 0; standalone: true }) export class IgxDropDownItemBaseDirective implements DoCheck { + protected dropDown = inject(IGX_DROPDOWN_BASE); + protected elementRef = inject(ElementRef); + protected group = inject(IgxDropDownGroupComponent, { optional: true }); + protected selection? = inject(IgxSelectionAPIService, { optional: true }); + /** * Sets/gets the `id` of the item. * ```html @@ -257,13 +262,6 @@ export class IgxDropDownItemBaseDirective implements DoCheck { protected _disabled = false; protected _label = null; - constructor( - @Inject(IGX_DROPDOWN_BASE) protected dropDown: IDropDownBase, - protected elementRef: ElementRef, - @Optional() protected group: IgxDropDownGroupComponent, - @Optional() @Inject(IgxSelectionAPIService) protected selection?: IgxSelectionAPIService - ) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts index 133e239e3a7..d63f37e9257 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Optional, Self, Input, HostListener, Inject } from '@angular/core'; +import { Directive, Input, HostListener, inject } from '@angular/core'; import { IGX_DROPDOWN_BASE } from './drop-down.common'; import { IDropDownNavigationDirective } from './drop-down.common'; import { IgxDropDownBaseDirective } from './drop-down.base'; @@ -12,10 +12,10 @@ import { DropDownActionKey } from './drop-down.common'; standalone: true }) export class IgxDropDownItemNavigationDirective implements IDropDownNavigationDirective { + public dropdown = inject(IGX_DROPDOWN_BASE, { self: true, optional: true }); - protected _target: IgxDropDownBaseDirective = null; - constructor(@Self() @Optional() @Inject(IGX_DROPDOWN_BASE) public dropdown: IgxDropDownBaseDirective) { } + protected _target: IgxDropDownBaseDirective = null; /** * Gets the target of the navigation directive; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 4fe729f4dac..b339099a302 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -1,8 +1,8 @@ import { Input, HostBinding, ElementRef, QueryList, Output, EventEmitter, ChangeDetectorRef, Directive, OnInit, - Inject, - DOCUMENT + DOCUMENT, + inject } from '@angular/core'; import { Navigate, ISelectionEventArgs } from './drop-down.common'; @@ -21,6 +21,10 @@ let NEXT_ID = 0; */ @Directive() export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit { + protected elementRef = inject(ElementRef); + protected cdr = inject(ChangeDetectorRef); + public document = inject(DOCUMENT); + /** * Emitted when item selection is changing, before the selection completes * @@ -179,11 +183,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit */ public abstract readonly collapsed: boolean; - constructor( - protected elementRef: ElementRef, - protected cdr: ChangeDetectorRef, - @Inject(DOCUMENT) public document: any) {} - public ngOnInit(): void { this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement); } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index a40f395835d..ca55da2e67b 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -1,23 +1,4 @@ -import { - ChangeDetectorRef, - Component, - ContentChildren, - ElementRef, - forwardRef, - QueryList, - OnChanges, - Input, - OnDestroy, - ViewChild, - ContentChild, - AfterViewInit, - Output, - EventEmitter, - SimpleChanges, - booleanAttribute, - Inject, - DOCUMENT -} from '@angular/core'; +import { Component, ContentChildren, ElementRef, forwardRef, QueryList, OnChanges, Input, OnDestroy, ViewChild, ContentChild, AfterViewInit, Output, EventEmitter, SimpleChanges, booleanAttribute, inject } from '@angular/core'; import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; import { IgxDropDownItemComponent } from './drop-down-item.component'; import { IgxDropDownBaseDirective } from './drop-down.base'; @@ -57,6 +38,8 @@ import { ConnectedPositioningStrategy } from '../services/public_api'; imports: [IgxToggleDirective] }) export class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy { + protected selection = inject(IgxSelectionAPIService); + /** * @hidden * @internal @@ -227,14 +210,6 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID protected destroy$ = new Subject(); protected _scrollPosition: number; - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - @Inject(DOCUMENT) document: any, - protected selection: IgxSelectionAPIService) { - super(elementRef, cdr, document); - } - /** * Opens the dropdown * diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts index ddb01158e96..84902e18e43 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, ElementRef, Input, ChangeDetectorRef, Inject } from '@angular/core'; +import { Component, HostBinding, ElementRef, Input, ChangeDetectorRef, inject } from '@angular/core'; import { IgxExpansionPanelBase, IGX_EXPANSION_PANEL_COMPONENT } from './expansion-panel.common'; @Component({ @@ -7,6 +7,10 @@ import { IgxExpansionPanelBase, IGX_EXPANSION_PANEL_COMPONENT } from './expansio standalone: true }) export class IgxExpansionPanelBodyComponent { + public panel = inject(IGX_EXPANSION_PANEL_COMPONENT); + public element = inject(ElementRef); + public cdr = inject(ChangeDetectorRef); + /** * @hidden */ @@ -34,10 +38,6 @@ export class IgxExpansionPanelBodyComponent { private _labelledBy = ''; private _label = ''; - constructor( - @Inject(IGX_EXPANSION_PANEL_COMPONENT) public panel: IgxExpansionPanelBase, - public element: ElementRef, public cdr: ChangeDetectorRef) { - } /** * Gets the `aria-label` attribute of the panel body diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts index 644d4083d35..bbfa541f561 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts @@ -1,18 +1,4 @@ -import { - Component, - ChangeDetectorRef, - ElementRef, - HostBinding, - HostListener, - Input, - Host, - EventEmitter, - Output, - ContentChild, - Inject, - ViewChild, - booleanAttribute -} from '@angular/core'; +import { Component, ChangeDetectorRef, ElementRef, HostBinding, HostListener, Input, EventEmitter, Output, ContentChild, ViewChild, booleanAttribute, inject } from '@angular/core'; import { IgxExpansionPanelIconDirective } from './expansion-panel.directives'; import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCancelableEventArgs } from './expansion-panel.common'; import { IgxIconComponent } from '../icon/icon.component'; @@ -34,6 +20,10 @@ export type ExpansionPanelHeaderIconPosition = (typeof ExpansionPanelHeaderIconP imports: [IgxIconComponent] }) export class IgxExpansionPanelHeaderComponent { + public panel = inject(IGX_EXPANSION_PANEL_COMPONENT, { host: true }); + public cdr = inject(ChangeDetectorRef); + public elementRef = inject(ElementRef); + /** * Returns a reference to the `igx-expansion-panel-icon` element; * If `iconPosition` is `NONE` - return null; @@ -213,12 +203,7 @@ export class IgxExpansionPanelHeaderComponent { private _iconTemplate = false; private _disabled = false; - constructor( - @Host() @Inject(IGX_EXPANSION_PANEL_COMPONENT) - public panel: IgxExpansionPanelBase, - public cdr: ChangeDetectorRef, - public elementRef: ElementRef, - ) { + constructor() { this.id = `${this.panel.id}-header`; } diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.common.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.common.ts index d1499fc70e6..5987b54073c 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.common.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.common.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, EventEmitter, InjectionToken } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, inject, InjectionToken } from '@angular/core'; import { AnimationReferenceMetadata } from '@angular/animations'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; @@ -29,8 +29,7 @@ export interface IExpansionPanelCancelableEventArgs extends IExpansionPanelEven @Directive() export abstract class HeaderContentBaseDirective { - - constructor(protected element: ElementRef) { } + protected element = inject(ElementRef); /** * Returns the `textContent` of an element diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts index dbbf42b64ae..209255bcc90 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts @@ -1,18 +1,4 @@ -import { - AfterContentInit, - ChangeDetectorRef, - Component, - ContentChild, - ElementRef, - EventEmitter, - HostBinding, - Inject, - Input, - Output, - booleanAttribute -} from '@angular/core'; -import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { AnimationService } from '../services/animation/animation'; +import { AfterContentInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, booleanAttribute, inject } from '@angular/core'; import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; import { @@ -32,6 +18,9 @@ let NEXT_ID = 0; imports: [] }) export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements IgxExpansionPanelBase, AfterContentInit { + private cdr = inject(ChangeDetectorRef); + private elementRef = inject(ElementRef); + /** * Sets/gets the animation settings of the expansion panel component * Open and Close animation should be passed @@ -214,13 +203,6 @@ export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements @ContentChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent }) public header: IgxExpansionPanelHeaderComponent; - constructor( - @Inject(IgxAngularAnimationService) animationService: AnimationService, - private cdr: ChangeDetectorRef, - private elementRef?: ElementRef) { - super(animationService); - } - /** @hidden */ public ngAfterContentInit(): void { if (this.body && this.header) { diff --git a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts index 27d18f7186f..55883b52481 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts @@ -1,5 +1,5 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { Directive, ElementRef, EventEmitter, Inject, OnDestroy } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, inject, OnDestroy } from '@angular/core'; import { noop, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -34,6 +34,8 @@ export enum ANIMATION_TYPE { /**@hidden @internal */ @Directive() export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnDestroy { + protected animationService = inject(IgxAngularAnimationService); + /** @hidden @internal */ public openAnimationDone: EventEmitter = new EventEmitter(); /** @hidden @internal */ @@ -71,9 +73,6 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD private onClosedCallback: () => any = this._defaultClosedCallback; private onOpenedCallback: () => any = this._defaultOpenedCallback; - constructor(@Inject(IgxAngularAnimationService) protected animationService: AnimationService) { - } - /** @hidden @internal */ public playOpenAnimation(targetElement: ElementRef, onDone?: () => void): void { this.startPlayer(ANIMATION_TYPE.OPEN, targetElement, onDone || this._defaultOpenedCallback); diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts index 6bef1a38a97..89f2a92c067 100644 --- a/projects/igniteui-angular/src/lib/grids/api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/api.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { cloneArray, reverseMapper, mergeObjects } from '../core/utils'; import { DataUtil, GridColumnDataType } from '../data-operations/data-util'; @@ -18,14 +18,11 @@ import { FilterUtil } from '../data-operations/filtering-strategy'; @Injectable() export class GridBaseAPIService implements GridServiceType { + public crudService = inject(IgxGridCRUDService); + public cms = inject(IgxColumnMovingService) public grid: T; - protected destroyMap: Map> = new Map>(); - - constructor( - public crudService: IgxGridCRUDService, - public cms: IgxColumnMovingService - ) { } + protected destroyMap: Map> = new Map>(); public get_column_by_name(name: string): ColumnType { return this.grid.columns.find((col: ColumnType) => col.field === name); diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index eaacd3064e5..c2f77a57964 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -13,11 +13,11 @@ OnDestroy, OnChanges, SimpleChanges, - Inject, ViewChildren, QueryList, AfterViewInit, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { formatPercent, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; @@ -30,7 +30,7 @@ import { formatCurrency, formatDate, PlatformUtil } from '../core/utils'; import { IgxGridSelectionService } from './selection/selection.service'; import { HammerGesturesManager } from '../core/touch'; import { GridSelectionMode } from './common/enums'; -import { CellType, ColumnType, GridType, IgxCellTemplateContext, IGX_GRID_BASE, RowType } from './common/grid.interface'; +import { CellType, ColumnType, IgxCellTemplateContext, IGX_GRID_BASE, RowType } from './common/grid.interface'; import { GridColumnDataType } from '../data-operations/data-util'; import { IgxRowDirective } from './row.directive'; import { ISearchInfo } from './common/events'; @@ -100,6 +100,15 @@ import { IgxChipComponent } from '../chips/chip.component'; ] }) export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellType, AfterViewInit { + protected selectionService = inject(IgxGridSelectionService); + public grid = inject(IGX_GRID_BASE); + protected overlayService = inject(IgxOverlayService); + public cdr = inject(ChangeDetectorRef); + private element = inject(ElementRef); + protected zone = inject(NgZone); + private touchManager = inject(HammerGesturesManager); + protected platformUtil = inject(PlatformUtil); + private _destroy$ = new Subject(); /** * @hidden @@ -795,16 +804,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT private _cellSelection: GridSelectionMode = GridSelectionMode.multiple; private _vIndex = -1; - constructor( - protected selectionService: IgxGridSelectionService, - @Inject(IGX_GRID_BASE) public grid: GridType, - @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, - public cdr: ChangeDetectorRef, - private element: ElementRef, - protected zone: NgZone, - private touchManager: HammerGesturesManager, - protected platformUtil: PlatformUtil - ) { } + /** * @hidden diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index 43c6c34b0dd..27bd77c4836 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -1,4 +1,4 @@ -import { Component, DoCheck, EventEmitter, HostBinding, Inject, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, booleanAttribute, forwardRef } from '@angular/core'; +import { Component, DoCheck, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, booleanAttribute, forwardRef, inject } from '@angular/core'; import { ColumnDisplayOrder } from '../common/enums'; import { ColumnType, GridType } from '../common/grid.interface'; import { IColumnToggledEventArgs } from '../common/events'; @@ -23,6 +23,8 @@ let NEXT_ID = 0; imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)] }) export class IgxColumnActionsComponent implements DoCheck { + private differs = inject(IterableDiffers); + /** * Gets/Sets the grid to provide column actions for. @@ -161,7 +163,7 @@ export class IgxColumnActionsComponent implements DoCheck { */ private _id = `igx-column-actions-${NEXT_ID++}`; - constructor(private differs: IterableDiffers) { + constructor() { this._differ = this.differs.find([]).create(this.trackChanges); } @@ -390,8 +392,8 @@ export class IgxColumnActionsComponent implements DoCheck { standalone: true }) export class IgxColumnActionEnabledPipe implements PipeTransform { + protected columnActions = inject(IgxColumnActionsComponent); - constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { } public transform( collection: ColumnType[], @@ -419,8 +421,8 @@ export class IgxColumnActionEnabledPipe implements PipeTransform { standalone: true }) export class IgxFilterActionColumnsPipe implements PipeTransform { + protected columnActions = inject(IgxColumnActionsComponent); - constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { } public transform(collection: ColumnType[], filterCriteria: string, _pipeTrigger: number): ColumnType[] { if (!collection) { diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts index 54ba5a48904..2102908fa4b 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Inject } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { ColumnType } from '../common/grid.interface'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxColumnActionsComponent } from './column-actions.component'; @@ -8,11 +8,13 @@ import { IgxColumnActionsComponent } from './column-actions.component'; standalone: true }) export class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective { + protected columnActions = inject(IgxColumnActionsComponent); - constructor( - @Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent - ) { + + constructor() { super(); + const columnActions = this.columnActions; + columnActions.actionsDirective = this; } diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts index 9f43fbe2527..81cbc64f40a 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Inject } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { ColumnType } from '../common/grid.interface'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxColumnActionsComponent } from './column-actions.component'; @@ -8,11 +8,13 @@ import { IgxColumnActionsComponent } from './column-actions.component'; standalone: true }) export class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective { + protected columnActions = inject(IgxColumnActionsComponent); - constructor( - @Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent - ) { + + constructor() { super(); + const columnActions = this.columnActions; + columnActions.actionsDirective = this; } diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 641c2fb5a0c..53d4667ce1d 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1,23 +1,6 @@ import { Subject } from 'rxjs'; import { isEqual } from 'lodash-es'; -import { - AfterContentInit, - ChangeDetectorRef, - ChangeDetectionStrategy, - Component, - ContentChild, - ContentChildren, - Input, - QueryList, - TemplateRef, - Output, - EventEmitter, - OnDestroy, - Inject, - Optional, - Self, - booleanAttribute, -} from '@angular/core'; +import { AfterContentInit, ChangeDetectorRef, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, QueryList, TemplateRef, Output, EventEmitter, OnDestroy, booleanAttribute, inject } from '@angular/core'; import { notifyChanges } from '../watch-changes'; import { WatchColumnChanges } from '../watch-changes'; import { GridColumnDataType } from '../../data-operations/data-util'; @@ -87,6 +70,13 @@ const DEFAULT_DIGITS_INFO = '1.0-3'; standalone: true }) export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnType { + public grid = inject(IGX_GRID_BASE); + private _validators = inject(NG_VALIDATORS, { optional: true, self: true }); + + /** @hidden @internal **/ + public cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + /** * Sets/gets the `field` value. * ```typescript @@ -111,7 +101,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy /** * @hidden @internal */ - public validators: Validator[] = []; + public validators: Validator[] = this._validators; /** * Sets/gets the `header` value. @@ -1904,16 +1894,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy private _columnPipeArgs: IColumnPipeArgs = { digitsInfo: DEFAULT_DIGITS_INFO }; private _editorOptions: IColumnEditorOptions = { }; - constructor( - @Inject(IGX_GRID_BASE) public grid: GridType, - @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: Validator[], - /** @hidden @internal **/ - public cdr: ChangeDetectorRef, - protected platform: PlatformUtil, - ) { - this.validators = _validators; - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts b/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts index a13e22f9a12..bd48d8792b4 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { IgxCellTemplateContext, IgxColumnTemplateContext, IgxSummaryTemplateContext } from '../common/grid.interface'; @Directive({ @@ -6,7 +6,8 @@ import { IgxCellTemplateContext, IgxColumnTemplateContext, IgxSummaryTemplateCon standalone: true }) export class IgxFilterCellTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxFilterCellTemplateDirective, context: unknown): context is IgxColumnTemplateContext { @@ -19,7 +20,8 @@ export class IgxFilterCellTemplateDirective { standalone: true }) export class IgxCellTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxCellTemplateDirective, context: unknown): context is IgxCellTemplateContext { @@ -32,7 +34,8 @@ export class IgxCellTemplateDirective { standalone: true }) export class IgxCellValidationErrorDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxCellValidationErrorDirective, context: unknown): context is IgxCellTemplateContext { @@ -45,7 +48,8 @@ export class IgxCellValidationErrorDirective { standalone: true }) export class IgxCellHeaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxCellHeaderTemplateDirective, context: unknown): context is IgxColumnTemplateContext { @@ -61,7 +65,7 @@ export class IgxCellHeaderTemplateDirective { standalone: true }) export class IgxCellFooterTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } @Directive({ @@ -69,7 +73,8 @@ export class IgxCellFooterTemplateDirective { standalone: true }) export class IgxCellEditorTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxCellEditorTemplateDirective, context: unknown): context is IgxCellTemplateContext { @@ -82,7 +87,8 @@ export class IgxCellEditorTemplateDirective { standalone: true }) export class IgxCollapsibleIndicatorTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxCollapsibleIndicatorTemplateDirective, context: unknown): context is IgxColumnTemplateContext { @@ -95,7 +101,8 @@ export class IgxCollapsibleIndicatorTemplateDirective { standalone: true }) export class IgxSummaryTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxSummaryTemplateDirective, context: unknown): context is IgxSummaryTemplateContext { diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index 818a0ea3854..09e04a86741 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -1,4 +1,4 @@ -import { Pipe, PipeTransform, Inject } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { DataUtil } from '../../data-operations/data-util'; import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils'; import { GridType, IGX_GRID_BASE, RowType } from './grid.interface'; @@ -99,9 +99,11 @@ export class IgxGridCellImageAltPipe implements PipeTransform { standalone: true }) export class IgxGridRowClassesPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); + public row: RowType; - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { + constructor() { this.row = new IgxGridRow(this.grid as any, -1, {}); } @@ -159,8 +161,8 @@ export class IgxGridRowClassesPipe implements PipeTransform { standalone: true }) export class IgxGridRowStylesPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(styles: GridStyleCSSProperty, rowData: any, index: number, __: number): GridStyleCSSProperty { const css = {}; @@ -232,8 +234,8 @@ export class IgxGridFilterConditionPipe implements PipeTransform { standalone: true }) export class IgxGridTransactionPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], _id: string, _pipeTrigger: number) { @@ -302,8 +304,8 @@ function buildDataView(): MethodDecorator { standalone: true }) export class IgxGridRowPinningPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } @buildDataView() public transform(collection: any[], id: string, isPinned = false, _pipeTrigger: number) { @@ -396,8 +398,8 @@ export class IgxSummaryFormatterPipe implements PipeTransform { standalone: true }) export class IgxGridAddRowPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any, isPinned = false, _pipeTrigger: number) { if (!this.grid.rowEditable || !this.grid.crudService.row || !this.grid.crudService.row.isAddRow || diff --git a/projects/igniteui-angular/src/lib/grids/common/types.ts b/projects/igniteui-angular/src/lib/grids/common/types.ts index 891fe0160f6..680f20aa36b 100644 --- a/projects/igniteui-angular/src/lib/grids/common/types.ts +++ b/projects/igniteui-angular/src/lib/grids/common/types.ts @@ -1,4 +1,5 @@ import { InjectionToken } from '@angular/core'; +import { State, Transaction, TransactionService } from '../../services/transaction/transaction'; /* tsPlainInterface */ /* marshalByValue */ @@ -103,4 +104,4 @@ export type SelectionState = ISelectionKeyboardState | ISelectionPointerState; * Injection token for accessing the grid transaction object. * This allows injecting the grid transaction object into components or services. */ -export const IgxGridTransaction = /*@__PURE__*/new InjectionToken('IgxGridTransaction'); +export const IgxGridTransaction = /*@__PURE__*/new InjectionToken>('IgxGridTransaction'); diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index e334ede030b..ebdabf7cb51 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -1,6 +1,4 @@ -import { - Component, Input, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding -} from '@angular/core'; +import { Component, Input, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding, inject } from '@angular/core'; import { IgxOverlayService } from '../../../services/overlay/overlay'; import { IDragStartEventArgs, IgxDragDirective, IgxDragHandleDirective } from '../../../directives/drag-drop/drag-drop.directive'; import { Subject } from 'rxjs'; @@ -16,7 +14,6 @@ import { NgClass } from '@angular/common'; import { getCurrentResourceStrings } from '../../../core/i18n/resources'; import { QueryBuilderResourceStringsEN } from '../../../core/i18n/query-builder-resources'; import { IgxHierarchicalGridComponent } from '../../hierarchical-grid/hierarchical-grid.component'; -import { IgxRowIslandComponent } from '../../hierarchical-grid/row-island.component'; /** * A component used for presenting advanced filtering UI for a Grid. @@ -35,6 +32,9 @@ import { IgxRowIslandComponent } from '../../hierarchical-grid/row-island.compon imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective] }) export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + /** * @hidden @internal */ @@ -61,8 +61,6 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes private _overlayComponentId: string; private _overlayService: IgxOverlayService; private _grid: GridType; - - constructor(public cdr: ChangeDetectorRef, protected platform: PlatformUtil) { } /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index a2b08705437..d9a5300ff27 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts @@ -1,16 +1,4 @@ -import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DoCheck, - ElementRef, - HostBinding, - Input, - OnInit, - TemplateRef, - ViewChild -} from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild, inject } from '@angular/core'; import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface'; import { IgxFilteringService } from '../grid-filtering.service'; import { ExpressionUI } from '../excel-style/common'; @@ -41,6 +29,9 @@ import { Size } from '../../common/enums'; ] }) export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck { + public cdr = inject(ChangeDetectorRef); + public filteringService = inject(IgxFilteringService); + @Input() public column: ColumnType; @@ -78,10 +69,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC private baseClass = 'igx-grid__filtering-cell-indicator'; - constructor( - public cdr: ChangeDetectorRef, - public filteringService: IgxFilteringService, - ) { + constructor() { this.filteringService.subscribeToEvents(); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index ef7ab4f3b0a..3c8ebc39a7b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -1,19 +1,4 @@ -import { - AfterViewInit, - ChangeDetectorRef, - Component, - Input, - TemplateRef, - ViewChild, - ViewChildren, - QueryList, - ElementRef, - HostBinding, - ChangeDetectionStrategy, - ViewRef, - HostListener, - OnDestroy -} from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, Input, TemplateRef, ViewChild, ViewChildren, QueryList, ElementRef, HostBinding, ChangeDetectionStrategy, ViewRef, HostListener, OnDestroy, inject } from '@angular/core'; import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util'; import { IgxDropDownComponent } from '../../../drop-down/drop-down.component'; import { IFilteringOperation } from '../../../data-operations/filtering-condition'; @@ -57,6 +42,11 @@ import { Size } from '../../common/enums'; imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective, IgxIconButtonDirective] }) export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { + public filteringService = inject(IgxFilteringService); + public ref = inject>(ElementRef); + public cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + @Input() public get column(): ColumnType { return this._column; @@ -198,13 +188,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { private $destroyer = new Subject(); - constructor( - public filteringService: IgxFilteringService, - public ref: ElementRef, - public cdr: ChangeDetectorRef, - protected platform: PlatformUtil, - ) { } - @HostListener('keydown', ['$event']) public onKeydownHandler(evt: KeyboardEvent) { if (this.platform.isFilteringKeyCombo(evt)) { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts index 73980ec8c8c..6aeddd6058e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Directive, ElementRef, EventEmitter } from '@angular/core'; +import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, inject } from '@angular/core'; import { PlatformUtil } from '../../../core/utils'; import { IgxOverlayService } from '../../../services/overlay/overlay'; import { ExpressionUI, FilterListItem } from './common'; @@ -7,6 +7,10 @@ import { ExpressionUI, FilterListItem } from './common'; @Directive() export abstract class BaseFilteringComponent { + protected cdr = inject(ChangeDetectorRef); + public element = inject(ElementRef); + protected platform = inject(PlatformUtil); + public abstract column: any; public abstract get grid(): any; @@ -24,13 +28,6 @@ export abstract class BaseFilteringComponent { public abstract sortingChanged: EventEmitter; public abstract listDataLoaded: EventEmitter; - constructor( - protected cdr: ChangeDetectorRef, - public element: ElementRef, - protected platform: PlatformUtil - ) { } - - public abstract initialize(column: any, overlayService: IgxOverlayService): void; public abstract detectChanges(): void; public abstract hide(): void; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts index 65449e4ad25..19441ecb110 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { PlatformUtil } from '../../../core/utils'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; @@ -13,10 +13,9 @@ import { NgClass } from '@angular/common'; imports: [NgClass, IgxIconComponent] }) export class IgxExcelStyleClearFiltersComponent { - constructor( - public esf: BaseFilteringComponent, - protected platform: PlatformUtil, - ) { } + public esf = inject(BaseFilteringComponent); + protected platform = inject(PlatformUtil); + /** * @hidden @internal diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index fa35a644bd1..6183daee33e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, ViewChild } from '@angular/core'; +import { Component, OnDestroy, ViewChild, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { GridColumnDataType } from '../../../data-operations/data-util'; @@ -27,6 +27,9 @@ import { ISelectionEventArgs } from '../../../drop-down/drop-down.common'; imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent] }) export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { + public esf = inject(BaseFilteringComponent); + protected platform = inject(PlatformUtil); + /** * @hidden @internal */ @@ -57,10 +60,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { scrollStrategy: new AbsoluteScrollStrategy() }; - constructor( - public esf: BaseFilteringComponent, - protected platform: PlatformUtil, - ) { + constructor() { this.esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.esf.grid) { this.shouldOpenSubMenu = true; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts index 71382bd1d95..c5e023f443e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts @@ -1,14 +1,4 @@ -import { - Component, - Input, - ChangeDetectorRef, - ViewChild, - AfterViewInit, - TemplateRef, - ViewChildren, - QueryList, - ElementRef -} from '@angular/core'; +import { Component, Input, ChangeDetectorRef, ViewChild, AfterViewInit, TemplateRef, ViewChildren, QueryList, ElementRef, inject } from '@angular/core'; import { IgxFilteringService } from '../grid-filtering.service'; import { FilteringLogic } from '../../../data-operations/filtering-expression.interface'; import { GridColumnDataType } from '../../../data-operations/data-util'; @@ -44,6 +34,11 @@ import { BaseFilteringComponent } from './base-filtering.component'; imports: [IgxToggleDirective, NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent] }) export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { + protected overlayService = inject(IgxOverlayService); + private cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + public esf = inject(BaseFilteringComponent); + @Input() public expressionsList = new Array(); @@ -91,14 +86,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { scrollStrategy: new AbsoluteScrollStrategy() }; - - constructor( - protected overlayService: IgxOverlayService, - private cdr: ChangeDetectorRef, - protected platform: PlatformUtil, - public esf:BaseFilteringComponent - ) { } - public ngAfterViewInit(): void { this._customDialogOverlaySettings.outlet = this.grid.outlet; } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index a110595ad04..e62dc2c76ac 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -1,12 +1,4 @@ -import { - Component, - AfterViewInit, - Input, - Output, - EventEmitter, - ChangeDetectorRef, - ViewChild -} from '@angular/core'; +import { Component, AfterViewInit, Input, Output, EventEmitter, ChangeDetectorRef, ViewChild, inject } from '@angular/core'; import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component'; import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util'; import { IFilteringOperation } from '../../../data-operations/filtering-condition'; @@ -44,6 +36,9 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs { imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective] }) export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { + public cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + @Input() public column: ColumnType; @@ -107,8 +102,6 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { } } - constructor(public cdr: ChangeDetectorRef, protected platform: PlatformUtil) { } - public get conditions() { return this.column.filters.conditionList(); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts index fc77989a402..862468124ce 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts @@ -1,27 +1,6 @@ -import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - Directive, - ElementRef, - EventEmitter, - forwardRef, - Host, - HostBinding, - Inject, - Input, - OnDestroy, - Optional, - Output, - TemplateRef, - ViewChild, - ViewRef, - DOCUMENT -} from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, Output, TemplateRef, ViewChild, ViewRef, DOCUMENT, inject } from '@angular/core'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree'; -import { PlatformUtil, formatDate, formatCurrency } from '../../../core/utils'; +import { formatDate, formatCurrency } from '../../../core/utils'; import { GridColumnDataType } from '../../../data-operations/data-util'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; @@ -74,6 +53,9 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { } imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass] }) export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy { + private document = inject(DOCUMENT); + protected gridAPI? = inject(IGX_GRID_BASE, { host: true, optional: true }); + /** * @hidden @internal @@ -292,17 +274,6 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent return this.column?.grid ?? this.gridAPI; } - constructor( - cdr: ChangeDetectorRef, - element: ElementRef, - platform: PlatformUtil, - @Inject(DOCUMENT) - private document: any, - @Host() @Optional() @Inject(IGX_GRID_BASE) protected gridAPI?: GridType, - ) { - super(cdr, element, platform); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts index 53a0af9f703..f2f8d135180 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, booleanAttribute } from '@angular/core'; +import { Component, Input, booleanAttribute, inject } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { NgClass } from '@angular/common'; @@ -13,6 +13,8 @@ import { IgxIconButtonDirective } from '../../../directives/button/icon-button.d imports: [NgClass, IgxIconComponent, IgxIconButtonDirective] }) export class IgxExcelStyleHeaderComponent { + public esf = inject(BaseFilteringComponent); + /** * Sets whether the column pinning icon should be shown in the header. * Default value is `false`. @@ -48,6 +50,4 @@ export class IgxExcelStyleHeaderComponent { */ @Input({ transform: booleanAttribute }) public showHiding: boolean; - - constructor(public esf: BaseFilteringComponent) { } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts index f529efef6df..ecd5466ab69 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; @@ -11,5 +11,5 @@ import { IgxIconComponent } from '../../../icon/icon.component'; imports: [IgxIconComponent] }) export class IgxExcelStyleHidingComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts index 80aa1564310..38cb5726aea 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding } from '@angular/core'; +import { Component, HostBinding, inject } from '@angular/core'; import { ColumnType } from '../../common/grid.interface'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; @@ -14,14 +14,14 @@ import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.compon imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class IgxExcelStyleMovingComponent { + public esf = inject(BaseFilteringComponent); + /** * @hidden @internal */ @HostBinding('class.igx-excel-filter__move') public defaultClass = true; - constructor(public esf: BaseFilteringComponent) { } - private get visibleColumns() { return this.esf.grid.visibleColumns.filter(col => !col.columnGroup); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts index 17cce1aefde..086b4511382 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { NgClass } from '@angular/common'; @@ -12,5 +12,5 @@ import { NgClass } from '@angular/common'; imports: [NgClass, IgxIconComponent] }) export class IgxExcelStylePinningComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts index d366da1a43c..866751da556 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts @@ -1,14 +1,4 @@ -import { - AfterViewInit, - Component, - ViewChild, - ChangeDetectorRef, - TemplateRef, - Directive, - OnDestroy, - HostBinding, - Input -} from '@angular/core'; +import { AfterViewInit, Component, ViewChild, ChangeDetectorRef, TemplateRef, Directive, OnDestroy, HostBinding, Input, inject } from '@angular/core'; import { IgxInputDirective } from '../../../directives/input/input.directive'; import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive'; import { FilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree'; @@ -45,11 +35,12 @@ import { Size } from '../../common/enums'; standalone: true }) export class IgxExcelStyleLoadingValuesTemplateDirective { + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_dir: IgxExcelStyleLoadingValuesTemplateDirective, ctx: unknown): ctx is undefined { return true } - constructor(public template: TemplateRef) { } } let NEXT_ID = 0; @@ -62,6 +53,10 @@ let NEXT_ID = 0; imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective] }) export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + public esf = inject(BaseFilteringComponent); + protected platform = inject(PlatformUtil); + private static readonly filterOptimizationThreshold = 2; /** @@ -210,7 +205,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { private _focusedItem: ActiveElement = null; private destroy$ = new Subject(); - constructor(public cdr: ChangeDetectorRef, public esf: BaseFilteringComponent, protected platform: PlatformUtil) { + constructor() { + const esf = this.esf; + esf.loadingStart.pipe(takeUntil(this.destroy$)).subscribe(() => { this.displayedListData = []; this.isLoading = true; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts index d3fd52a5b69..db343afc174 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { NgClass } from '@angular/common'; @@ -12,5 +12,5 @@ import { NgClass } from '@angular/common'; imports: [NgClass, IgxIconComponent] }) export class IgxExcelStyleSelectingComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts index 1d23c7a78c9..700d3f510ba 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts @@ -1,10 +1,4 @@ -import { - Component, - ViewChild, - OnDestroy, - HostBinding, - ChangeDetectorRef -} from '@angular/core'; +import { Component, ViewChild, OnDestroy, HostBinding, ChangeDetectorRef, inject } from '@angular/core'; import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -21,6 +15,9 @@ import { IgxButtonDirective } from '../../../directives/button/button.directive' imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class IgxExcelStyleSortingComponent implements OnDestroy { + public esf = inject(BaseFilteringComponent); + private cdr = inject(ChangeDetectorRef); + /** * @hidden @internal */ @@ -35,7 +32,7 @@ export class IgxExcelStyleSortingComponent implements OnDestroy { private destroy$ = new Subject(); - constructor(public esf: BaseFilteringComponent, private cdr: ChangeDetectorRef) { + constructor() { this.esf.sortingChanged.pipe(takeUntil(this.destroy$)).subscribe(() => { this.updateSelectedButtons(this.esf.column.field); }); diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 717e78acbcf..6af4acf5ede 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -1,7 +1,4 @@ -import { - Injectable, - OnDestroy, -} from '@angular/core'; +import { Injectable, OnDestroy, inject } from '@angular/core'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { Subject } from 'rxjs'; @@ -27,6 +24,9 @@ import { ExpressionsTreeUtil, isTree } from '../../data-operations/expressions-t */ @Injectable() export class IgxFilteringService implements OnDestroy { + private iconService = inject(IgxIconService); + protected _overlayService = inject(IgxOverlayService); + public isFilterRowVisible = false; public filteredColumn: ColumnType = null; public selectedExpression: IFilteringExpression = null; @@ -53,11 +53,6 @@ export class IgxFilteringService implements OnDestroy { }; protected lastActiveNode; - constructor( - private iconService: IgxIconService, - protected _overlayService: IgxOverlayService, - ) { } - public ngOnDestroy(): void { this.destroy$.next(true); this.destroy$.complete(); diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 8850116fa16..5ba25cc19cb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -15,7 +15,6 @@ import { EventEmitter, HostBinding, HostListener, - Inject, Injector, Input, IterableChangeRecord, @@ -24,14 +23,14 @@ import { NgZone, OnDestroy, OnInit, - Optional, Output, TemplateRef, QueryList, ViewChild, ViewChildren, ViewContainerRef, - DOCUMENT + DOCUMENT, + inject } from '@angular/core'; import { columnFieldPath, formatDate, resizeObservable } from '../core/utils'; import { IgcTrialWatermark } from 'igniteui-trial-watermark'; @@ -131,7 +130,6 @@ import { import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component'; import { ColumnType, - GridServiceType, GridType, IGridFormGroupCreatedEventArgs, IGridValidationStatusEventArgs, @@ -210,6 +208,32 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2; export abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { + public readonly validation = inject(IgxGridValidationService); + /** @hidden @internal */ + public readonly selectionService = inject(IgxGridSelectionService); + protected colResizingService = inject(IgxColumnResizingService); + public readonly gridAPI = inject(IGX_GRID_SERVICE_BASE); + protected transactionFactory = inject(IgxFlatTransactionFactory); + private elementRef = inject(ElementRef); + protected zone = inject(NgZone); + /** @hidden @internal */ + public document = inject(DOCUMENT); + public readonly cdr = inject(ChangeDetectorRef); + protected differs = inject(IterableDiffers); + protected viewRef = inject(ViewContainerRef); + protected injector = inject(Injector); + protected envInjector = inject(EnvironmentInjector); + public navigation = inject(IgxGridNavigationService); + /** @hidden @internal */ + public filteringService = inject(IgxFilteringService); + protected textHighlightService = inject(IgxTextHighlightService); + protected overlayService = inject(IgxOverlayService); + /** @hidden @internal */ + public summaryService = inject(IgxGridSummaryService); + private localeId = inject(LOCALE_ID); + protected platform = inject(PlatformUtil); + protected _diTransactions = inject(IgxGridTransaction, { optional: true }); + /** * Gets/Sets the display time for the row adding snackbar notification. * @@ -3470,33 +3494,7 @@ export abstract class IgxGridBaseDirective implements GridType, return this.gridAPI.cms.column; } - constructor( - public readonly validation: IgxGridValidationService, - /** @hidden @internal */ - public readonly selectionService: IgxGridSelectionService, - protected colResizingService: IgxColumnResizingService, - @Inject(IGX_GRID_SERVICE_BASE) public readonly gridAPI: GridServiceType, - protected transactionFactory: IgxFlatTransactionFactory, - private elementRef: ElementRef, - protected zone: NgZone, - /** @hidden @internal */ - @Inject(DOCUMENT) public document: any, - public readonly cdr: ChangeDetectorRef, - protected differs: IterableDiffers, - protected viewRef: ViewContainerRef, - protected injector: Injector, - protected envInjector: EnvironmentInjector, - public navigation: IgxGridNavigationService, - /** @hidden @internal */ - public filteringService: IgxFilteringService, - protected textHighlightService: IgxTextHighlightService, - @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, - /** @hidden @internal */ - public summaryService: IgxGridSummaryService, - @Inject(LOCALE_ID) private localeId: string, - protected platform: PlatformUtil, - @Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService, - ) { + constructor() { this.locale = this.locale || this.localeId; this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None); this._transactions.cloneStrategy = this.dataCloneStrategy; diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 97203e626fa..279b75b580d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { first } from 'rxjs/operators'; import { IgxForOfDirective } from '../directives/for-of/for_of.directive'; import { GridType } from './common/grid.interface'; @@ -46,7 +46,7 @@ export class IgxGridNavigationService { this._activeNode = value; } - constructor(protected platform: PlatformUtil) { } + protected platform = inject(PlatformUtil) public handleNavigation(event: KeyboardEvent) { const key = event.key.toLowerCase(); diff --git a/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts b/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts index e327858e99a..77037599f74 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-public-cell.ts @@ -4,6 +4,8 @@ import { columnFieldPath, resolveNestedPath } from '../core/utils'; export class IgxGridCell implements CellType { + + /** * Returns the grid containing the cell. * diff --git a/projects/igniteui-angular/src/lib/grids/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid.directives.ts index 0a5ffea63cf..fd915c536f2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.directives.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Renderer2, NgZone, HostBinding, TemplateRef } from '@angular/core'; +import { Directive, HostBinding, TemplateRef, inject } from '@angular/core'; import { IgxDropDirective } from '../directives/drag-drop/drag-drop.directive'; import { IgxColumnMovingDragDirective } from './moving/moving.drag.directive'; import { IgxGroupByAreaDirective } from './grouping/group-by-area.directive'; @@ -19,13 +19,11 @@ import { standalone: true }) export class IgxGroupByRowTemplateDirective { + public template = inject(TemplateRef) public static ngTemplateContextGuard(_dir: IgxGroupByRowTemplateDirective, ctx: unknown): ctx is IgxGroupByRowTemplateContext { return true - } - - constructor(public template: TemplateRef) { } - + } } /** @@ -187,18 +185,11 @@ export class IgxGridEmptyTemplateDirective { standalone: true }) export class IgxGroupAreaDropDirective extends IgxDropDirective { + private groupArea = inject(IgxGroupByAreaDirective); @HostBinding('class.igx-drop-area--hover') public hovered = false; - constructor( - private groupArea: IgxGroupByAreaDirective, - private elementRef: ElementRef, - renderer: Renderer2, - zone: NgZone) { - super(elementRef, renderer, zone); - } - public override onDragEnter(event) { const drag: IgxColumnMovingDragDirective = event.detail.owner; const column: ColumnType = drag.column; @@ -235,7 +226,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { } private columnBelongsToGrid(column: ColumnType) { - const elem = this.elementRef.nativeElement; + const elem = this.element.nativeElement; const closestGridID = this.closestParentByAttr(elem, 'igxGroupAreaDrop').getAttribute('gridId'); if (!column) { return false; diff --git a/projects/igniteui-angular/src/lib/grids/grid.rowEdit.directive.ts b/projects/igniteui-angular/src/lib/grids/grid.rowEdit.directive.ts index f67b109e4b1..a73d5527707 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.rowEdit.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.rowEdit.directive.ts @@ -1,5 +1,5 @@ -import { Directive, ElementRef, HostListener, Inject } from '@angular/core'; -import { GridType, IgxGridEmptyTemplateContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IGX_GRID_BASE } from './common/grid.interface'; +import { Directive, ElementRef, HostListener, inject } from '@angular/core'; +import { IgxGridEmptyTemplateContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IGX_GRID_BASE } from './common/grid.interface'; /** @hidden @internal */ @Directive({ @@ -57,9 +57,10 @@ export class IgxRowEditActionsDirective { standalone: true }) export class IgxRowEditTabStopDirective { - private currentCellIndex: number; + public grid = inject(IGX_GRID_BASE); + public element = inject(ElementRef); - constructor(@Inject(IGX_GRID_BASE) public grid: GridType, public element: ElementRef) {} + private currentCellIndex: number; @HostListener('keydown.Tab', [`$event`]) @HostListener('keydown.Shift.Tab', [`$event`]) diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts index 98e933fe227..f69e761f79c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts @@ -1,23 +1,7 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Inject, - Input, - NgZone, - OnInit, - TemplateRef, - ViewChild, - DOCUMENT -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, TemplateRef, ViewChild, DOCUMENT, inject } from '@angular/core'; import { IgxGridCellComponent } from '../cell.component'; -import { PlatformUtil } from '../../core/utils'; import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; -import { IgxGridSelectionService } from '../selection/selection.service'; import { HammerGesturesManager } from '../../core/touch'; -import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; -import { IgxOverlayService } from '../../services/public_api'; import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes'; import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive'; @@ -43,6 +27,8 @@ import { IgxChipComponent } from '../../chips/chip.component'; imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] }) export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit { + public document = inject(DOCUMENT); + /** * @hidden */ @@ -67,18 +53,6 @@ export class IgxGridExpandableCellComponent extends IgxGridCellComponent impleme @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) protected defaultCollapsedTemplate: TemplateRef; - constructor(selectionService: IgxGridSelectionService, - @Inject(IGX_GRID_BASE) grid: GridType, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - cdr: ChangeDetectorRef, - element: ElementRef, - zone: NgZone, - touchManager: HammerGesturesManager, - @Inject(DOCUMENT) public document, - platformUtil: PlatformUtil) { - super(selectionService, grid, overlayService, cdr, element, zone, touchManager, platformUtil); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 1e62728eb04..38067d71019 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1,7 +1,4 @@ -import { - AfterViewInit, ChangeDetectorRef, Component, Injectable, - OnInit, ViewChild, TemplateRef -} from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnInit, ViewChild, TemplateRef, inject } from '@angular/core'; import { TestBed, fakeAsync, tick, flush, waitForAsync } from '@angular/core/testing'; import { BehaviorSubject, Observable } from 'rxjs'; import { By } from '@angular/platform-browser'; @@ -3205,6 +3202,8 @@ describe('IgxGrid Component Tests #grid', () => { imports: [IgxGridComponent, IgxColumnComponent] }) export class IgxGridTestComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; public data: any[] = [{ index: 1, value: 1 }]; public columns = [ @@ -3218,8 +3217,6 @@ export class IgxGridTestComponent { public columnEventCount = 0; - constructor(public cdr: ChangeDetectorRef) { } - public columnCreated(column: IgxColumnComponent) { this.columnEventCount++; column.filterable = true; @@ -3595,10 +3592,12 @@ export class LocalService { imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] }) export class IgxGridRemoteVirtualizationComponent implements OnInit, AfterViewInit { + private localService = inject(LocalService); + public cdr = inject(ChangeDetectorRef); + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) public instance: IgxGridComponent; public data; - constructor(private localService: LocalService, public cdr: ChangeDetectorRef) { } public ngOnInit(): void { this.data = this.localService.records; } @@ -3638,13 +3637,15 @@ export class IgxGridRemoteVirtualizationComponent implements OnInit, AfterViewIn imports: [IgxGridComponent, IgxGridEmptyTemplateDirective, IgxGridLoadingTemplateDirective, AsyncPipe] }) export class IgxGridRemoteOnDemandComponent { + private localService = inject(LocalService); + public cdr = inject(ChangeDetectorRef); + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) public instance: IgxGridComponent; @ViewChild('customTemplate', { read: TemplateRef, static: true }) public customTemplate: TemplateRef; public data; public customLoading = false; - constructor(private localService: LocalService, public cdr: ChangeDetectorRef) { } public bind() { this.data = this.localService.records; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index ddf918f42b7..0e7448a8795 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1346,7 +1346,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, private _setupNavigationService() { if (this.hasColumnLayouts) { - this.navigation = new IgxGridMRLNavigationService(this.platform); + this.navigation = new IgxGridMRLNavigationService(); this.navigation.grid = this; } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.details.pipe.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.details.pipe.ts index 4bd21fc33ec..7bf216c62a7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.details.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.details.pipe.ts @@ -1,4 +1,4 @@ -import { PipeTransform, Pipe, Inject } from '@angular/core'; +import { PipeTransform, Pipe, inject } from '@angular/core'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; /** @hidden */ @@ -7,8 +7,8 @@ import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; standalone: true }) export class IgxGridDetailsPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], hasDetails: boolean, expansionStates: Map, _pipeTrigger: number) { if (!hasDetails) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index e560be34e71..39d1f60e0f7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef, ContentChild, ViewChildren } from '@angular/core'; +import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef, ViewChildren } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 4f5a4238eb4..744284c4aa9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { cloneArray } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; @@ -18,8 +18,8 @@ import { IGridSortingStrategy, IGridGroupingStrategy } from '../common/strategy' standalone: true }) export class IgxGridSortingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], sortExpressions: ISortingExpression[], groupExpressions: IGroupingExpression[], sorting: IGridSortingStrategy, id: string, pipeTrigger: number, pinned?): any[] { @@ -44,8 +44,8 @@ export class IgxGridSortingPipe implements PipeTransform { standalone: true }) export class IgxGridGroupingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], expression: IGroupingExpression | IGroupingExpression[], expansion: IGroupByExpandState | IGroupByExpandState[], @@ -84,8 +84,8 @@ export class IgxGridGroupingPipe implements PipeTransform { standalone: true }) export class IgxGridPagingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: IGroupByResult, enabled: boolean, page = 0, perPage = 15, _: number): IGroupByResult { if (!enabled || this.grid.pagingMode !== 'local') { @@ -118,8 +118,8 @@ export class IgxGridPagingPipe implements PipeTransform { standalone: true }) export class IgxGridFilteringPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], expressionsTree: IFilteringExpressionsTree, filterStrategy: IFilteringStrategy, diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts index edb74f3652c..96ddf49bfbc 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { ISummaryRecord } from '../summaries/grid-summary'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IGroupByResult } from '../../data-operations/grouping-result.interface'; @@ -14,8 +14,8 @@ interface ISkipRecord { skip?: boolean } standalone: true }) export class IgxGridSummaryPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: IGroupByResult, hasSummary: boolean, diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index 4928dda109a..7c084051bb9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -1,16 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - HostListener, - Input, - ViewChild, - TemplateRef, - OnDestroy, - Inject -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, ViewChild, TemplateRef, OnDestroy, inject } from '@angular/core'; import { NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common'; import { takeUntil } from 'rxjs/operators'; @@ -46,6 +34,12 @@ import { IgxColumnFormatterPipe } from '../common/pipes'; ] }) export class IgxGridGroupByRowComponent implements OnDestroy { + public grid = inject(IGX_GRID_BASE); + public gridSelection = inject(IgxGridSelectionService); + public element = inject(ElementRef); + public cdr = inject(ChangeDetectorRef); + public filteringService = inject(IgxFilteringService); + /** * @hidden */ @@ -143,12 +137,7 @@ export class IgxGridGroupByRowComponent implements OnDestroy { this.groupRow.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale); } - constructor( - @Inject(IGX_GRID_BASE) public grid: GridType, - public gridSelection: IgxGridSelectionService, - public element: ElementRef, - public cdr: ChangeDetectorRef, - public filteringService: IgxFilteringService) { + constructor() { this.gridSelection.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe(() => { this.cdr.markForCheck(); }); diff --git a/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts b/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts index 4e7b8bf3b1d..8523923c4a4 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts @@ -1,10 +1,5 @@ -import { - Component, - ElementRef, - Input, -} from '@angular/core'; +import { Component, Input } from '@angular/core'; import { IChipsAreaReorderEventArgs } from '../../chips/public_api'; -import { PlatformUtil } from '../../core/utils'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { ISortingExpression } from '../../data-operations/sorting-strategy'; import { FlatGridType } from '../common/grid.interface'; @@ -36,10 +31,6 @@ export class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective { @Input() public override grid: FlatGridType; - constructor(ref: ElementRef, platform: PlatformUtil) { - super(ref, platform); - } - public handleReorder(event: IChipsAreaReorderEventArgs) { const { chipsArray, originalEvent } = event; const newExpressions = this.getReorderedExpressions(chipsArray); diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts index 4118e7f0b59..c5235effd67 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts @@ -3,6 +3,7 @@ import { ElementRef, EventEmitter, HostBinding, + inject, Input, Output, Pipe, @@ -25,6 +26,9 @@ import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive'; */ @Directive() export abstract class IgxGroupByAreaDirective { + private ref = inject(ElementRef); + protected platform = inject(PlatformUtil); + /** * The drop area template if provided by the parent grid. * Otherwise, uses the default internal one. @@ -83,9 +87,6 @@ export abstract class IgxGroupByAreaDirective { private _expressions: IGroupingExpression[] = []; private _dropAreaMessage: string; - constructor(private ref: ElementRef, protected platform: PlatformUtil) { } - - public get dropAreaVisible(): boolean { return (this.grid.columnInDrag && this.grid.columnInDrag.groupable) || !this.expressions.length; diff --git a/projects/igniteui-angular/src/lib/grids/grouping/tree-grid-group-by-area.component.ts b/projects/igniteui-angular/src/lib/grids/grouping/tree-grid-group-by-area.component.ts index 59e71b93442..4091ce87d33 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/tree-grid-group-by-area.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/tree-grid-group-by-area.component.ts @@ -1,17 +1,7 @@ -import { - AfterContentInit, - Component, - ElementRef, - Input, - IterableDiffer, - IterableDiffers, - OnDestroy, - booleanAttribute, -} from '@angular/core'; +import { AfterContentInit, Component, Input, IterableDiffer, IterableDiffers, OnDestroy, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IChipsAreaReorderEventArgs } from '../../chips/public_api'; -import { PlatformUtil } from '../../core/utils'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { ISortingExpression } from '../../data-operations/sorting-strategy'; import { IgxGroupByAreaDirective, IgxGroupByMetaPipe } from './group-by-area.directive'; @@ -35,6 +25,8 @@ import { IgxChipsAreaComponent } from '../../chips/chips-area.component'; imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe] }) export class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective implements AfterContentInit, OnDestroy { + private differs = inject(IterableDiffers); + @Input({ transform: booleanAttribute }) public get hideGroupedColumns() { return this._hideGroupedColumns; @@ -52,10 +44,6 @@ export class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective imp private groupingDiffer: IterableDiffer; private destroy$ = new Subject(); - constructor(private differs: IterableDiffers, ref: ElementRef, platform: PlatformUtil) { - super(ref, platform); - } - public ngAfterContentInit(): void { if (this.grid.columns && this.expressions) { this.groupingDiffer = this.differs.find(this.expressions).create(); diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index 6607a21ff74..57c17b80346 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts @@ -1,18 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DoCheck, - ElementRef, - forwardRef, - HostBinding, - HostListener, - Inject, - Input, - QueryList, - ViewChild, - ViewChildren -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, forwardRef, HostBinding, HostListener, Input, QueryList, ViewChild, ViewChildren, inject } from '@angular/core'; import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { IgxGridHeaderComponent } from './grid-header.component'; @@ -39,6 +25,13 @@ const Z_INDEX = 9999; imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderGroupComponent implements DoCheck { + private cdr = inject(ChangeDetectorRef); + public grid = inject(IGX_GRID_BASE); + private ref = inject>(ElementRef); + public colResizingService = inject(IgxColumnResizingService); + public filteringService = inject(IgxFilteringService); + protected platform = inject(PlatformUtil); + @HostBinding('style.grid-row-end') public get rowEnd(): number { @@ -115,13 +108,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck { @HostBinding('class.igx-grid-thead__item') public defaultCss = true; - constructor(private cdr: ChangeDetectorRef, - @Inject(IGX_GRID_BASE) public grid: GridType, - private ref: ElementRef, - public colResizingService: IgxColumnResizingService, - public filteringService: IgxFilteringService, - protected platform: PlatformUtil) { } - @HostBinding('class.igx-grid-th--pinned') public get pinnedCss() { return this.isPinned; diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts index 4e664f1f249..a11ed3d50a2 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts @@ -1,16 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DoCheck, - ElementRef, - Input, - QueryList, - TemplateRef, - ViewChild, - ViewChildren, - booleanAttribute -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, Input, QueryList, TemplateRef, ViewChild, ViewChildren, booleanAttribute, inject } from '@angular/core'; import { flatten, trackByIdentity } from '../../core/utils'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { ColumnType, GridType, IgxHeadSelectorTemplateContext } from '../common/grid.interface'; @@ -39,6 +27,9 @@ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderRowComponent implements DoCheck { + protected ref = inject>(ElementRef); + protected cdr = inject(ChangeDetectorRef); + /** The grid component containing this element. */ @Input() @@ -163,11 +154,6 @@ export class IgxGridHeaderRowComponent implements DoCheck { return ctx; } - constructor( - protected ref: ElementRef, - protected cdr: ChangeDetectorRef - ) { } - /** * This hook exists as a workaround for the unfortunate fact * that when we have pinned columns in the grid, the unpinned columns headers diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index c691ba3c8d3..b49571c7ef4 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -1,17 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DoCheck, - ElementRef, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - TemplateRef, - ViewChild -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, HostBinding, HostListener, Input, OnDestroy, TemplateRef, ViewChild, inject } from '@angular/core'; import { GridColumnDataType } from '../../data-operations/data-util'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { Subject } from 'rxjs'; @@ -33,6 +20,10 @@ import { ExpressionsTreeUtil } from '../../data-operations/expressions-tree-util imports: [IgxIconComponent, NgTemplateOutlet, NgClass, SortingIndexPipe] }) export class IgxGridHeaderComponent implements DoCheck, OnDestroy { + public grid = inject(IGX_GRID_BASE); + public colResizingService = inject(IgxColumnResizingService); + public cdr = inject(ChangeDetectorRef); + private ref = inject>(ElementRef); @Input() public column: ColumnType; @@ -171,13 +162,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { public sortDirection = SortingDirection.None; protected _destroy$ = new Subject(); - constructor( - @Inject(IGX_GRID_BASE) public grid: GridType, - public colResizingService: IgxColumnResizingService, - public cdr: ChangeDetectorRef, - private ref: ElementRef - ) { } - @HostListener('click', ['$event']) public onClick(event: MouseEvent) { if (!this.colResizingService.isColumnResizing) { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 1ce7118cd4a..0229173b8fd 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -1,10 +1,6 @@ import { IgxGridCellComponent } from '../cell.component'; -import { ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, Component, OnInit, NgZone, Inject } from '@angular/core'; -import { IgxGridSelectionService } from '../selection/selection.service'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { HammerGesturesManager } from '../../core/touch'; -import { PlatformUtil } from '../../core/utils'; -import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; -import { IgxOverlayService } from '../../services/public_api'; import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes'; import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive'; @@ -35,19 +31,6 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple // protected hSelection; protected _rootGrid; - constructor( - selectionService: IgxGridSelectionService, - @Inject(IGX_GRID_BASE) grid: GridType, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - cdr: ChangeDetectorRef, - helement: ElementRef, - zone: NgZone, - touchManager: HammerGesturesManager, - platformUtil: PlatformUtil - ) { - super(selectionService, grid, overlayService, cdr, helement, zone, touchManager, platformUtil); - } - public override ngOnInit() { super.ngOnInit(); this._rootGrid = this._getRootGrid(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts index 1b75dfebb64..ddd9b39d0a0 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts @@ -1,45 +1,25 @@ import { booleanAttribute, - ChangeDetectorRef, createComponent, Directive, - ElementRef, - EnvironmentInjector, EventEmitter, - Inject, - Injector, Input, - IterableDiffers, - LOCALE_ID, - NgZone, - Optional, Output, reflectComponentType, - ViewContainerRef, - DOCUMENT + inject } from '@angular/core'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; import { IgxRowIslandComponent } from './row-island.component'; -import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxSummaryOperand } from '../summaries/grid-summary'; import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service'; -import { IgxGridSummaryService } from '../summaries/grid-summary.service'; -import { IgxGridSelectionService } from '../selection/selection.service'; -import { IgxColumnResizingService } from '../resizing/resizing.service'; import { GridType, IGX_GRID_SERVICE_BASE, IPathSegment } from '../common/grid.interface'; import { IgxColumnGroupComponent } from '../columns/column-group.component'; import { IgxColumnComponent } from '../columns/column.component'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { takeUntil } from 'rxjs/operators'; -import { PlatformUtil } from '../../core/utils'; -import { IgxFlatTransactionFactory } from '../../services/transaction/transaction-factory.service'; import { IgxTransactionService } from '../../services/transaction/igx-transaction'; -import { IgxOverlayService } from '../../services/overlay/overlay'; -import { State, Transaction, TransactionService } from '../../services/transaction/transaction'; import { IgxGridTransaction } from '../common/types'; -import { IgxGridValidationService } from '../grid/grid-validation.service'; -import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; export const hierarchicalTransactionServiceFactory = () => new IgxTransactionService(); @@ -54,6 +34,8 @@ export const IgxHierarchicalTransactionServiceFactory = { wcSkipComponentSuffix */ @Directive() export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective implements GridType { + public override gridAPI = inject(IGX_GRID_SERVICE_BASE); + public override navigation = inject(IgxHierarchicalGridNavigationService); /** * Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator. * @@ -152,54 +134,6 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect /* blazorSuppress */ public abstract expandChildren: boolean; - constructor( - validationService: IgxGridValidationService, - selectionService: IgxGridSelectionService, - colResizingService: IgxColumnResizingService, - @Inject(IGX_GRID_SERVICE_BASE) public override gridAPI: IgxHierarchicalGridAPIService, - transactionFactory: IgxFlatTransactionFactory, - elementRef: ElementRef, - zone: NgZone, - @Inject(DOCUMENT) document, - cdr: ChangeDetectorRef, - differs: IterableDiffers, - viewRef: ViewContainerRef, - injector: Injector, - envInjector: EnvironmentInjector, - public override navigation: IgxHierarchicalGridNavigationService, - filteringService: IgxFilteringService, - textHighlightService: IgxTextHighlightService, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - summaryService: IgxGridSummaryService, - @Inject(LOCALE_ID) localeId: string, - platform: PlatformUtil, - @Optional() @Inject(IgxGridTransaction) _diTransactions?: TransactionService, - ) { - super( - validationService, - selectionService, - colResizingService, - gridAPI, - transactionFactory, - elementRef, - zone, - document, - cdr, - differs, - viewRef, - injector, - envInjector, - navigation, - filteringService, - textHighlightService, - overlayService, - summaryService, - localeId, - platform, - _diTransactions, - ); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 69695e21ee2..9e62848ee7e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -1,27 +1,4 @@ -import { - AfterContentInit, - AfterViewInit, - booleanAttribute, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChildren, - CUSTOM_ELEMENTS_SCHEMA, - DoCheck, - ElementRef, - HostBinding, - Inject, - Input, - OnDestroy, - OnInit, - QueryList, - reflectComponentType, - SimpleChanges, - TemplateRef, - ViewChild, - ViewChildren, - ViewContainerRef -} from '@angular/core'; +import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, reflectComponentType, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core'; import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; @@ -81,6 +58,10 @@ let NEXT_ID = 0; imports: [NgClass] }) export class IgxChildGridRowComponent implements AfterViewInit, OnInit { + public readonly gridAPI = inject(IGX_GRID_SERVICE_BASE); + public element = inject>(ElementRef); + public cdr = inject(ChangeDetectorRef); + @Input() public layout: IgxRowIslandComponent; @@ -188,11 +169,6 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { private _data: any; - constructor( - @Inject(IGX_GRID_SERVICE_BASE) public readonly gridAPI: IgxHierarchicalGridAPIService, - public element: ElementRef, - public cdr: ChangeDetectorRef) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts index abb4ec53f4b..e2474638693 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; @@ -11,8 +11,7 @@ import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; standalone: true }) export class IgxGridHierarchicalPipe implements PipeTransform { - - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } + private grid = inject(IGX_GRID_BASE); public transform( collection: any, @@ -63,8 +62,8 @@ export class IgxGridHierarchicalPipe implements PipeTransform { standalone: true }) export class IgxGridHierarchicalPagingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], enabled: boolean, page = 0, perPage = 15, _id: string, _pipeTrigger: number): any[] { if (!enabled || this.grid.pagingMode !== 'local') { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 7db4299d1f3..8cc2d9cb83e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1,7 +1,7 @@ import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IGridCreatedEventArgs } from './public_api'; -import { ChangeDetectorRef, Component, ViewChild, AfterViewInit, QueryList } from '@angular/core'; +import { ChangeDetectorRef, Component, ViewChild, AfterViewInit, QueryList, inject } from '@angular/core'; import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; import { IgxRowIslandComponent } from './row-island.component'; @@ -2051,6 +2051,8 @@ export class IgxHierarchicalGridMultiLayoutComponent extends IgxHierarchicalGrid imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHGridRemoteOnDemandComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) public instance: IgxHierarchicalGridComponent; @@ -2062,8 +2064,6 @@ export class IgxHGridRemoteOnDemandComponent { public data; - constructor(public cdr: ChangeDetectorRef) { } - public generateDataUneven(count: number, level: number, parendID: string = null) { const prods = []; const currLevel = level; @@ -2118,14 +2118,13 @@ export class IgxHGridRemoteOnDemandComponent { imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGridTestBaseComponent implements AfterViewInit { + public cdr = inject(ChangeDetectorRef); + public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3']; public cols2 = ['ID', 'ProductName', 'Col1']; public parentCols = []; public islandCols1 = []; public islandCols2 = []; - constructor(public cdr: ChangeDetectorRef) { - super(); - } public ngAfterViewInit() { this.islandCols1 = this.cols1; @@ -2328,9 +2327,8 @@ export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHier imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxIconComponent, IgxCellHeaderTemplateDirective] }) export class IgxHierarchicalGridHidingPinningColumnsComponent extends IgxHierarchicalGridTestBaseComponent { - constructor(public cdr: ChangeDetectorRef) { - super(); - } + public cdr = inject(ChangeDetectorRef); + public pinColumn(col: ColumnType) { col.pin(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index e0ec1491026..38486d7722a 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts @@ -1,54 +1,17 @@ -import { - AfterContentInit, - AfterViewInit, - booleanAttribute, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - ElementRef, - EnvironmentInjector, - EventEmitter, - forwardRef, - Inject, - Injector, - Input, - IterableChangeRecord, - IterableDiffers, - LOCALE_ID, - NgZone, - OnChanges, - OnDestroy, - OnInit, - Output, - QueryList, - TemplateRef, - ViewContainerRef, - DOCUMENT -} from '@angular/core'; -import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; +import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, forwardRef, Input, IterableChangeRecord, OnChanges, OnDestroy, OnInit, Output, QueryList, TemplateRef, inject } from '@angular/core'; import { IgxFilteringService } from '../filtering/grid-filtering.service'; -import { IgxGridSummaryService } from '../summaries/grid-summary.service'; import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive'; -import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service'; import { IgxGridSelectionService } from '../selection/selection.service'; -import { IgxOverlayService } from '../../services/public_api'; import { first, filter, takeUntil, pluck } from 'rxjs/operators'; import { IgxColumnComponent } from '../columns/column.component'; import { ISearchInfo } from '../common/events'; import { IgxRowIslandAPIService } from './row-island-api.service'; -import { PlatformUtil } from '../../core/utils'; import { IForOfState } from '../../directives/for-of/for_of.directive'; -import { IgxColumnResizingService } from '../resizing/resizing.service'; -import { GridType, IGX_GRID_SERVICE_BASE, IgxGridPaginatorTemplateContext } from '../common/grid.interface'; +import { GridType, IgxGridPaginatorTemplateContext } from '../common/grid.interface'; import { IgxGridToolbarDirective, IgxGridToolbarTemplateContext } from '../toolbar/common'; import { IgxActionStripToken } from '../../action-strip/token'; import { IgxPaginatorDirective } from '../../paginator/paginator-interfaces'; -import { IgxFlatTransactionFactory } from '../../services/transaction/transaction-factory.service'; import { IGridCreatedEventArgs } from './events'; -import { IgxGridValidationService } from '../grid/grid-validation.service'; -import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; /* blazorCopyInheritedMembers */ @@ -84,6 +47,8 @@ import { IgxPaginatorComponent } from '../../paginator/paginator.component'; }) export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy { + public rowIslandAPI = inject(IgxRowIslandAPIService); + /* blazorSuppress */ /** @@ -372,52 +337,6 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective return lvl + 1; } - constructor( - validationService: IgxGridValidationService, - selectionService: IgxGridSelectionService, - colResizingService: IgxColumnResizingService, - @Inject(IGX_GRID_SERVICE_BASE) gridAPI: IgxHierarchicalGridAPIService, - transactionFactory: IgxFlatTransactionFactory, - elementRef: ElementRef, - zone: NgZone, - @Inject(DOCUMENT) document, - cdr: ChangeDetectorRef, - differs: IterableDiffers, - viewRef: ViewContainerRef, - injector: Injector, - envInjector: EnvironmentInjector, - navigation: IgxHierarchicalGridNavigationService, - filteringService: IgxFilteringService, - textHighlightService: IgxTextHighlightService, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - summaryService: IgxGridSummaryService, - public rowIslandAPI: IgxRowIslandAPIService, - @Inject(LOCALE_ID) localeId: string, - platform: PlatformUtil) { - super( - validationService, - selectionService, - colResizingService, - gridAPI, - transactionFactory, - elementRef, - zone, - document, - cdr, - differs, - viewRef, - injector, - envInjector, - navigation, - filteringService, - textHighlightService, - overlayService, - summaryService, - localeId, - platform - ); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts index 8e29373ea60..8b72a9cb99a 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts @@ -1,8 +1,7 @@ -import { Directive, OnDestroy, Input, ElementRef, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { Directive, OnDestroy, Input, inject } from '@angular/core'; import { IgxDragDirective } from '../../directives/drag-drop/drag-drop.directive'; import { Subscription, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { PlatformUtil } from '../../core/utils'; import { IgxColumnMovingService } from './moving.service'; import { ColumnType } from '../common/grid.interface'; @@ -15,6 +14,8 @@ import { ColumnType } from '../common/grid.interface'; standalone: true }) export class IgxColumnMovingDragDirective extends IgxDragDirective implements OnDestroy { + private cms = inject(IgxColumnMovingService); + @Input('igxColumnMovingDrag') public column: ColumnType; @@ -33,16 +34,8 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On private ghostImgIconGroupClass = 'igx-grid__drag-ghost-image-icon-group'; private columnSelectedClass = 'igx-grid-th--selected'; - constructor( - element: ElementRef, - viewContainer: ViewContainerRef, - zone: NgZone, - renderer: Renderer2, - cdr: ChangeDetectorRef, - private cms: IgxColumnMovingService, - _platformUtil: PlatformUtil, - ) { - super(cdr, element, viewContainer, zone, renderer, _platformUtil); + constructor() { + super(); this.ghostClass = this._ghostClass; } diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts index 82b537af38e..9be06be00a9 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, OnDestroy, ElementRef, Renderer2, NgZone } from '@angular/core'; +import { Directive, Input, OnDestroy, inject } from '@angular/core'; import { DropPosition, IgxColumnMovingService } from './moving.service'; import { Subject, interval, animationFrameScheduler } from 'rxjs'; import { IgxColumnMovingDragDirective } from './moving.drag.directive'; @@ -14,6 +14,8 @@ import { ColumnType } from '../common/grid.interface'; standalone: true }) export class IgxColumnMovingDropDirective extends IgxDropDirective implements OnDestroy { + private cms = inject(IgxColumnMovingService); + @Input('igxColumnMovingDrop') public override set data(val: ColumnType | IgxForOfDirective) { @@ -41,7 +43,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On } public get nativeElement() { - return this.ref.nativeElement; + return this.element.nativeElement; } private _dropPos: DropPosition; @@ -52,13 +54,8 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On private _dragLeave = new Subject(); private _dropIndicatorClass = 'igx-grid-th__drop-indicator--active'; - constructor( - private ref: ElementRef, - private renderer: Renderer2, - private _: NgZone, - private cms: IgxColumnMovingService - ) { - super(ref, renderer, _); + constructor() { + super(); } public override ngOnDestroy() { @@ -79,7 +76,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On this.cms.column.parent === this.column.parent) { if (this._lastDropIndicator) { - this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass); + this._renderer.removeClass(this._dropIndicator, this._dropIndicatorClass); } const clientRect = this.nativeElement.getBoundingClientRect(); @@ -95,7 +92,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On } if (this.cms.icon.innerText !== 'block') { - this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass); + this._renderer.addClass(this._dropIndicator, this._dropIndicatorClass); } } } @@ -147,7 +144,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On this.cms.icon.innerText = 'block'; if (this._dropIndicator) { - this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass); + this._renderer.removeClass(this._dropIndicator, this._dropIndicatorClass); } if (this.horizontalScroll) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts index 52ce5e82670..baab13ed725 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts @@ -1,14 +1,5 @@ import { useAnimation } from "@angular/animations"; -import { - ChangeDetectorRef, - Component, - EventEmitter, - HostBinding, - Input, - Output, - Renderer2, - booleanAttribute -} from "@angular/core"; +import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, Renderer2, booleanAttribute, inject } from "@angular/core"; import { first } from "rxjs/operators"; import { SortingDirection } from "../../data-operations/sorting-strategy"; import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxDragDirective, IgxDragHandleDirective } from "../../directives/drag-drop/drag-drop.directive"; @@ -47,7 +38,6 @@ import { IgxIconComponent } from "../../icon/icon.component"; import { IgxInputGroupComponent } from "../../input-group/input-group.component"; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; import { Size } from '../common/enums'; -import { GridColumnDataType } from '../../data-operations/data-util'; interface IDataSelectorPanel { name: string; @@ -88,6 +78,9 @@ interface IDataSelectorPanel { imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe] }) export class IgxPivotDataSelectorComponent { + private renderer = inject(Renderer2); + private cdr = inject(ChangeDetectorRef); + /** * Gets/sets whether the columns panel is expanded @@ -275,8 +268,6 @@ export class IgxPivotDataSelectorComponent { return this._grid?.pivotConfiguration.values || []; } - constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) { } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 54dc1023651..4f6a7137ae2 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -1,35 +1,4 @@ -import { - AfterContentInit, - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - ElementRef, - HostBinding, - Inject, - Input, - IterableDiffers, - LOCALE_ID, - NgZone, - OnInit, - Output, - Optional, - QueryList, - TemplateRef, - ViewChild, - ViewChildren, - ViewContainerRef, - Injector, - ContentChild, - createComponent, - EnvironmentInjector, - CUSTOM_ELEMENTS_SCHEMA, - booleanAttribute, - OnChanges, - SimpleChanges, - DOCUMENT -} from '@angular/core'; +import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ContentChild, createComponent, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnChanges, SimpleChanges, inject } from '@angular/core'; import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { first, take, takeUntil } from 'rxjs/operators'; @@ -69,12 +38,11 @@ import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from '. import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from '../filtering/excel-style/excel-style-filtering.component'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service'; -import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api'; -import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils'; +import { State, Transaction, TransactionService } from '../../services/public_api'; +import { cloneArray, resizeObservable } from '../../core/utils'; import { IgxPivotFilteringService } from './pivot-filtering.service'; import { DataUtil, GridColumnDataType } from '../../data-operations/data-util'; import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; -import { IgxGridTransaction } from '../common/types'; import { GridBaseAPIService } from '../api.service'; import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; @@ -99,7 +67,6 @@ import { IgxGridDragSelectDirective } from '../selection/drag-select.directive'; import { IgxGridBodyDirective } from '../grid.common'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operations/data-clone-strategy'; -import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; @@ -200,6 +167,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; }) export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit, PivotGridType, AfterViewInit, OnChanges { + public override navigation = inject(IgxPivotGridNavigationService); /** * Emitted when the dimension collection is changed via the grid chip area. @@ -1010,53 +978,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni return selectedRowIds; } - constructor( - validationService: IgxGridValidationService, - selectionService: IgxGridSelectionService, - colResizingService: IgxPivotColumnResizingService, - gridAPI: GridBaseAPIService, - transactionFactory: IgxFlatTransactionFactory, - elementRef: ElementRef, - zone: NgZone, - @Inject(DOCUMENT) document, - cdr: ChangeDetectorRef, - differs: IterableDiffers, - viewRef: ViewContainerRef, - injector: Injector, - envInjector: EnvironmentInjector, - public override navigation: IgxPivotGridNavigationService, - filteringService: IgxFilteringService, - textHighlightService: IgxTextHighlightService, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - summaryService: IgxGridSummaryService, - @Inject(LOCALE_ID) localeId: string, - platform: PlatformUtil, - @Optional() @Inject(IgxGridTransaction) _diTransactions?: TransactionService - ) { - super( - validationService, - selectionService, - colResizingService, - gridAPI, - transactionFactory, - elementRef, - zone, - document, - cdr, - differs, - viewRef, - injector, - envInjector, - navigation, - filteringService, - textHighlightService, - overlayService, - summaryService, - localeId, - platform, - _diTransactions); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.directives.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.directives.ts index c2e1555f39a..ffe5a513503 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.directives.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { IgxPivotGridValueTemplateContext } from './pivot-grid.interface'; import { IgxColumnTemplateContext } from '../common/grid.interface'; /** @@ -9,7 +9,8 @@ import { IgxColumnTemplateContext } from '../common/grid.interface'; standalone: true }) export class IgxPivotValueChipTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxPivotValueChipTemplateDirective, context: unknown): context is IgxPivotGridValueTemplateContext { return true; @@ -24,7 +25,8 @@ export class IgxPivotValueChipTemplateDirective { standalone: true }) export class IgxPivotRowDimensionHeaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxPivotRowDimensionHeaderTemplateDirective, context: unknown): context is IgxColumnTemplateContext { return true; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts index 4ea39ad1f90..1954d0e2c03 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; @@ -27,8 +27,8 @@ import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy'; standalone: true }) export class IgxPivotRowPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid?: PivotGridType) { } public transform( collection: any, @@ -131,8 +131,8 @@ export class IgxPivotAutoTransform implements PipeTransform { standalone: true }) export class IgxPivotRowExpansionPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid?: PivotGridType) { } public transform( collection: IPivotGridRecord[], @@ -188,7 +188,8 @@ export class IgxPivotRowExpansionPipe implements PipeTransform { standalone: true }) export class IgxPivotCellMergingPipe implements PipeTransform { - constructor(@Inject(IGX_GRID_BASE) private grid: PivotGridType) { } + private grid = inject(IGX_GRID_BASE); + public transform( collection: IPivotGridRecord[], config: IPivotConfiguration, @@ -241,7 +242,8 @@ export class IgxPivotCellMergingPipe implements PipeTransform { standalone: true }) export class IgxPivotGridHorizontalRowGrouping implements PipeTransform { - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } + private grid = inject(IGX_GRID_BASE); + public transform( collection: IPivotGridRecord[], config: IPivotConfiguration, @@ -281,7 +283,8 @@ export class IgxPivotGridHorizontalRowGrouping implements PipeTransform { standalone: true }) export class IgxPivotGridHorizontalRowCellMerging implements PipeTransform { - constructor(@Inject(IGX_GRID_BASE) private grid: PivotGridType) { } + private grid = inject(IGX_GRID_BASE); + public transform( collection: IPivotGridRecord[], config: IPivotConfiguration, @@ -395,7 +398,8 @@ export class IgxPivotColumnPipe implements PipeTransform { standalone: true }) export class IgxPivotGridFilterPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + private gridAPI = inject>(GridBaseAPIService); + public transform(collection: any[], config: IPivotConfiguration, filterStrategy: IFilteringStrategy, @@ -459,7 +463,8 @@ export class IgxPivotGridColumnSortingPipe implements PipeTransform { standalone: true }) export class IgxPivotGridSortingPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + private gridAPI = inject>(GridBaseAPIService); + public transform(collection: any[], config: IPivotConfiguration, sorting: IGridSortingStrategy, _pipeTrigger: number): any[] { let result: any[]; const allDimensions = config.rows || []; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index d2510db1ac2..6d1dd47a885 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -1,16 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Inject, - OnChanges, - QueryList, - Renderer2, - ViewChild, - SimpleChanges, - ViewChildren -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnChanges, QueryList, Renderer2, ViewChild, SimpleChanges, ViewChildren, inject } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent } from '../../chips/chip.component'; import { IgxChipsAreaComponent } from '../../chips/chips-area.component'; import { SortingDirection } from '../../data-operations/sorting-strategy'; @@ -38,7 +26,6 @@ import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component'; -import { GridColumnDataType } from '../../data-operations/data-util'; /** * @@ -61,6 +48,9 @@ import { GridColumnDataType } from '../../data-operations/data-util'; IgxPivotRowHeaderGroupComponent] }) export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implements OnChanges { + public override grid = inject(IGX_GRID_BASE); + protected renderer = inject(Renderer2); + public aggregateList: IPivotAggregator[] = []; public value: IPivotValue; @@ -134,15 +124,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem return this.headerContainers?.last; } - constructor( - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - ref: ElementRef, - cdr: ChangeDetectorRef, - protected renderer: Renderer2 - ) { - super(ref, cdr); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts index 619813d19c2..b5ae4443f8b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts @@ -1,22 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - createComponent, - ElementRef, - EnvironmentInjector, - HostBinding, - Inject, - Injector, - Input, - OnChanges, - QueryList, - SimpleChanges, - TemplateRef, - ViewChild, - ViewChildren, - ViewContainerRef -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, createComponent, EnvironmentInjector, HostBinding, Injector, Input, OnChanges, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core'; import { IgxColumnComponent } from '../columns/column.component'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; @@ -43,6 +25,11 @@ import { IMultiRowLayoutNode } from '../common/types'; imports: [IgxPivotRowDimensionHeaderGroupComponent, NgClass, NgStyle, IgxIconComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] }) export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent implements OnChanges { + public override grid = inject(IGX_GRID_BASE); + protected injector = inject(Injector); + protected envInjector = inject(EnvironmentInjector); + protected viewRef = inject(ViewContainerRef); + @HostBinding('style.grid-row-start') public get rowStart(): string { return this.layout ? `${this.layout.rowStart}` : ""; @@ -104,17 +91,6 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon @ViewChildren(IgxPivotRowDimensionHeaderGroupComponent) public headerGroups: QueryList - constructor( - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - ref: ElementRef, - protected injector: Injector, - protected envInjector: EnvironmentInjector, - cdr: ChangeDetectorRef, - protected viewRef: ViewContainerRef - ) { - super(ref, cdr); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts index 1687303b5dd..9d056826770 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts @@ -1,8 +1,6 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, NgZone, ViewChild } from '@angular/core'; -import { PlatformUtil } from '../../core/utils'; +import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, NgZone, ViewChild, inject } from '@angular/core'; import { IgxColumnComponent } from '../columns/column.component'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; -import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component'; import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service'; import { IPivotDimension, PivotRowHeaderGroupType } from './pivot-grid.interface'; @@ -25,6 +23,9 @@ import { IMultiRowLayoutNode } from '../common/types'; imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] }) export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { + public override grid = inject(IGX_GRID_BASE); + public override colResizingService = inject(IgxPivotColumnResizingService); + protected zone = inject(NgZone); /** * @hidden @@ -32,16 +33,6 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup @HostBinding('style.user-select') public userSelect = 'none'; - constructor(private cdRef: ChangeDetectorRef, - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - private elementRef: ElementRef, - public override colResizingService: IgxPivotColumnResizingService, - filteringService: IgxFilteringService, - platform: PlatformUtil, - protected zone: NgZone) { - super(cdRef, grid, elementRef, colResizingService, filteringService, platform); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts index afd14656238..f71db298c38 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts @@ -1,6 +1,6 @@ -import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Inject } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostListener, inject } from '@angular/core'; -import { GridType, IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; +import { PivotGridType } from '../common/grid.interface'; import { IgxGridHeaderComponent } from '../headers/grid-header.component'; import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service'; @@ -22,16 +22,14 @@ import { PivotUtil } from './pivot-util'; imports: [IgxIconComponent, NgTemplateOutlet, NgClass, SortingIndexPipe] }) export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent implements AfterViewInit { + public override colResizingService = inject(IgxPivotColumnResizingService); + public refInstance = inject(ElementRef); + private pivotGrid: PivotGridType; - constructor( - @Inject(IGX_GRID_BASE) grid: GridType, - public override colResizingService: IgxPivotColumnResizingService, - cdr: ChangeDetectorRef, - public refInstance: ElementRef - ) { - super(grid, colResizingService, cdr, refInstance); - + constructor() { + super(); + this.pivotGrid = this.grid as PivotGridType; this.pivotGrid.dimensionsSortingExpressionsChange .pipe(takeUntil(this._destroy$)) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts index 335008b8de8..aaecd484b3d 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts @@ -1,17 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EnvironmentInjector, - HostBinding, - Inject, - Injector, - Input, - QueryList, - ViewChildren, - ViewContainerRef -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, EnvironmentInjector, HostBinding, Injector, Input, QueryList, ViewChildren, ViewContainerRef, inject } from '@angular/core'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; import { IPivotDimension, IPivotDimensionData, IPivotGridHorizontalGroup, IPivotGridRecord } from './pivot-grid.interface'; @@ -34,6 +21,11 @@ import { PivotUtil } from './pivot-util'; imports: [IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging] }) export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent { + public override grid = inject(IGX_GRID_BASE); + protected injector = inject(Injector); + protected envInjector = inject(EnvironmentInjector); + protected viewRef = inject(ViewContainerRef); + @HostBinding('class.igx-grid__tbody-pivot-dimension') public pivotDim = true; @@ -75,17 +67,6 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone @ViewChildren(IgxPivotRowDimensionContentComponent) public contentCells: QueryList - constructor( - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - ref: ElementRef, - protected injector: Injector, - protected envInjector: EnvironmentInjector, - cdr: ChangeDetectorRef, - protected viewRef: ViewContainerRef - ) { - super(ref, cdr); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts index 4af9f47c472..af32f31b181 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts @@ -1,7 +1,5 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, ViewChild } from '@angular/core'; -import { PlatformUtil } from '../../core/utils'; +import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewChild, inject } from '@angular/core'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; -import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component'; import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service'; import { IPivotDimension, PivotRowHeaderGroupType } from './pivot-grid.interface'; @@ -24,6 +22,8 @@ import { SortingDirection } from '../../data-operations/sorting-strategy'; imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] }) export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { + public override grid = inject(IGX_GRID_BASE); + public override colResizingService = inject(IgxPivotColumnResizingService); /** * @hidden @@ -31,16 +31,6 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent @HostBinding('style.user-select') public userSelect = 'none'; - constructor(private cdRef: ChangeDetectorRef, - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - private elementRef: ElementRef, - public override colResizingService: IgxPivotColumnResizingService, - filteringService: IgxFilteringService, - platform: PlatformUtil, - protected zone: NgZone) { - super(cdRef, grid, elementRef, colResizingService, filteringService, platform); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts index 2e213e62d0c..77af5d20b84 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts @@ -1,15 +1,7 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - forwardRef, - HostBinding, Inject, Input, ViewContainerRef -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, forwardRef, HostBinding, Input, ViewContainerRef, inject } from '@angular/core'; import { IgxColumnComponent } from '../columns/column.component'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; import { IgxRowDirective } from '../row.directive'; -import { IgxGridSelectionService } from '../selection/selection.service'; import { IPivotGridColumn, IPivotGridRecord } from './pivot-grid.interface'; import { PivotUtil } from './pivot-util'; import { IgxPivotGridCellStyleClassesPipe } from './pivot-grid.pipes'; @@ -27,6 +19,9 @@ import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive' imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe] }) export class IgxPivotRowComponent extends IgxRowDirective { + public override grid = inject(IGX_GRID_BASE); + protected viewRef = inject(ViewContainerRef); + /** * @hidden */ @@ -43,16 +38,6 @@ export class IgxPivotRowComponent extends IgxRowDirective { return isSelected; } - constructor( - @Inject(IGX_GRID_BASE) public override grid: PivotGridType, - selectionService: IgxGridSelectionService, - element: ElementRef, - cdr: ChangeDetectorRef, - protected viewRef: ViewContainerRef - ) { - super(grid, selectionService, element, cdr); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts index cd73c2360ed..300697275d1 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts @@ -3,7 +3,7 @@ import { DataUtil, GridColumnDataType } from '../../data-operations/data-util'; import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { ISortingExpression } from '../../data-operations/sorting-strategy'; -import { ColumnType, PivotGridType } from '../common/grid.interface'; +import { PivotGridType } from '../common/grid.interface'; import { IGridSortingStrategy, IgxSorting } from '../common/strategy'; import { IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotNumericAggregate, IgxPivotTimeAggregate } from './pivot-grid-aggregate'; import { IPivotAggregator, IPivotConfiguration, IPivotDimension, IPivotGridRecord, IPivotKeys, IPivotValue, PivotDimensionType, PivotSummaryPosition } from './pivot-grid.interface'; diff --git a/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resize-handle.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resize-handle.directive.ts index 9d31dd7fe98..7acc6bfd929 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resize-handle.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resize-handle.directive.ts @@ -1,9 +1,4 @@ -import { - Directive, - ElementRef, - Input, - NgZone -} from '@angular/core'; +import { Directive, Input, inject } from '@angular/core'; import { ColumnType } from '../../common/grid.interface'; import { PivotRowHeaderGroupType } from '../../pivot-grid/pivot-grid.interface'; import { IgxPivotColumnResizingService } from './pivot-resizing.service' @@ -18,6 +13,8 @@ import { IgxResizeHandleDirective } from '../resize-handle.directive'; standalone: true }) export class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective { + public override colResizingService = inject(IgxPivotColumnResizingService); + /** * @hidden @@ -37,12 +34,6 @@ export class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective { @Input('igxPivotResizeHandleHeader') public rowHeaderGroup: PivotRowHeaderGroupType; - constructor(zone: NgZone, - element: ElementRef, - public override colResizingService: IgxPivotColumnResizingService) { - super(zone, element, colResizingService); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resizer.component.ts b/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resizer.component.ts index 47347a1f00c..d4ca1f30f9e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resizer.component.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resizer.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { IgxGridColumnResizerComponent } from '../resizer.component'; import { IgxPivotColumnResizingService } from './pivot-resizing.service'; import { IgxColumnResizerDirective } from '../resizer.directive'; @@ -10,7 +10,5 @@ import { IgxColumnResizerDirective } from '../resizer.directive'; imports: [IgxColumnResizerDirective] }) export class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent { - constructor(public override colResizingService: IgxPivotColumnResizingService) { - super(colResizingService); - } + public override colResizingService = inject(IgxPivotColumnResizingService); } diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts index f942f82318e..e8386142bc3 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts @@ -1,12 +1,4 @@ -import { - AfterViewInit, - Directive, - ElementRef, - Input, - NgZone, - HostListener, - OnDestroy -} from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, Input, NgZone, HostListener, OnDestroy, inject } from '@angular/core'; import { Subject, fromEvent } from 'rxjs'; import { debounceTime, takeUntil } from 'rxjs/operators'; import { ColumnType } from '../common/grid.interface'; @@ -22,6 +14,10 @@ import { IgxColumnResizingService } from './resizing.service'; standalone: true }) export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy { + protected zone = inject(NgZone); + protected element = inject(ElementRef); + public colResizingService = inject(IgxColumnResizingService); + /** * @hidden @@ -41,10 +37,6 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy { private readonly DEBOUNCE_TIME = 200; - constructor(protected zone: NgZone, - protected element: ElementRef, - public colResizingService: IgxColumnResizingService) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts index 5987715f3a6..b2e760491f0 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, ViewChild, inject } from '@angular/core'; import { IgxColumnResizingService } from './resizing.service'; import { IgxColumnResizerDirective } from './resizer.directive'; @@ -9,11 +9,11 @@ import { IgxColumnResizerDirective } from './resizer.directive'; imports: [IgxColumnResizerDirective] }) export class IgxGridColumnResizerComponent { + public colResizingService = inject(IgxColumnResizingService); + @Input() public restrictResizerTop: number; @ViewChild(IgxColumnResizerDirective, { static: true }) public resizer: IgxColumnResizerDirective; - - constructor(public colResizingService: IgxColumnResizingService) { } } diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts index bc8fb44b1ca..8f49b18dd48 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -1,14 +1,4 @@ -import { - Directive, - ElementRef, - Inject, - Input, - NgZone, - Output, - OnInit, - OnDestroy, - DOCUMENT -} from '@angular/core'; +import { Directive, ElementRef, Input, NgZone, Output, OnInit, OnDestroy, DOCUMENT, inject } from '@angular/core'; import { Subject, fromEvent, animationFrameScheduler, interval } from 'rxjs'; import { map, switchMap, takeUntil, throttle } from 'rxjs/operators'; @@ -21,6 +11,10 @@ import { map, switchMap, takeUntil, throttle } from 'rxjs/operators'; standalone: true }) export class IgxColumnResizerDirective implements OnInit, OnDestroy { + public element = inject>(ElementRef); + public document = inject(DOCUMENT); + public zone = inject(NgZone); + @Input() public restrictHResizeMin: number = Number.MIN_SAFE_INTEGER; @@ -48,11 +42,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { return this._ratio; } - constructor( - public element: ElementRef, - @Inject(DOCUMENT) public document, - public zone: NgZone - ) { + constructor() { this.resizeStart.pipe( takeUntil(this._destroy), diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index b4106c80ede..af84f06c9ad 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -1,4 +1,4 @@ -import { Injectable, NgZone } from '@angular/core'; +import { Injectable, NgZone, inject } from '@angular/core'; import { ColumnType } from '../common/grid.interface'; /** @@ -7,6 +7,8 @@ import { ColumnType } from '../common/grid.interface'; */ @Injectable() export class IgxColumnResizingService { + private zone = inject(NgZone); + /** * @hidden @@ -29,8 +31,6 @@ export class IgxColumnResizingService { */ public column: ColumnType; - constructor(private zone: NgZone) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts index e611ee562ff..7e39b2acff7 100644 --- a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, OnDestroy, TemplateRef } from '@angular/core'; +import { Directive, Input, OnDestroy, TemplateRef, inject } from '@angular/core'; import { fromEvent, Subscription } from 'rxjs'; import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive'; import { IRowDragStartEventArgs, IRowDragEndEventArgs } from './common/events'; @@ -188,7 +188,8 @@ export class IgxDragIndicatorIconDirective { standalone: true }) export class IgxRowDragGhostDirective { - constructor(public templateRef: TemplateRef) { } + public templateRef = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxRowDragGhostDirective, context: unknown): context is IgxGridRowDragGhostContext { return true; diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts index b2118b1f15e..03172416c78 100644 --- a/projects/igniteui-angular/src/lib/grids/row.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts @@ -1,22 +1,4 @@ -import { - AfterViewInit, - booleanAttribute, - ChangeDetectorRef, - Directive, - DoCheck, - ElementRef, - EventEmitter, - forwardRef, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - Output, - QueryList, - ViewChild, - ViewChildren -} from '@angular/core'; +import { AfterViewInit, booleanAttribute, ChangeDetectorRef, Directive, DoCheck, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, OnDestroy, Output, QueryList, ViewChild, ViewChildren, inject } from '@angular/core'; import { IgxCheckboxComponent } from '../checkbox/checkbox.component'; import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive'; import { TransactionType } from '../services/transaction/transaction'; @@ -33,6 +15,11 @@ import { trackByIdentity } from '../core/utils'; standalone: true }) export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { + public grid = inject(IGX_GRID_BASE); + public selectionService = inject(IgxGridSelectionService); + public element = inject>(ElementRef); + public cdr = inject(ChangeDetectorRef); + /** * @hidden */ @@ -375,12 +362,6 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { protected _data: any; protected _addRow: boolean; - constructor( - @Inject(IGX_GRID_BASE) public grid: GridType, - public selectionService: IgxGridSelectionService, - public element: ElementRef, - public cdr: ChangeDetectorRef) { } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/selection/drag-select.directive.ts b/projects/igniteui-angular/src/lib/grids/selection/drag-select.directive.ts index 11ca40a9dfb..9aa941f4141 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/drag-select.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/drag-select.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, Output, EventEmitter, ElementRef, OnDestroy, NgZone, OnInit, booleanAttribute } from '@angular/core'; +import { Directive, Input, Output, EventEmitter, ElementRef, OnDestroy, NgZone, OnInit, booleanAttribute, inject } from '@angular/core'; import { interval, Observable, Subscription, Subject, animationFrameScheduler } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -24,6 +24,9 @@ enum DragScrollDirection { standalone: true }) export class IgxGridDragSelectDirective implements OnInit, OnDestroy { + private ref = inject>(ElementRef); + private zone = inject(NgZone); + @Output() public dragStop = new EventEmitter(); @@ -54,7 +57,7 @@ export class IgxGridDragSelectDirective implements OnInit, OnDestroy { private _activeDrag: boolean; - constructor(private ref: ElementRef, private zone: NgZone) { + constructor() { this._interval$ = interval(0, animationFrameScheduler).pipe( takeUntil(this.end$), filter(() => this.activeDrag) diff --git a/projects/igniteui-angular/src/lib/grids/selection/row-selectors.ts b/projects/igniteui-angular/src/lib/grids/selection/row-selectors.ts index 2b24560ef71..81dac7d8be0 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/row-selectors.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/row-selectors.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { IgxHeadSelectorTemplateContext, IgxGroupByRowSelectorTemplateContext, IgxRowSelectorTemplateContext } from '../common/grid.interface'; /** @@ -10,7 +10,8 @@ import { IgxHeadSelectorTemplateContext, IgxGroupByRowSelectorTemplateContext, I standalone: true }) export class IgxRowSelectorDirective { - constructor(public templateRef: TemplateRef) { } + public templateRef = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxRowSelectorDirective, context: unknown): context is IgxRowSelectorTemplateContext { @@ -27,7 +28,8 @@ export class IgxRowSelectorDirective { standalone: true }) export class IgxGroupByRowSelectorDirective { - constructor(public templateRef: TemplateRef) { } + public templateRef = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxGroupByRowSelectorDirective, context: unknown): context is IgxGroupByRowSelectorTemplateContext { @@ -44,7 +46,8 @@ export class IgxGroupByRowSelectorDirective { standalone: true }) export class IgxHeadSelectorDirective { - constructor(public templateRef: TemplateRef) { } + public templateRef = inject>(TemplateRef); + public static ngTemplateContextGuard(_directive: IgxHeadSelectorDirective, context: unknown): context is IgxHeadSelectorTemplateContext { diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index 83287824d16..75028ba2ccd 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts @@ -1,4 +1,4 @@ -import { EventEmitter, Injectable, NgZone } from '@angular/core'; +import { EventEmitter, Injectable, NgZone, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { PlatformUtil } from '../../core/utils'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; @@ -18,6 +18,9 @@ import { PivotUtil } from '../pivot-grid/pivot-util'; @Injectable() export class IgxGridSelectionService { + private zone = inject(NgZone); + protected platform = inject(PlatformUtil); + public grid: GridType; public dragMode = false; public activeElement: ISelectionNode | null; @@ -73,7 +76,7 @@ export class IgxGridSelectionService { this.pointerState.primaryButton = value; } - constructor(private zone: NgZone, protected platform: PlatformUtil) { + constructor() { this.initPointerState(); this.initKeyboardState(); this.initColumnsState(); diff --git a/projects/igniteui-angular/src/lib/grids/state-base.directive.ts b/projects/igniteui-angular/src/lib/grids/state-base.directive.ts index 2dfb9669d6b..f23c1958ad6 100644 --- a/projects/igniteui-angular/src/lib/grids/state-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state-base.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Optional, Input, Host, ViewContainerRef, Inject, createComponent, EnvironmentInjector, Injector } from '@angular/core'; +import { Directive, Input, ViewContainerRef, createComponent, EnvironmentInjector, Injector, inject } from '@angular/core'; import { IExpressionTree, IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; import { IgxColumnComponent } from './columns/column.component'; import { IgxColumnGroupComponent } from './columns/column-group.component'; @@ -121,6 +121,11 @@ interface Feature { /* blazorIndirectRender */ @Directive() export class IgxGridStateBaseDirective { + public grid = inject(IGX_GRID_BASE, { host: true, optional: true }); + protected viewRef = inject(ViewContainerRef); + protected envInjector = inject(EnvironmentInjector); + protected injector = inject(Injector); + private featureKeys: GridFeatures[] = []; private state: IGridState; @@ -499,13 +504,6 @@ export class IgxGridStateBaseDirective { } } - /** - * @hidden - */ - constructor( - @Host() @Optional() @Inject(IGX_GRID_BASE) public grid: GridType, - protected viewRef: ViewContainerRef, protected envInjector: EnvironmentInjector, protected injector: Injector) { } - /** * Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. * diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe.ts index ddb9dc99f2e..796b960c130 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; @Pipe({ @@ -6,8 +6,8 @@ import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; standalone: true }) export class IgxSummaryDataPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } // eslint-disable-next-line @typescript-eslint/no-unused-vars public transform(id: string, trigger = 0) { diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts index 8f4da37f72e..7c230332b29 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute } from '@angular/core'; +import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute, inject } from '@angular/core'; import { IgxSummaryOperand, IgxSummaryResult @@ -16,6 +16,8 @@ import { trackByIdentity } from '../../core/utils'; imports: [NgTemplateOutlet] }) export class IgxSummaryCellComponent { + private element = inject(ElementRef); + @Input() public summaryResults: IgxSummaryResult[]; @@ -44,9 +46,6 @@ export class IgxSummaryCellComponent { @HostBinding('attr.data-rowIndex') public rowIndex: number; - constructor(private element: ElementRef) { - } - @HostBinding('attr.data-visibleIndex') public get visibleColumnIndex(): number { return this.column.visibleIndex; diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts index 6628188091d..35da4839295 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts @@ -1,16 +1,4 @@ -import { - Component, - Input, - ViewChildren, - QueryList, - HostBinding, - ViewChild, - ElementRef, - ChangeDetectionStrategy, - ChangeDetectorRef, - DoCheck, - Inject -} from '@angular/core'; +import { Component, Input, ViewChildren, QueryList, HostBinding, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, inject } from '@angular/core'; import { IgxSummaryResult } from './grid-summary'; import { IgxSummaryCellComponent } from './summary-cell.component'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; @@ -29,6 +17,10 @@ import { trackByIdentity } from '../../core/utils'; imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe] }) export class IgxSummaryRowComponent implements DoCheck { + public grid = inject(IGX_GRID_BASE); + public element = inject>(ElementRef); + public cdr = inject(ChangeDetectorRef); + @Input() public summaries: Map; @@ -71,10 +63,6 @@ export class IgxSummaryRowComponent implements DoCheck { @ViewChild('igxDirRef', { read: IgxGridForOfDirective }) public virtDirRow: IgxGridForOfDirective; - constructor(@Inject(IGX_GRID_BASE) public grid: GridType, - public element: ElementRef, - public cdr: ChangeDetectorRef) {} - public ngDoCheck() { this.cdr.markForCheck(); } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/common.ts b/projects/igniteui-angular/src/lib/grids/toolbar/common.ts index ebb2f964554..c844644cb86 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/common.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/common.ts @@ -1,4 +1,4 @@ -import { Component, Directive, HostBinding, TemplateRef } from '@angular/core'; +import { Component, Directive, HostBinding, TemplateRef, inject } from '@angular/core'; import { GridType } from '../common/grid.interface'; @Directive({ @@ -86,7 +86,8 @@ export interface IgxGridToolbarTemplateContext { standalone: true }) export class IgxGridToolbarDirective { - constructor(public template: TemplateRef) {} + public template = inject>(TemplateRef); + public static ngTemplateContextGuard(_dir: IgxGridToolbarDirective, ctx: unknown): ctx is IgxGridToolbarTemplateContext { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index bac31fe0015..3a30c32b487 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { IgxToolbarToken } from './token'; import { OverlaySettings } from '../../services/overlay/utilities'; import { IgxIconComponent } from '../../icon/icon.component'; @@ -32,6 +32,8 @@ import { isTree } from '../../data-operations/expressions-tree-util'; imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { + private toolbar = inject(IgxToolbarToken); + protected numberOfColumns: number; /** * Returns the grid containing this component. @@ -44,8 +46,6 @@ export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { @Input() public overlaySettings: OverlaySettings; - constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts index f2b63fd0f65..4abf5972373 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, Inject, booleanAttribute } from '@angular/core'; +import { Component, Input, Output, EventEmitter, booleanAttribute, inject } from '@angular/core'; import { first } from 'rxjs/operators'; import { BaseToolbarDirective } from './grid-toolbar.base'; import { IgxExcelTextDirective, IgxCSVTextDirective } from './common'; @@ -12,7 +12,6 @@ import { } from '../../services/public_api'; import { IgxToggleDirective } from '../../directives/toggle/toggle.directive'; import { GridType } from '../common/grid.interface'; -import { IgxToolbarToken } from './token'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; import { IgxButtonDirective } from '../../directives/button/button.directive'; @@ -53,6 +52,9 @@ export interface IgxExporterEvent { imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective] }) export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { + private excelExporter = inject(IgxExcelExporterService); + private csvExporter = inject(IgxCsvExporterService); + /** * Show entry for CSV export. @@ -90,14 +92,6 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { */ protected isExporting = false; - constructor( - @Inject(IgxToolbarToken) toolbar: IgxToolbarToken, - private excelExporter: IgxExcelExporterService, - private csvExporter: IgxCsvExporterService, - ) { - super(toolbar); - } - protected exportClicked(type: 'excel' | 'csv', toggleRef?: IgxToggleDirective) { toggleRef?.close(); this.export(type); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index cb3a3c69c9a..d7d1fca20d8 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -1,4 +1,4 @@ -import { Directive, Input, EventEmitter, OnDestroy, Output, Inject, booleanAttribute } from '@angular/core'; +import { Directive, Input, EventEmitter, OnDestroy, Output, booleanAttribute, inject } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { first, takeUntil } from 'rxjs/operators'; @@ -22,6 +22,8 @@ import { ConnectedPositioningStrategy } from '../../services/overlay/position/co */ @Directive() export abstract class BaseToolbarDirective implements OnDestroy { + protected toolbar = inject(IgxToolbarToken); + /** * Sets the height of the column list in the dropdown. */ @@ -108,8 +110,6 @@ export abstract class BaseToolbarDirective implements OnDestroy { return this.toolbar.grid; } - constructor(@Inject(IgxToolbarToken) protected toolbar: IgxToolbarToken) { } - /** @hidden @internal **/ public ngOnDestroy() { this.$destroy.next(); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts index 877ab3f9f1d..296edfb88fd 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts @@ -1,13 +1,4 @@ -import { - Component, - ContentChild, - ElementRef, - HostBinding, - Inject, - Input, - OnDestroy, - booleanAttribute -} from '@angular/core'; +import { Component, ContentChild, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute, inject } from '@angular/core'; import { Subscription } from 'rxjs'; import { IgxIconService } from '../../icon/icon.service'; import { pinLeft, unpinLeft } from '@igniteui/material-icons-extended'; @@ -41,6 +32,10 @@ import { NgTemplateOutlet } from '@angular/common'; imports: [IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, NgTemplateOutlet, IgxLinearProgressBarComponent] }) export class IgxGridToolbarComponent implements OnDestroy { + private api = inject(IGX_GRID_SERVICE_BASE); + private iconService = inject(IgxIconService); + private element = inject>(ElementRef); + /** * When enabled, shows the indeterminate progress bar. @@ -96,11 +91,7 @@ export class IgxGridToolbarComponent implements OnDestroy { protected _grid: GridType; protected sub: Subscription; - constructor( - @Inject(IGX_GRID_SERVICE_BASE) private api: GridServiceType, - private iconService: IgxIconService, - private element: ElementRef - ) { + constructor() { this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons'); this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons'); } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index 30f413e00e4..b2ecf4d5de9 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -1,29 +1,4 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - Input, - OnInit, - TemplateRef, - ContentChild, - AfterContentInit, - ViewChild, - DoCheck, - AfterViewInit, - ElementRef, - NgZone, - Inject, - ChangeDetectorRef, - IterableDiffers, - ViewContainerRef, - Optional, - LOCALE_ID, - Injector, - EnvironmentInjector, - CUSTOM_ELEMENTS_SCHEMA, - booleanAttribute, - DOCUMENT -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, TemplateRef, ContentChild, AfterContentInit, ViewChild, DoCheck, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, inject } from '@angular/core'; import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; @@ -40,12 +15,12 @@ import { import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxGridSummaryService } from '../summaries/grid-summary.service'; import { IgxGridSelectionService } from '../selection/selection.service'; -import { mergeObjects, PlatformUtil } from '../../core/utils'; +import { mergeObjects } from '../../core/utils'; import { first, takeUntil } from 'rxjs/operators'; import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'; import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service'; import { IgxGridNavigationService } from '../grid-navigation.service'; -import { CellType, GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface'; +import { CellType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface'; import { IgxColumnComponent } from '../columns/column.component'; import { IgxTreeGridSelectionService } from './tree-grid-selection.service'; import { GridSelectionMode } from '../common/enums'; @@ -53,10 +28,8 @@ import { IgxSummaryRow, IgxTreeGridRow } from '../grid-public-row'; import { IgxGridCRUDService } from '../common/crud.service'; import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component'; import { IgxGridCell } from '../grid-public-cell'; -import { IgxHierarchicalTransactionFactory } from '../../services/transaction/transaction-factory.service'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { HierarchicalTransactionService } from '../../services/transaction/hierarchical-transaction'; -import { IgxOverlayService } from '../../services/overlay/overlay'; import { IgxGridTransaction } from '../common/types'; import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy'; import { IgxGridValidationService } from '../grid/grid-validation.service'; @@ -81,7 +54,6 @@ import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; import { IgxGridDragSelectDirective } from '../selection/drag-select.directive'; import { IgxGridBodyDirective } from '../grid.common'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; -import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; let NEXT_ID = 0; @@ -173,6 +145,8 @@ let NEXT_ID = 0; schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, AfterViewInit, DoCheck, AfterContentInit { + protected override _diTransactions = inject>(IgxGridTransaction, { optional: true, }); + /** * Sets the child data key of the `IgxTreeGridComponent`. * ```html @@ -352,7 +326,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy private _rowLoadingIndicatorTemplate: TemplateRef; private _expansionDepth = Infinity; - /* treatAsRef */ + /* treatAsRef */ /** * Gets/Sets the array of data that populates the component. * ```html @@ -366,7 +340,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy return this._data; } - /* treatAsRef */ + /* treatAsRef */ public set data(value: any[] | null) { const oldData = this._data; this._data = value || []; @@ -447,56 +421,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // return this.gridAPI as IgxTreeGridAPIService; // } - constructor( - validationService: IgxGridValidationService, - selectionService: IgxGridSelectionService, - colResizingService: IgxColumnResizingService, - @Inject(IGX_GRID_SERVICE_BASE) gridAPI: GridServiceType, - // public gridAPI: GridBaseAPIService, - transactionFactory: IgxHierarchicalTransactionFactory, - _elementRef: ElementRef, - _zone: NgZone, - @Inject(DOCUMENT) document: any, - cdr: ChangeDetectorRef, - differs: IterableDiffers, - viewRef: ViewContainerRef, - injector: Injector, - envInjector: EnvironmentInjector, - navigation: IgxGridNavigationService, - filteringService: IgxFilteringService, - textHighlightService: IgxTextHighlightService, - @Inject(IgxOverlayService) overlayService: IgxOverlayService, - summaryService: IgxGridSummaryService, - @Inject(LOCALE_ID) localeId: string, - platform: PlatformUtil, - @Optional() @Inject(IgxGridTransaction) protected override _diTransactions?: - HierarchicalTransactionService, - ) { - super( - validationService, - selectionService, - colResizingService, - gridAPI, - transactionFactory, - _elementRef, - _zone, - document, - cdr, - differs, - viewRef, - injector, - envInjector, - navigation, - filteringService, - textHighlightService, - overlayService, - summaryService, - localeId, - platform, - _diTransactions, - ); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.directives.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.directives.ts index e66ffb45905..df9876f6e4a 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.directives.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; /** * @hidden @@ -8,6 +8,5 @@ import { Directive, TemplateRef } from '@angular/core'; standalone: true }) export class IgxRowLoadingIndicatorTemplateDirective { - - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts index 8d8a6341c79..2abe42318e3 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { IFilteringStrategy } from '../../data-operations/filtering-strategy'; import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IFilteringState } from '../../data-operations/filtering-state.interface'; @@ -12,8 +12,8 @@ import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy'; standalone: true }) export class IgxTreeGridFilteringPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {} public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, filterStrategy: IFilteringStrategy, diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 319724f9538..de02dc6d140 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { cloneArray, cloneHierarchicalArray } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; import { ITreeGridRecord } from './tree-grid.interfaces'; @@ -17,8 +17,8 @@ import { IGroupingExpression } from '../../data-operations/grouping-expression.i standalone: true }) export class IgxTreeGridHierarchizingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], primaryKey: string, foreignKey: string, childDataKey: string, _: number): ITreeGridRecord[] { let hierarchicalRecords: ITreeGridRecord[] = []; @@ -134,8 +134,8 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform { standalone: true }) export class IgxTreeGridFlatteningPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: ITreeGridRecord[], expandedLevels: number, expandedStates: Map, _: number): any[] { @@ -186,8 +186,8 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform { standalone: true }) export class IgxTreeGridSortingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform( hierarchicalData: ITreeGridRecord[], @@ -228,8 +228,8 @@ export class IgxTreeGridSortingPipe implements PipeTransform { standalone: true }) export class IgxTreeGridPagingPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: ITreeGridRecord[], enabled: boolean, page = 0, perPage = 15, _: number): ITreeGridRecord[] { if (!enabled || this.grid.pagingMode !== 'local') { @@ -257,10 +257,9 @@ export class IgxTreeGridPagingPipe implements PipeTransform { standalone: true }) export class IgxTreeGridTransactionPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } - public transform(collection: any[], _: number): any[] { if (this.grid.transactions.enabled) { @@ -304,8 +303,8 @@ export class IgxTreeGridTransactionPipe implements PipeTransform { standalone: true }) export class IgxTreeGridNormalizeRecordsPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(_: any[], __: number): any[] { const primaryKey = this.grid.primaryKey; @@ -327,8 +326,8 @@ export class IgxTreeGridNormalizeRecordsPipe implements PipeTransform { standalone: true }) export class IgxTreeGridAddRowPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any, isPinned = false, _pipeTrigger: number) { if (!this.grid.rowEditable || !this.grid.crudService.row || !this.grid.crudService.row.isAddRow || diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts index 54bb4acb800..2bad06947da 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { ITreeGridRecord } from './tree-grid.interfaces'; import { ISummaryRecord } from '../summaries/grid-summary'; import { GridSummaryCalculationMode, GridSummaryPosition } from '../common/enums'; @@ -10,8 +10,8 @@ import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; standalone: true }) export class IgxTreeGridSummaryPipe implements PipeTransform { + private grid = inject(IGX_GRID_BASE); - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {} public transform(flatData: ITreeGridRecord[], hasSummary: boolean, diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index dbd531ce68a..55ece2a58eb 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -1,14 +1,4 @@ -import { - Component, - ElementRef, - HostBinding, - Input, - OnInit, - OnDestroy, - OnChanges, - ChangeDetectorRef, - booleanAttribute, -} from "@angular/core"; +import { Component, ElementRef, HostBinding, Input, OnInit, OnDestroy, OnChanges, ChangeDetectorRef, booleanAttribute, inject } from "@angular/core"; import { IgxIconService } from "./icon.service"; import type { IconReference } from "./types"; import { filter, takeUntil } from "rxjs/operators"; @@ -42,6 +32,10 @@ import { SafeHtml } from "@angular/platform-browser"; templateUrl: "icon.component.html", }) export class IgxIconComponent implements OnInit, OnChanges, OnDestroy { + public el = inject(ElementRef); + private iconService = inject(IgxIconService); + private ref = inject(ChangeDetectorRef); + private _iconRef: IconReference; private _destroy$ = new Subject(); private _userClasses = new Set(); @@ -113,11 +107,7 @@ export class IgxIconComponent implements OnInit, OnChanges, OnDestroy { @Input({ transform: booleanAttribute }) public active = true; - constructor( - public el: ElementRef, - private iconService: IgxIconService, - private ref: ChangeDetectorRef, - ) { + constructor() { this.family = this.iconService.defaultFamily.name; this.iconService.iconLoaded diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts index bc891edaf02..a14558dd967 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts @@ -276,9 +276,11 @@ class IconRefComponent { } imports: [IgxIconComponent] }) class IconWithThemeTokenComponent { + public iconService = inject(IgxIconService); + public themeToken = inject(THEME_TOKEN); - constructor(public iconService: IgxIconService) { + constructor() { this.iconService.setIconRef('expand_more', 'default', { family: 'material', name: 'home' }); } diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index a3b5dc7b56d..c43218d198c 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -1,4 +1,4 @@ -import { DestroyRef, Inject, Injectable, Optional, SecurityContext, DOCUMENT } from "@angular/core"; +import { DestroyRef, Injectable, SecurityContext, DOCUMENT, inject } from "@angular/core"; import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; import { HttpClient } from "@angular/common/http"; import { Observable, Subject } from "rxjs"; @@ -38,6 +38,13 @@ export interface IgxIconLoadedEvent { providedIn: "root", }) export class IgxIconService { + private _sanitizer = inject(DomSanitizer, { optional: true }); + private _httpClient = inject(HttpClient, { optional: true }); + private _platformUtil = inject(PlatformUtil, { optional: true }); + private _themeToken = inject(THEME_TOKEN, { optional: true }); + private _destroyRef = inject(DestroyRef, { optional: true }); + protected document = inject(DOCUMENT, { optional: true }); + /** * Observable that emits when an icon is successfully loaded * through a HTTP request. @@ -59,14 +66,7 @@ export class IgxIconService { private _iconLoaded = new Subject(); private _domParser: DOMParser; - constructor( - @Optional() private _sanitizer: DomSanitizer, - @Optional() private _httpClient: HttpClient, - @Optional() private _platformUtil: PlatformUtil, - @Optional() @Inject(THEME_TOKEN) private _themeToken: ThemeToken | undefined, - @Optional() @Inject(DestroyRef) private _destroyRef: DestroyRef, - @Optional() @Inject(DOCUMENT) protected document: Document, - ) { + constructor() { this.iconLoaded = this._iconLoaded.asObservable(); this.setFamily(this._defaultFamily.name, this._defaultFamily.meta); diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts index 4777403e2f6..a6deb9e4d8b 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, Inject } from '@angular/core'; +import { Component, ViewChild, ElementRef, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxInputGroupComponent } from './input-group.component'; @@ -252,13 +252,13 @@ describe('IgxInputGroup', () => { imports: [IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective] }) class InputGroupComponent { + public IGTOKEN = inject(IGX_INPUT_GROUP_TYPE); + @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent; @ViewChild('igxInput', { read: IgxInputDirective, static: true }) public igxInput: IgxInputDirective; @ViewChild(IgxPrefixDirective, { read: ElementRef }) public prefix: ElementRef; @ViewChild(IgxSuffixDirective, { read: ElementRef }) public suffix: ElementRef; public suppressInputAutofocus = false; - - constructor(@Inject(IGX_INPUT_GROUP_TYPE) public IGTOKEN: IgxInputGroupType) {} } @Component({ diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 93b8a4579cf..dd875b23fe1 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -1,17 +1,5 @@ import { NgTemplateOutlet, NgClass } from '@angular/common'; -import { - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - DestroyRef, - ElementRef, - HostBinding, - HostListener, Inject, Input, - Optional, QueryList, booleanAttribute, - inject, - DOCUMENT -} from '@angular/core'; +import { ChangeDetectorRef, Component, ContentChild, ContentChildren, DestroyRef, ElementRef, HostBinding, HostListener, Input, QueryList, booleanAttribute, inject, DOCUMENT } from '@angular/core'; import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources'; import { PlatformUtil, getComponentTheme } from '../core/utils'; import { IgxButtonDirective } from '../directives/button/button.directive'; @@ -36,6 +24,13 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent] }) export class IgxInputGroupComponent implements IgxInputGroupBase { + public element = inject>(ElementRef); + private _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true }); + private document = inject(DOCUMENT); + private platform = inject(PlatformUtil); + private cdr = inject(ChangeDetectorRef); + private themeToken = inject(THEME_TOKEN); + /** * Sets the resource strings. * By default it uses EN resources. @@ -206,18 +201,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { return this._theme; } - constructor( - public element: ElementRef, - @Optional() - @Inject(IGX_INPUT_GROUP_TYPE) - private _inputGroupType: IgxInputGroupType, - @Inject(DOCUMENT) - private document: any, - private platform: PlatformUtil, - private cdr: ChangeDetectorRef, - @Inject(THEME_TOKEN) - private themeToken: ThemeToken - ) { + constructor() { this._theme = this.themeToken.theme; const themeChange = this.themeToken.onChange((theme) => { if (this._theme !== theme) { diff --git a/projects/igniteui-angular/src/lib/list/list-item.component.ts b/projects/igniteui-angular/src/lib/list/list-item.component.ts index ab0bd4e7b07..20c44e1351b 100644 --- a/projects/igniteui-angular/src/lib/list/list-item.component.ts +++ b/projects/igniteui-angular/src/lib/list/list-item.component.ts @@ -1,14 +1,4 @@ -import { - ChangeDetectionStrategy, - Component, - ElementRef, - HostBinding, - HostListener, - Input, - Renderer2, - ViewChild, - booleanAttribute -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Input, Renderer2, ViewChild, booleanAttribute, inject } from '@angular/core'; import { IgxListPanState, @@ -42,6 +32,10 @@ import { NgTemplateOutlet } from '@angular/common'; imports: [NgTemplateOutlet] }) export class IgxListItemComponent implements IListChild { + public list = inject(IgxListBaseDirective); + private elementRef = inject(ElementRef); + private _renderer = inject(Renderer2); + /** * Provides a reference to the template's base element shown when left panning a list item. * ```typescript @@ -258,12 +252,6 @@ export class IgxListItemComponent implements IListChild { return rem(this.element.offsetHeight); } - constructor( - public list: IgxListBaseDirective, - private elementRef: ElementRef, - private _renderer: Renderer2) { - } - /** * Gets/Sets the `role` attribute of the `list item`. * ```typescript diff --git a/projects/igniteui-angular/src/lib/list/list.common.ts b/projects/igniteui-angular/src/lib/list/list.common.ts index 4ca623f5cfe..e49d9305171 100644 --- a/projects/igniteui-angular/src/lib/list/list.common.ts +++ b/projects/igniteui-angular/src/lib/list/list.common.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef, EventEmitter, QueryList, Optional, ElementRef } from '@angular/core'; +import { Directive, TemplateRef, EventEmitter, QueryList, ElementRef, inject } from '@angular/core'; export interface IListChild { index: number; @@ -10,6 +10,8 @@ export interface IListChild { standalone: true }) export class IgxListBaseDirective { + protected el = inject(ElementRef, { optional: true }); + public itemClicked: EventEmitter; public allowLeftPanning: boolean; public allowRightPanning: boolean; @@ -23,8 +25,6 @@ export class IgxListBaseDirective { public children: QueryList; public listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective; public listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective; - - constructor(@Optional() protected el: ElementRef) {} } export enum IgxListPanState { NONE, LEFT, RIGHT } @@ -34,7 +34,7 @@ export enum IgxListPanState { NONE, LEFT, RIGHT } standalone: true }) export class IgxEmptyListTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } @Directive({ @@ -42,7 +42,7 @@ export class IgxEmptyListTemplateDirective { standalone: true }) export class IgxDataLoadingTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } @Directive({ @@ -50,7 +50,7 @@ export class IgxDataLoadingTemplateDirective { standalone: true }) export class IgxListItemLeftPanningTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } @Directive({ @@ -58,5 +58,5 @@ export class IgxListItemLeftPanningTemplateDirective { standalone: true }) export class IgxListItemRightPanningTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/list/list.component.ts b/projects/igniteui-angular/src/lib/list/list.component.ts index 32b4d00b75d..1178f94c639 100644 --- a/projects/igniteui-angular/src/lib/list/list.component.ts +++ b/projects/igniteui-angular/src/lib/list/list.component.ts @@ -1,20 +1,5 @@ import { NgTemplateOutlet } from '@angular/common'; -import { - Component, - ContentChild, - ContentChildren, - ElementRef, - EventEmitter, - forwardRef, - HostBinding, - Input, - Output, - QueryList, - TemplateRef, - ViewChild, - Directive, - booleanAttribute -} from '@angular/core'; +import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, QueryList, TemplateRef, ViewChild, Directive, booleanAttribute, inject } from '@angular/core'; @@ -149,6 +134,8 @@ export class IgxListLineSubTitleDirective { imports: [NgTemplateOutlet] }) export class IgxListComponent extends IgxListBaseDirective { + public element = inject(ElementRef); + /** * Returns a collection of all items and headers in the list. * @@ -460,10 +447,6 @@ export class IgxListComponent extends IgxListBaseDirective { return this._resourceStrings; } - constructor(public element: ElementRef) { - super(element); - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index f5db2952a52..e6ab01b07d7 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -1,22 +1,4 @@ -import { - AfterContentInit, - Component, - ContentChild, - ElementRef, - EventEmitter, - HostBinding, - Inject, - Input, - OnChanges, - OnDestroy, - OnInit, - Optional, - Output, - SimpleChange, - ViewChild, - Renderer2, - booleanAttribute -} from '@angular/core'; +import { AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange, ViewChild, Renderer2, booleanAttribute, inject } from '@angular/core'; import { fromEvent, interval, Subscription } from 'rxjs'; import { debounce } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; @@ -65,6 +47,12 @@ export class IgxNavigationDrawerComponent implements AfterContentInit, OnDestroy, OnChanges { + private elementRef = inject(ElementRef); + private _state = inject(IgxNavigationService, { optional: true }); + protected renderer = inject(Renderer2); + private _touchManager = inject(HammerGesturesManager); + private platformUtil = inject(PlatformUtil); + /** @hidden @internal */ @HostBinding('class.igx-nav-drawer') @@ -452,14 +440,6 @@ export class IgxNavigationDrawerComponent implements return this._state; } - constructor( - @Inject(ElementRef) private elementRef: ElementRef, - @Optional() private _state: IgxNavigationService, - protected renderer: Renderer2, - private _touchManager: HammerGesturesManager, - private platformUtil: PlatformUtil) { - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives.ts index cbfd05a8b12..373f15cb487 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives.ts @@ -1,4 +1,4 @@ -import { Directive, HostBinding, Input, TemplateRef, booleanAttribute } from '@angular/core'; +import { Directive, HostBinding, Input, TemplateRef, booleanAttribute, inject } from '@angular/core'; @Directive({ selector: '[igxDrawerItem]', @@ -88,9 +88,7 @@ export class IgxNavDrawerItemDirective { standalone: true }) export class IgxNavDrawerTemplateDirective { - - constructor(public template: TemplateRef) { - } + public template = inject>(TemplateRef); } @Directive({ @@ -98,7 +96,5 @@ export class IgxNavDrawerTemplateDirective { standalone: true }) export class IgxNavDrawerMiniTemplateDirective { - - constructor(public template: TemplateRef) { - } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/paginator/paginator-interfaces.ts b/projects/igniteui-angular/src/lib/paginator/paginator-interfaces.ts index ad734144898..422fb95238a 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator-interfaces.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator-interfaces.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; export interface IPageEventArgs extends IBaseEventArgs { @@ -16,6 +16,5 @@ export interface IPageCancellableEventArgs extends CancelableEventArgs { standalone: true }) export class IgxPaginatorDirective { - - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts index 0a702ce25d8..518000ed059 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, forwardRef } from '@angular/core'; +import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, HostBinding, Input, Output, forwardRef, inject } from '@angular/core'; import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces'; import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from '../core/i18n/paginator-resources'; import { OverlaySettings } from '../services/overlay/utilities'; @@ -47,6 +47,9 @@ export class IgxPaginatorContentDirective { }) // switch IgxPaginatorToken to extends once density is dropped export class IgxPaginatorComponent implements IgxPaginatorToken { + private elementRef = inject(ElementRef); + private cdr = inject(ChangeDetectorRef); + /** * @hidden @@ -260,8 +263,6 @@ export class IgxPaginatorComponent implements IgxPaginatorToken { return this._resourceStrings; } - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { } - /** * Returns if the current page is the last page. * ```typescript @@ -359,14 +360,14 @@ export class IgxPaginatorComponent implements IgxPaginatorToken { imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent] }) export class IgxPageSizeSelectorComponent { + public paginator = inject(IgxPaginatorComponent, { host: true }); + /** * @internal * @hidden */ @HostBinding('class.igx-page-size') public cssClass = 'igx-page-size'; - - constructor(@Host() public paginator: IgxPaginatorComponent) { } } @@ -376,6 +377,8 @@ export class IgxPageSizeSelectorComponent { imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective] }) export class IgxPageNavigationComponent { + public paginator = inject(IgxPaginatorComponent, { host: true }); + /** * @internal * @hidden @@ -389,8 +392,4 @@ export class IgxPageNavigationComponent { @HostBinding('attr.role') @Input() public role = 'navigation'; - - constructor( - @Host() - public paginator: IgxPaginatorComponent) { } } diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.common.ts b/projects/igniteui-angular/src/lib/progressbar/progressbar.common.ts index 3776d5a9eb9..cf7b1666a44 100644 --- a/projects/igniteui-angular/src/lib/progressbar/progressbar.common.ts +++ b/projects/igniteui-angular/src/lib/progressbar/progressbar.common.ts @@ -1,11 +1,11 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; @Directive({ selector: '[igxProgressBarText]', standalone: true }) export class IgxProgressBarTextTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } @Directive({ @@ -13,6 +13,6 @@ export class IgxProgressBarTextTemplateDirective { standalone: true }) export class IgxProgressBarGradientDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts index c3b0b9361e7..c2253208e12 100644 --- a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts +++ b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts @@ -9,7 +9,6 @@ import { Renderer2, ViewChild, ContentChild, - AfterViewInit, AfterContentInit, Directive, booleanAttribute, @@ -520,6 +519,8 @@ export class IgxLinearProgressBarComponent extends BaseProgressDirective impleme imports: [NgTemplateOutlet, NgClass] }) export class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterContentInit { + private renderer = inject(Renderer2); + /** * @hidden */ @@ -599,10 +600,6 @@ export class IgxCircularProgressBarComponent extends BaseProgressDirective imple return this.text; } - constructor(private renderer: Renderer2) { - super(); - } - /** * Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. * ```html diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts index 7a59165e80c..22d0382b629 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts @@ -1,12 +1,6 @@ -import { - AfterViewInit, - EventEmitter, - LOCALE_ID, - Output, - TemplateRef -} from '@angular/core'; +import { AfterViewInit, EventEmitter, LOCALE_ID, Output, TemplateRef, inject } from '@angular/core'; import { getLocaleFirstDayOfWeek, NgTemplateOutlet, NgClass, DatePipe } from '@angular/common'; -import { Inject } from '@angular/core'; + import { Component, Input, ViewChild, ChangeDetectorRef, ViewChildren, QueryList, ElementRef, OnDestroy, HostBinding } from '@angular/core'; @@ -105,6 +99,12 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50; ], }) export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + public dragService = inject(IgxQueryBuilderDragService); + protected platform = inject(PlatformUtil); + private elRef = inject(ElementRef); + protected _localeId = inject(LOCALE_ID); + /** * @hidden @internal */ @@ -540,11 +540,9 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { this.selectedField.filters.condition(this.selectedCondition).isNestedQuery)); } - constructor(public cdr: ChangeDetectorRef, - public dragService: IgxQueryBuilderDragService, - protected platform: PlatformUtil, - private elRef: ElementRef, - @Inject(LOCALE_ID) protected _localeId: string) { + constructor() { + const elRef = this.elRef; + this.locale = this.locale || this._localeId; this.dragService.register(this, elRef); } diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts index 2f101085378..214c2867c6d 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts @@ -1,4 +1,4 @@ -import { booleanAttribute, ContentChild, EventEmitter, Output, TemplateRef } from '@angular/core'; +import { booleanAttribute, ContentChild, EventEmitter, Output, TemplateRef, inject } from '@angular/core'; import { Component, Input, ViewChild, ElementRef, OnDestroy, HostBinding } from '@angular/core'; @@ -31,6 +31,8 @@ import { recreateTree } from '../data-operations/expressions-tree-util'; imports: [IgxQueryBuilderTreeComponent] }) export class IgxQueryBuilderComponent implements OnDestroy { + protected iconService = inject(IgxIconService); + /** * @hidden @internal */ @@ -184,7 +186,7 @@ export class IgxQueryBuilderComponent implements OnDestroy { private _entities: EntityType[]; private _shouldEmitTreeChange = true; - constructor(protected iconService: IgxIconService) { + constructor() { this.registerSVGIcons(); } diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.directives.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.directives.ts index c2cf0ea7ce9..4dd8201850c 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.directives.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.directives.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; /** * Defines the custom template that will be used for the search value input of condition in edit mode @@ -19,5 +19,5 @@ import { Directive, TemplateRef } from '@angular/core'; standalone: true }) export class IgxQueryBuilderSearchValueTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } diff --git a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts index d341eb73794..cd8447ce251 100644 --- a/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts +++ b/projects/igniteui-angular/src/lib/radio/radio.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren } from '@angular/core'; +import { Component, ViewChild, ViewChildren, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -366,6 +366,8 @@ class RadioFormComponent { imports: [ReactiveFormsModule, IgxRadioComponent] }) class ReactiveFormComponent { + private fb = inject(UntypedFormBuilder); + @ViewChild('radio', { read: IgxRadioComponent, static: true }) public radio: IgxRadioComponent; @@ -373,8 +375,6 @@ class ReactiveFormComponent { radio: ['', Validators.required], }); - constructor(private fb: UntypedFormBuilder) { } - public markAsTouched() { if (!this.reactiveForm.valid) { for (const key in this.reactiveForm.controls) { diff --git a/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts b/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts index 6751d9821c8..54c656993e4 100644 --- a/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts +++ b/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts @@ -20,10 +20,6 @@ export class IgxSelectItemNavigationDirective extends IgxDropDownItemNavigationD this._target = target ? target : this.dropdown as IgxSelectBase; } - constructor() { - super(null); - } - /** Captures keydown events and calls the appropriate handlers on the target component */ public override handleKeyDown(event: KeyboardEvent) { if (!event) { diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 1fbb60cdfb8..3405aba95b3 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, DebugElement, OnInit, ElementRef } from '@angular/core'; +import { Component, ViewChild, DebugElement, OnInit, ElementRef, inject } from '@angular/core'; import { NgStyle } from '@angular/common'; import { TestBed, tick, fakeAsync, waitForAsync, discardPeriodicTasks } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators, ReactiveFormsModule, NgForm, NgControl } from '@angular/forms'; @@ -2956,7 +2956,9 @@ class IgxSelectReactiveFormComponent { optionsSelect: [Validators.required] }; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.reactiveForm = fb.group({ firstName: new UntypedFormControl('', Validators.required), password: ['', Validators.required], diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index d448e4fe6dc..db16fc8eb92 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -1,37 +1,10 @@ -import { - AfterContentChecked, - AfterContentInit, - AfterViewInit, - booleanAttribute, - ChangeDetectorRef, - Component, - ContentChild, - ContentChildren, - Directive, - ElementRef, - EventEmitter, - forwardRef, - HostBinding, - Inject, - Injector, - Input, - OnDestroy, - OnInit, - Optional, - Output, - QueryList, - TemplateRef, - ViewChild, - DOCUMENT, - ViewChildren -} from '@angular/core'; +import { AfterContentChecked, AfterContentInit, AfterViewInit, booleanAttribute, Component, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, forwardRef, HostBinding, Injector, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; import { AbstractControl, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { noop } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { EditorProvider } from '../core/edit-provider'; -import { IgxSelectionAPIService } from '../core/selection'; import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; @@ -107,6 +80,10 @@ export class IgxSelectFooterDirective { }) export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelectBase, ControlValueAccessor, AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider, AfterContentChecked { + protected overlayService = inject(IgxOverlayService); + private _inputGroupType = inject(IGX_INPUT_GROUP_TYPE, { optional: true }); + private _injector = inject(Injector); + /** @hidden @internal */ @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true }) public inputGroup: IgxInputGroupComponent; @@ -342,18 +319,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - @Inject(DOCUMENT) document: any, - selection: IgxSelectionAPIService, - @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType, - private _injector: Injector, - ) { - super(elementRef, cdr, document, selection); - } - //#region ControlValueAccessor /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/services/animation/angular-animation-service.ts b/projects/igniteui-angular/src/lib/services/animation/angular-animation-service.ts index 232a5004bc0..042a9609965 100644 --- a/projects/igniteui-angular/src/lib/services/animation/angular-animation-service.ts +++ b/projects/igniteui-angular/src/lib/services/animation/angular-animation-service.ts @@ -1,11 +1,12 @@ import { AnimationBuilder, AnimationReferenceMetadata } from '@angular/animations'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { IgxAngularAnimationPlayer } from './angular-animation-player'; import { AnimationService, AnimationPlayer } from './animation'; @Injectable({providedIn: 'root'}) export class IgxAngularAnimationService implements AnimationService { - constructor(private builder: AnimationBuilder) { } + private builder = inject(AnimationBuilder); + public buildAnimation(animationMetaData: AnimationReferenceMetadata, element: HTMLElement): AnimationPlayer { if (!animationMetaData) { return null; diff --git a/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts b/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts index 79c7c67969a..fc558c8d314 100644 --- a/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts +++ b/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts @@ -1,5 +1,5 @@ import { TestBed, inject, waitForAsync } from '@angular/core/testing'; -import { Component, DOCUMENT } from '@angular/core'; +import { Component, DOCUMENT, inject as inject_1 } from '@angular/core'; import { IgxDirectionality, DIR_DOCUMENT } from './directionality'; interface FakeDoc { @@ -84,5 +84,5 @@ describe('IgxDirectionality', () => { standalone: true }) class InjectsIgxDirectionalityComponent { - constructor(public dir: IgxDirectionality) { } + public dir = inject_1(IgxDirectionality); } diff --git a/projects/igniteui-angular/src/lib/services/direction/directionality.ts b/projects/igniteui-angular/src/lib/services/direction/directionality.ts index 2f2edef9155..80db3d73617 100644 --- a/projects/igniteui-angular/src/lib/services/direction/directionality.ts +++ b/projects/igniteui-angular/src/lib/services/direction/directionality.ts @@ -1,4 +1,4 @@ -import { Injectable, Inject, InjectionToken, inject, DOCUMENT } from '@angular/core'; +import { Injectable, InjectionToken, inject, DOCUMENT } from '@angular/core'; /** * @hidden @@ -53,7 +53,9 @@ export class IgxDirectionality { return this._dir === 'rtl'; } - constructor(@Inject(DIR_DOCUMENT) document) { + constructor() { + const document = inject(DIR_DOCUMENT); + this._document = document; const bodyDir = this._document.body ? this._document.body.dir : null; const htmlDir = this._document.documentElement ? this._document.documentElement.dir : null; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index 828f8f7f9d2..ec4bf608ffb 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -1,14 +1,4 @@ -import { - Component, - ComponentRef, - ElementRef, - HostBinding, - Inject, - Injector, - ViewChild, - ViewContainerRef, - ViewEncapsulation -} from '@angular/core'; +import { Component, ComponentRef, ElementRef, HostBinding, Injector, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { first } from 'rxjs/operators'; @@ -4519,10 +4509,10 @@ export class SimpleDynamicComponent { standalone: true }) export class SimpleRefComponent { + public overlay = inject(IgxOverlayService); + @ViewChild('item', { static: true }) public item: ElementRef; - - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } } @Component({ @@ -4597,14 +4587,13 @@ export class SimpleDynamicWithDirectiveComponent { standalone: true }) export class EmptyPageComponent { + public overlay = inject(IgxOverlayService); + public viewContainerRef = inject(ViewContainerRef); + public injector = inject(Injector); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; @ViewChild('div', { static: true }) public divElement: ElementRef; - constructor( - @Inject(IgxOverlayService) public overlay: IgxOverlayService, - public viewContainerRef: ViewContainerRef, - public injector: Injector) { } - public click() { this.overlay.show(this.overlay.attach(SimpleDynamicComponent)); } @@ -4619,10 +4608,10 @@ export class EmptyPageComponent { standalone: true }) export class EmptyPageInShadowDomComponent { + public overlay = inject(IgxOverlayService); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; @ViewChild('outlet', { static: true }) public outletElement: ElementRef; - - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } } @Component({ @@ -4640,6 +4629,8 @@ export class EmptyPageInShadowDomComponent { standalone: true }) export class DownRightButtonComponent { + public overlay = inject(IgxOverlayService); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; public positionStrategy: IPositionStrategy; @@ -4653,8 +4644,6 @@ export class DownRightButtonComponent { public target: Point | HTMLElement = null; - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } - public click() { this.positionStrategy.settings = this.ButtonPositioningSettings; this.overlay.show(this.overlay.attach(SimpleDynamicComponent, { @@ -4680,10 +4669,10 @@ export class DownRightButtonComponent { standalone: true }) export class TopLeftOffsetComponent { + public overlay = inject(IgxOverlayService); - @ViewChild('button', { static: true }) public buttonElement: ElementRef; - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } + @ViewChild('button', { static: true }) public buttonElement: ElementRef; public click() { this.overlay.show(this.overlay.attach(SimpleDynamicComponent)); @@ -4701,9 +4690,9 @@ export class TopLeftOffsetComponent { standalone: true }) export class TwoButtonsComponent { - public settings: OverlaySettings = { modal: false }; + public overlay = inject(IgxOverlayService); - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } + public settings: OverlaySettings = { modal: false }; public clickOne() { this.overlay.show(this.overlay.attach(SimpleDynamicComponent), this.settings); @@ -4737,16 +4726,14 @@ export class TwoButtonsComponent { standalone: true }) export class WidthTestOverlayComponent { + public overlay = inject(IgxOverlayService); + public elementRef = inject(ElementRef); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; @ViewChild('myCustomComponent', { static: true }) public customComponent: ElementRef; public overlaySettings: OverlaySettings = {}; - constructor( - @Inject(IgxOverlayService) public overlay: IgxOverlayService, - @Inject(ElementRef) public elementRef: ElementRef - ) { } - public click(_event: any) { this.overlaySettings.positionStrategy = new ConnectedPositioningStrategy(); this.overlaySettings.scrollStrategy = new NoOpScrollStrategy(); @@ -4810,11 +4797,11 @@ export class ScrollableComponent { standalone: true }) export class FlexContainerComponent { + public overlay = inject(IgxOverlayService); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; public overlaySettings: OverlaySettings = {}; - constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { } - public click() { this.overlay.show(this.overlay.attach(SimpleDynamicComponent), this.overlaySettings); } diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 5cfccdf58e7..dadb363414f 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -1,19 +1,5 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { - ApplicationRef, - ComponentRef, - createComponent, - ElementRef, - EventEmitter, - Inject, - Injectable, - Injector, - NgZone, - OnDestroy, - Type, - ViewContainerRef, - DOCUMENT -} from '@angular/core'; +import { ApplicationRef, ComponentRef, createComponent, ElementRef, EventEmitter, Injectable, Injector, NgZone, OnDestroy, Type, ViewContainerRef, DOCUMENT, inject } from '@angular/core'; import { fromEvent, Subject, Subscription } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -53,6 +39,12 @@ import { */ @Injectable({ providedIn: 'root' }) export class IgxOverlayService implements OnDestroy { + private _appRef = inject(ApplicationRef); + private document = inject(DOCUMENT); + private _zone = inject(NgZone); + protected platformUtil = inject(PlatformUtil); + private animationService = inject(IgxAngularAnimationService); + /** * Emitted just before the overlay content starts to open. * ```typescript @@ -141,12 +133,7 @@ export class IgxOverlayService implements OnDestroy { closeOnEscape: false }; - constructor( - private _appRef: ApplicationRef, - @Inject(DOCUMENT) private document: any, - private _zone: NgZone, - protected platformUtil: PlatformUtil, - @Inject(IgxAngularAnimationService) private animationService: AnimationService) { + constructor() { this._document = this.document; } diff --git a/projects/igniteui-angular/src/lib/services/overlay/scroll/scroll-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/scroll/scroll-strategy.ts index 0a9e3550774..946afa27b83 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/scroll/scroll-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/scroll/scroll-strategy.ts @@ -2,7 +2,6 @@ import { IScrollStrategy } from './IScrollStrategy'; import { IgxOverlayService } from '../overlay'; export abstract class ScrollStrategy implements IScrollStrategy { - constructor() { } /** * Initializes the strategy. Should be called once * diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index de80ac92df3..f938c59b8a0 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -1,5 +1,5 @@ import { AsyncPipe } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -3085,10 +3085,12 @@ class IgxComboInContainerTestComponent { imports: [IgxSimpleComboComponent, AsyncPipe] }) export class IgxComboRemoteDataComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteDataService = inject(RemoteDataService); + public cdr = inject(ChangeDetectorRef); + @ViewChild('combo', { read: IgxSimpleComboComponent, static: true }) public instance: IgxSimpleComboComponent; public data; - constructor(private remoteDataService: RemoteDataService, public cdr: ChangeDetectorRef) { } public ngOnInit(): void { this.data = this.remoteDataService.records; } @@ -3176,6 +3178,9 @@ class IgxSimpleComboInTemplatedFormComponent { imports: [IgxSimpleComboComponent, AsyncPipe, ReactiveFormsModule] }) export class IgxComboRemoteDataInReactiveFormComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteDataService = inject(RemoteDataService); + public cdr = inject(ChangeDetectorRef); + @ViewChild('reactiveCombo', { read: IgxSimpleComboComponent, static: true }) public reactiveCombo: IgxSimpleComboComponent; @ViewChild('button', { read: HTMLButtonElement, static: true }) @@ -3184,7 +3189,9 @@ export class IgxComboRemoteDataInReactiveFormComponent implements OnInit, AfterV public reactiveForm: NgForm; public comboForm: UntypedFormGroup; public data; - constructor(private remoteDataService: RemoteDataService, public cdr: ChangeDetectorRef, fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.comboForm = fb.group({ comboValue: new UntypedFormControl('', Validators.required), }); @@ -3233,7 +3240,9 @@ export class IgxSimpleComboInReactiveFormComponent { public comboForm: UntypedFormGroup; public comboData: any; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.comboForm = fb.group({ comboValue: new UntypedFormControl('', Validators.required), }); @@ -3254,11 +3263,11 @@ export class IgxSimpleComboInReactiveFormComponent { imports: [IgxSimpleComboComponent, FormsModule] }) export class IgxSimpleComboBindingDataAfterInitComponent implements AfterViewInit { + private cdr = inject(ChangeDetectorRef); + public items: any[]; public selectedItem = 1; - constructor(private cdr: ChangeDetectorRef) { } - public ngAfterViewInit() { requestAnimationFrame(() => { this.items = [{ text: 'One', id: 1 }, { text: 'Two', id: 2 }, { text: 'Three', id: 3 }, diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts index 4eb2ac7f052..ba532536075 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts @@ -1,8 +1,5 @@ import { NgTemplateOutlet } from '@angular/common'; -import { - AfterViewInit, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, HostListener, Inject, Injector, - Optional, Output, ViewChild, DOCUMENT -} from '@angular/core'; +import { AfterViewInit, Component, DoCheck, EventEmitter, HostListener, Output, ViewChild, inject } from '@angular/core'; import { ControlValueAccessor, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms'; import { takeUntil } from 'rxjs/operators'; @@ -11,14 +8,11 @@ import { IgxComboDropDownComponent } from '../combo/combo-dropdown.component'; import { IgxComboItemComponent } from '../combo/combo-item.component'; import { IgxComboAPIService } from '../combo/combo.api'; import { IgxComboBaseDirective, IGX_COMBO_COMPONENT } from '../combo/combo.common'; -import { IgxSelectionAPIService } from '../core/selection'; import { CancelableEventArgs, IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../core/utils'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxForOfDirective } from '../directives/for-of/for_of.directive'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive'; -import { IgxIconService } from '../icon/icon.service'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; import { IgxComboFilteringPipe, IgxComboGroupingPipe } from '../combo/combo.pipes'; import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive'; import { IgxIconComponent } from '../icon/icon.component'; @@ -70,6 +64,9 @@ export interface ISimpleComboSelectionChangingEventArgs extends CancelableEventA imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe] }) export class IgxSimpleComboComponent extends IgxComboBaseDirective implements ControlValueAccessor, AfterViewInit, DoCheck { + private platformUtil = inject(PlatformUtil); + private formGroupDirective = inject(FormGroupDirective, { optional: true }); + /** @hidden @internal */ @ViewChild(IgxComboDropDownComponent, { static: true }) public dropdown: IgxComboDropDownComponent; @@ -140,27 +137,8 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co return !!this.selectionService.get(this.id).size; } - constructor(elementRef: ElementRef, - cdr: ChangeDetectorRef, - selectionService: IgxSelectionAPIService, - comboAPI: IgxComboAPIService, - private platformUtil: PlatformUtil, - @Inject(DOCUMENT) document: any, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType: IgxInputGroupType, - @Optional() _injector: Injector, - @Optional() @Inject(IgxIconService) _iconService?: IgxIconService, - @Optional() private formGroupDirective?: FormGroupDirective - ) { - super( - elementRef, - cdr, - selectionService, - comboAPI, - document, - _inputGroupType, - _injector, - _iconService - ); + constructor() { + super(); this.comboAPI.register(this); } @@ -224,7 +202,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => { if (super.selection.length > 0) { const index = this.virtDir.igxForOf.findIndex(e => { - let current = e? e[this.valueKey] : undefined; + let current = e ? e[this.valueKey] : undefined; if (this.valueKey === null || this.valueKey === undefined) { current = e; } @@ -432,7 +410,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co const oldSelection = this.selection; this.clearSelection(true); - if(!this.collapsed){ + if (!this.collapsed) { this.focusSearchInput(true); } event.stopPropagation(); diff --git a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts index 8a9c860dd07..10ac41aebfc 100644 --- a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts +++ b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, TemplateRef, HostBinding, ElementRef, booleanAttribute } from '@angular/core'; +import { Component, Input, TemplateRef, HostBinding, ElementRef, booleanAttribute, inject } from '@angular/core'; import { SliderHandle } from '../slider.common'; import { IgxSliderThumbComponent } from '../thumb/thumb-slider.component'; import { NgClass, NgTemplateOutlet } from '@angular/common'; @@ -12,6 +12,8 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; imports: [NgClass, NgTemplateOutlet] }) export class IgxThumbLabelComponent { + private _elementRef = inject(ElementRef); + @Input() public value: any; @@ -73,8 +75,6 @@ export class IgxThumbLabelComponent { private _active: boolean; - constructor(private _elementRef: ElementRef) { } - public get nativeElement() { return this._elementRef.nativeElement; } diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts index 5442a15076f..08e39aa0366 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild } from '@angular/core'; +import { Component, Input, ViewChild, inject } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; import { By, HammerModule } from '@angular/platform-browser'; @@ -2066,6 +2066,8 @@ describe('IgxSlider', () => { imports: [IgxSliderComponent] }) export class SliderRtlComponent { + public dir = inject(IgxDirectionality); + @ViewChild(IgxSliderComponent) public slider: IgxSliderComponent; @@ -2075,8 +2077,6 @@ export class SliderRtlComponent { }; public type: IgxSliderType = IgxSliderType.RANGE; - - constructor(public dir: IgxDirectionality) { } } @Component({ diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 586247fe4ce..984abd3ecab 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -1,7 +1,4 @@ -import { - AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, - HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChild, ViewChildren, booleanAttribute -} from '@angular/core'; +import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChild, ViewChildren, booleanAttribute, inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { animationFrameScheduler, fromEvent, interval, merge, noop, Observable, Subject, timer } from 'rxjs'; import { takeUntil, throttle, throttleTime } from 'rxjs/operators'; @@ -48,6 +45,12 @@ export class IgxSliderComponent implements AfterContentInit, OnChanges, OnDestroy { + private renderer = inject(Renderer2); + private _el = inject(ElementRef); + private _cdr = inject(ChangeDetectorRef); + private _ngZone = inject(NgZone); + private _dir = inject(IgxDirectionality); + /** * @hidden */ @@ -754,11 +757,7 @@ export class IgxSliderComponent implements private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; - constructor(private renderer: Renderer2, - private _el: ElementRef, - private _cdr: ChangeDetectorRef, - private _ngZone: NgZone, - private _dir: IgxDirectionality) { + constructor() { this.stepDistance = this._step; } diff --git a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts index b558401e759..f7fbe7bbdc4 100644 --- a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts @@ -1,16 +1,4 @@ -import { - Component, - Input, - HostListener, - ElementRef, - HostBinding, - Output, - EventEmitter, - OnInit, - OnDestroy, - TemplateRef, - booleanAttribute -} from '@angular/core'; +import { Component, Input, HostListener, ElementRef, HostBinding, Output, EventEmitter, OnInit, OnDestroy, TemplateRef, booleanAttribute, inject } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { SliderHandle } from '../slider.common'; import { Subject } from 'rxjs'; @@ -26,6 +14,9 @@ import { NgClass } from '@angular/common'; imports: [NgClass] }) export class IgxSliderThumbComponent implements OnInit, OnDestroy { + private _elementRef = inject(ElementRef); + private _dir = inject(IgxDirectionality); + @Input() public value: any; @@ -195,8 +186,6 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy { return thumbBounderies.left + thumbCenter; } - constructor(private _elementRef: ElementRef, private _dir: IgxDirectionality) { } - @HostListener('pointerenter') public onPointerEnter() { this.focused = false; diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts index eb8802bac6a..380065de59e 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute, signal } from '@angular/core'; +import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute, signal, inject } from '@angular/core'; /** * Represents individual resizable/collapsible panes. @@ -20,6 +20,8 @@ import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, boolea standalone: true }) export class IgxSplitterPaneComponent { + private el = inject(ElementRef); + private _minSize: string; private _maxSize: string; private _order = signal(null); @@ -231,9 +233,6 @@ export class IgxSplitterPaneComponent { private _dragSize; private _collapsed = false; - - constructor(private el: ElementRef) { } - /** * Toggles the collapsed state of the pane. * diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts index 6ca08559410..1b0422cca23 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, NgZone, Output, QueryList, booleanAttribute, forwardRef, DOCUMENT } from '@angular/core'; +import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgZone, Output, QueryList, booleanAttribute, forwardRef, DOCUMENT, inject } from '@angular/core'; import { DragDirection, IDragMoveEventArgs, IDragStartEventArgs, IgxDragDirective, IgxDragIgnoreDirective } from '../directives/drag-drop/drag-drop.directive'; import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component'; import { take } from 'rxjs'; @@ -48,6 +48,10 @@ export declare interface ISplitterBarResizeEventArgs { imports: [forwardRef(() => IgxSplitBarComponent)] }) export class IgxSplitterComponent implements AfterContentInit { + public document = inject(DOCUMENT); + private elementRef = inject(ElementRef); + private zone = inject(NgZone); + /** * Gets the list of splitter panes. * @@ -154,8 +158,6 @@ export class IgxSplitterComponent implements AfterContentInit { * The sibling pane in each pair of panes divided by a splitter bar. */ private sibling!: IgxSplitterPaneComponent; - - constructor(@Inject(DOCUMENT) public document, private elementRef: ElementRef, private zone: NgZone) { } /** * Gets/Sets the splitter orientation. * diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index dc439b3f026..22283184a64 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -1,28 +1,8 @@ -import { - AfterViewInit, - booleanAttribute, - ChangeDetectorRef, - Component, - ContentChild, - ElementRef, - EventEmitter, - forwardRef, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - Output, - Renderer2, - TemplateRef, - ViewChild -} from '@angular/core'; +import { AfterViewInit, booleanAttribute, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, OnDestroy, Output, Renderer2, TemplateRef, ViewChild, inject } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base'; import { PlatformUtil } from '../../core/utils'; import { ToggleAnimationPlayer, ToggleAnimationSettings } from '../../expansion-panel/toggle-animation-component'; -import { IgxAngularAnimationService } from '../../services/animation/angular-animation-service'; -import { AnimationService } from '../../services/animation/animation'; import { IgxDirectionality } from '../../services/direction/directionality'; import { IgxStep, IgxStepper, IgxStepperOrientation, IgxStepType, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT, HorizontalAnimationType } from '../stepper.common'; import { IgxStepContentDirective, IgxStepIndicatorDirective } from '../stepper.directive'; @@ -60,6 +40,14 @@ let NEXT_ID = 0; imports: [NgClass, IgxRippleDirective, NgTemplateOutlet] }) export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, AfterViewInit, OnDestroy, IgxSlideComponentBase { + public stepper = inject(IGX_STEPPER_COMPONENT); + public cdr = inject(ChangeDetectorRef); + public renderer = inject(Renderer2); + protected platform = inject(PlatformUtil); + protected stepperService = inject(IgxStepperService); + private element = inject>(ElementRef); + private dir = inject(IgxDirectionality); + /** * Get/Set the `id` of the step component. @@ -383,19 +371,6 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, private _focused = false; private _disabled = false; - constructor( - @Inject(IGX_STEPPER_COMPONENT) public stepper: IgxStepper, - public cdr: ChangeDetectorRef, - public renderer: Renderer2, - protected platform: PlatformUtil, - protected stepperService: IgxStepperService, - @Inject(IgxAngularAnimationService) animationService: AnimationService, - private element: ElementRef, - private dir: IgxDirectionality - ) { - super(animationService); - } - /** @hidden @internal */ @HostListener('focus') public onFocus(): void { diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 38fdd20f3e8..16124b42c74 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -1,16 +1,17 @@ import { AnimationBuilder } from '@angular/animations'; -import { Component, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { take } from 'rxjs/operators'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxInputDirective, IgxInputGroupComponent } from '../input-group/public_api'; -import { Direction } from '../services/direction/directionality'; +import { Direction, IgxDirectionality } from '../services/direction/directionality'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { IgxStepComponent } from './step/step.component'; import { HorizontalAnimationType, + IGX_STEPPER_COMPONENT, IgxStepperOrientation, IgxStepperTitlePosition, IgxStepType, @@ -21,6 +22,8 @@ import { import { IgxStepperComponent } from './stepper.component'; import { IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective } from './stepper.directive'; import { IgxStepperService } from './stepper.service'; +import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; +import { PlatformUtil } from '../core/utils'; const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; @@ -146,7 +149,7 @@ describe('Rendering Tests', () => { expect(serviceCollapseSpy).toHaveBeenCalledOnceWith(stepper.steps[0]); })); - it('should calculate disabled steps properly when the stepper is initially in linear mode', fakeAsync(()=>{ + it('should calculate disabled steps properly when the stepper is initially in linear mode', fakeAsync(() => { const fixture = TestBed.createComponent(IgxStepperLinearComponent); fixture.detectChanges(); const linearStepper = fixture.componentInstance.stepper; @@ -1010,11 +1013,29 @@ describe('Stepper service unit tests', () => { }; stepperService = new IgxStepperService(); - stepper = new IgxStepperComponent(mockCdr, mockAnimationService, stepperService, mockElementRef); + + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxStepComponent], + providers: [ + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: ElementRef, useValue: mockElementRef }, + { provide: IgxStepperService, useValue: stepperService }, + { provide: IgxDirectionality, useValue: mockDir }, + { provide: PlatformUtil, useValue: mockPlatform }, + IgxStepperComponent, + { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent }, + IgxStepComponent, + Renderer2 + ] + }); + + stepper = TestBed.inject(IgxStepperComponent); steps = []; for (let index = 0; index < 4; index++) { - const newStep = new IgxStepComponent(stepper, mockCdr, null, - mockPlatform, stepperService, mockAnimationService, mockElementRef, mockDir); + const fixture = TestBed.createComponent(IgxStepComponent); + fixture.detectChanges() + const newStep = fixture.componentInstance; newStep._index = index; steps.push(newStep); } diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts index e2801515b46..16f99c1680b 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts @@ -1,17 +1,11 @@ import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; import { NgTemplateOutlet } from '@angular/common'; -import { - AfterContentInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, - ElementRef, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy, - OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute -} from '@angular/core'; +import { AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IgxCarouselComponentBase } from '../carousel/carousel-base'; import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component'; -import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { AnimationService } from '../services/animation/animation'; import { IgxStepComponent } from './step/step.component'; import { IgxStepper, IgxStepperOrientation, IgxStepperTitlePosition, IgxStepType, @@ -76,6 +70,9 @@ import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; imports: [NgTemplateOutlet] }) export class IgxStepperComponent extends IgxCarouselComponentBase implements IgxStepper, OnChanges, OnInit, AfterContentInit, OnDestroy { + private stepperService = inject(IgxStepperService); + private element = inject>(ElementRef); + /** * Get/Set the animation type of the stepper when the orientation direction is vertical. @@ -331,12 +328,8 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx private _linear = false; private readonly _defaultAnimationDuration = 350; - constructor( - cdr: ChangeDetectorRef, - @Inject(IgxAngularAnimationService) animationService: AnimationService, - private stepperService: IgxStepperService, - private element: ElementRef) { - super(animationService, cdr); + constructor() { + super(); this.stepperService.stepper = this; } diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index 9e5e334272b..9d198e4b34c 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, HostBinding, Inject, Input } from '@angular/core'; +import { Directive, ElementRef, HostBinding, Input, inject } from '@angular/core'; import { IgxStep, IGX_STEP_COMPONENT } from './stepper.common'; import { IgxStepperService } from './stepper.service'; @@ -154,6 +154,10 @@ export class IgxStepSubtitleDirective { standalone: true }) export class IgxStepContentDirective { + private step = inject(IGX_STEP_COMPONENT); + private stepperService = inject(IgxStepperService); + public elementRef = inject>(ElementRef); + private get target(): IgxStep { return this.step; } @@ -188,10 +192,4 @@ export class IgxStepContentDirective { } private _tabIndex = null; - - constructor( - @Inject(IGX_STEP_COMPONENT) private step: IgxStep, - private stepperService: IgxStepperService, - public elementRef: ElementRef - ) { } } diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts index 56553b40bf1..f7776837d07 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -361,11 +361,11 @@ class SwitchInvisibleLabelComponent { imports: [ReactiveFormsModule, IgxSwitchComponent] }) class SwitchFormGroupComponent { + private fb = inject(UntypedFormBuilder); + @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent; public myForm = this.fb.group({ switch: ['', Validators.required] }); - - constructor(private fb: UntypedFormBuilder) {} } @Component({ diff --git a/projects/igniteui-angular/src/lib/tabs/tab-content.directive.ts b/projects/igniteui-angular/src/lib/tabs/tab-content.directive.ts index ed6e302a4ac..f322fb1f8dc 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-content.directive.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-content.directive.ts @@ -1,18 +1,18 @@ -import { Directive, ElementRef, HostBinding } from '@angular/core'; +import { Directive, ElementRef, HostBinding, inject } from '@angular/core'; import { IgxTabItemDirective } from './tab-item.directive'; import { IgxTabContentBase } from './tabs.base'; @Directive() export abstract class IgxTabContentDirective implements IgxTabContentBase { + /** @hidden */ + public tab = inject(IgxTabItemDirective); + /** @hidden */ + private elementRef = inject(ElementRef); /** @hidden */ @HostBinding('attr.role') public role = 'tabpanel'; - /** @hidden */ - constructor(public tab: IgxTabItemDirective, private elementRef: ElementRef) { - } - /** @hidden */ @HostBinding('attr.tabindex') public get tabIndex() { diff --git a/projects/igniteui-angular/src/lib/tabs/tab-header.directive.ts b/projects/igniteui-angular/src/lib/tabs/tab-header.directive.ts index 772a5918609..9a6dfce6cff 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-header.directive.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-header.directive.ts @@ -1,23 +1,23 @@ -import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core'; +import { Directive, ElementRef, HostBinding, HostListener, inject } from '@angular/core'; import { PlatformUtil } from '../core/utils'; import { IgxTabItemDirective } from './tab-item.directive'; import { IgxTabHeaderBase, IgxTabsBase } from './tabs.base'; @Directive() export abstract class IgxTabHeaderDirective implements IgxTabHeaderBase { - /** @hidden */ - @HostBinding('attr.role') - public role = 'tab'; + protected tabs = inject(IgxTabsBase); + /** @hidden */ + public tab = inject(IgxTabItemDirective); + /** @hidden */ + private elementRef = inject(ElementRef); + /** @hidden */ + protected platform = inject(PlatformUtil); /** @hidden */ - constructor( - protected tabs: IgxTabsBase, - public tab: IgxTabItemDirective, - private elementRef: ElementRef, - protected platform: PlatformUtil - ) { } + @HostBinding('attr.role') + public role = 'tab'; /** @hidden */ @HostBinding('attr.tabindex') diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts index 10a6570a956..d39c0b1539f 100644 --- a/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts +++ b/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts @@ -1,9 +1,11 @@ -import { ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewChild, booleanAttribute } from '@angular/core'; +import { ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewChild, booleanAttribute, inject } from '@angular/core'; import { Direction, IgxSlideComponentBase } from '../carousel/carousel-base'; import { IgxTabHeaderBase, IgxTabItemBase, IgxTabContentBase, IgxTabsBase } from './tabs.base'; @Directive() export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideComponentBase { + /** @hidden */ + private tabs = inject(IgxTabsBase); /** @hidden */ @ContentChild(IgxTabHeaderBase) @@ -55,8 +57,4 @@ export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideCom this.selectedChange.emit(this._selected); } } - - /** @hidden */ - constructor(private tabs: IgxTabsBase) { - } } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts b/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts index 6e955ccc8cf..999d14476a0 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts @@ -1,13 +1,11 @@ import { - AfterViewInit, ChangeDetectorRef, ContentChildren, Directive, EventEmitter, - Inject, - Input, OnDestroy, Output, QueryList, booleanAttribute + AfterViewInit, ContentChildren, Directive, EventEmitter, + Input, OnDestroy, Output, QueryList, booleanAttribute, + inject } from '@angular/core'; import { Subscription } from 'rxjs'; import { Direction, IgxCarouselComponentBase } from '../carousel/carousel-base'; import { IBaseEventArgs } from '../core/utils'; -import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { AnimationService } from '../services/animation/animation'; import { IgxDirectionality } from '../services/direction/directionality'; import { IgxTabItemDirective } from './tab-item.directive'; import { IgxTabContentBase, IgxTabsBase } from './tabs.base'; @@ -29,6 +27,8 @@ export interface ITabsSelectedItemChangeEventArgs extends ITabsBaseEventArgs { @Directive() export abstract class IgxTabsDirective extends IgxCarouselComponentBase implements IgxTabsBase, AfterViewInit, OnDestroy { + /** @hidden */ + public dir = inject(IgxDirectionality); /** * Gets/Sets the index of the selected item. @@ -113,14 +113,6 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen private _selectedIndex = -1; private _itemChanges$: Subscription; - /** @hidden */ - constructor( - @Inject(IgxAngularAnimationService) animationService: AnimationService, - cdr: ChangeDetectorRef, - public dir: IgxDirectionality) { - super(animationService, cdr); - } - /** @hidden */ public ngAfterViewInit(): void { if (this._selectedIndex === -1) { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts index 8fd928e9042..cb83cc1d6c6 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts @@ -1,10 +1,8 @@ -import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy } from '@angular/core'; -import { IgxTabItemDirective } from '../tab-item.directive'; +import { AfterViewInit, Component, HostBinding, HostListener, NgZone, OnDestroy, inject } from '@angular/core'; import { IgxTabHeaderDirective } from '../tab-header.directive'; import { IgxTabHeaderBase } from '../tabs.base'; import { IgxTabsComponent } from './tabs.component'; import { getResizeObserver } from '../../core/utils'; -import { PlatformUtil } from '../../core/utils'; import { IgxDirectionality } from '../../services/direction/directionality'; @Component({ @@ -14,6 +12,9 @@ import { IgxDirectionality } from '../../services/direction/directionality'; standalone: true }) export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements AfterViewInit, OnDestroy { + protected override tabs = inject(IgxTabsComponent); + private ngZone = inject(NgZone); + private dir = inject(IgxDirectionality); /** @hidden @internal */ @HostBinding('class.igx-tabs__header-item--selected') @@ -33,18 +34,6 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte private _resizeObserver: ResizeObserver; - /** @hidden @internal */ - constructor( - protected override tabs: IgxTabsComponent, - tab: IgxTabItemDirective, - elementRef: ElementRef, - platform: PlatformUtil, - private ngZone: NgZone, - private dir: IgxDirectionality - ) { - super(tabs, tab, elementRef, platform); - } - /** @hidden @internal */ @HostListener('keydown', ['$event']) public keyDown(event: KeyboardEvent) { diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts index 0b08fc9f4e9..6b348ce8acf 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts @@ -1,8 +1,5 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, OnDestroy, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, HostBinding, Input, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'; import { getResizeObserver, PlatformUtil } from '../../core/utils'; -import { IgxAngularAnimationService } from '../../services/animation/angular-animation-service'; -import { AnimationService } from '../../services/animation/animation'; -import { IgxDirectionality } from '../../services/direction/directionality'; import { IgxTabsBase } from '../tabs.base'; import { IgxTabsDirective } from '../tabs.directive'; import { NgClass, NgTemplateOutlet } from '@angular/common'; @@ -67,6 +64,9 @@ let NEXT_TAB_ID = 0; }) export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, OnDestroy { + private ngZone = inject(NgZone); + private platform = inject(PlatformUtil); + /** * Gets/Sets the tab alignment. Defaults to `start`. @@ -134,17 +134,6 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, private _tabAlignment: string | IgxTabsAlignment = 'start'; private _resizeObserver: ResizeObserver; - constructor( - @Inject(IgxAngularAnimationService) animationService: AnimationService, - cdr: ChangeDetectorRef, - private ngZone: NgZone, - dir: IgxDirectionality, - private platform: PlatformUtil - ) { - super(animationService, cdr, dir); - } - - /** @hidden @internal */ public override ngAfterViewInit(): void { super.ngAfterViewInit(); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index 8ac162068a9..c6720d7be64 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, inject } from '@angular/core'; import { SampleTestData } from './sample-test-data.spec'; import { ColumnDefinitions, GridTemplateStrings } from './template-strings.spec'; import { IgxGridComponent } from '../grids/grid/grid.component'; @@ -190,6 +190,8 @@ export class GridRowConditionalStylingComponent extends GridWithSizeComponent { ] }) export class ColumnHidingTestComponent extends GridWithSizeComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + @ViewChild(IgxColumnActionsComponent) public chooser: IgxColumnActionsComponent; public override width = '500px'; @@ -198,10 +200,6 @@ export class ColumnHidingTestComponent extends GridWithSizeComponent implements public hideFilter = false; public paging = false; - constructor(private cdr: ChangeDetectorRef) { - super(); - } - public get hiddenColumnsCount(): number { return this.chooser.columnItems.filter(c => c.checked).length; } @@ -229,7 +227,9 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { public hasGroupColumns = false; public override data = SampleTestData.contactInfoDataFull(); - constructor(cdr: ChangeDetectorRef) { + constructor() { + const cdr = inject(ChangeDetectorRef); + super(cdr); } } @@ -247,6 +247,8 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { imports: [IgxGridComponent, IgxColumnComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxGridToolbarActionsComponent] }) export class ColumnPinningTestComponent extends GridWithSizeComponent implements AfterViewInit, OnInit { + private cdr = inject(ChangeDetectorRef); + @ViewChild(IgxColumnActionsComponent) public chooser: IgxColumnActionsComponent; public override height = '500px'; @@ -254,10 +256,6 @@ export class ColumnPinningTestComponent extends GridWithSizeComponent implements public showInline = true; public hideFilter = false; - constructor(private cdr: ChangeDetectorRef) { - super(); - } - public ngOnInit() { this.data = SampleTestData.productInfoData(); } @@ -302,7 +300,9 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom export class ColumnGroupsPinningTestComponent extends ColumnPinningTestComponent { public override data = SampleTestData.contactInfoDataFull(); - constructor(cdr: ChangeDetectorRef) { + constructor() { + const cdr = inject(ChangeDetectorRef); + super(cdr); } } diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts index a1b6c8ab13e..ebe91304cb2 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts @@ -1,8 +1,8 @@ -import { ElementRef } from '@angular/core'; +import { ElementRef, InjectionToken } from '@angular/core'; import { DatePartDeltas } from '../directives/date-time-editor/public_api'; /** @hidden */ -export const IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken'; +export const IGX_TIME_PICKER_COMPONENT = new InjectionToken('IgxTimePickerComponentToken'); /** @hidden */ export interface IgxTimePickerBase { diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index fa12ed3f60a..a919e5148a2 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, DebugElement, EventEmitter, QueryList } from '@angular/core'; +import { Component, ViewChild, DebugElement, EventEmitter, QueryList, ElementRef, Injector, ChangeDetectorRef } from '@angular/core'; import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { UntypedFormControl, UntypedFormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -19,6 +19,7 @@ import { HammerOptions } from '../core/touch-annotations'; import { registerLocaleData } from "@angular/common"; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; +import { IGX_TIME_PICKER_COMPONENT } from './time-picker.common'; const CSS_CLASS_TIMEPICKER = 'igx-time-picker'; const CSS_CLASS_INPUTGROUP = 'igx-input-group'; @@ -189,8 +190,21 @@ describe('IgxTimePicker', () => { }); mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']); - const platformUtil = TestBed.inject(PlatformUtil); - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, platformUtil, mockCdr); + //const platformUtil = TestBed.inject(PlatformUtil); + + TestBed.configureTestingModule({ + providers: [ + {provide: ElementRef, useValue: elementRef}, + {provide: Injector, useValue: mockInjector}, + {provide: ChangeDetectorRef, useValue: mockCdr}, + { provide: IGX_TIME_PICKER_COMPONENT, useExisting: IgxTimePickerComponent }, + IgxTimePickerComponent, + PlatformUtil, + HammerGesturesManager, + IgxItemListDirective + ] + }); + timePicker = TestBed.inject(IgxTimePickerComponent); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; (timePicker as any)._inputGroup = mockInputGroup; (timePicker as any).inputDirective = mockInputDirective; @@ -291,7 +305,6 @@ describe('IgxTimePicker', () => { }); it('should open/close the dropdown with toggle() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', ['open', 'close'], { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -306,7 +319,6 @@ describe('IgxTimePicker', () => { }); it('should reset value and emit valueChange with clear() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -333,7 +345,6 @@ describe('IgxTimePicker', () => { }); it('should not emit valueChange when value is \'00:00:00\' and is cleared', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -349,7 +360,6 @@ describe('IgxTimePicker', () => { }); it('should not emit valueChange when value is null and is cleared', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', { collapsed: true }); (timePicker as any).toggleRef = mockToggleDirective; @@ -362,7 +372,6 @@ describe('IgxTimePicker', () => { }); it('should select time and trigger valueChange event with select() method', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective; const date = new Date(2020, 12, 12, 10, 30, 30); @@ -383,7 +392,6 @@ describe('IgxTimePicker', () => { const date = new Date(2020, 12, 12, 10, 30, 30); const updatedDate = new Date(2020, 12, 12, 11, 30, 30); - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); const mockToggleDirective = jasmine.createSpyObj('IgxToggleDirective', ['close'], { collapsed: true }); timePicker['dateTimeEditor'] = mockDateTimeEditorDirective; timePicker['inputDirective'] = mockInputDirective; @@ -415,7 +423,6 @@ describe('IgxTimePicker', () => { }); it('should validate correctly minValue and maxValue', () => { - timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr); timePicker['dateTimeEditor'] = mockDateTimeEditorDirective; timePicker['inputDirective'] = mockInputDirective; timePicker.ngOnInit(); @@ -444,8 +451,8 @@ describe('IgxTimePicker', () => { }); it('should handle panmove event correctly', () => { - const touchManager = new HammerGesturesManager(null, null, TestBed.inject(PlatformUtil)); - const itemListDirective = new IgxItemListDirective(timePicker, elementRef, touchManager); + const touchManager = TestBed.inject(HammerGesturesManager); + const itemListDirective = TestBed.inject(IgxItemListDirective); spyOn(touchManager, 'addEventListener'); itemListDirective.ngOnInit(); diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index c5174302fec..491fc4eef69 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -1,22 +1,5 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; -import { - Component, - ElementRef, - EventEmitter, - HostBinding, - Input, - OnDestroy, - OnInit, - Output, - ViewChild, - ContentChild, - Inject, - AfterViewInit, - Injector, - PipeTransform, - ChangeDetectorRef, - LOCALE_ID, Optional, ContentChildren, QueryList, HostListener, booleanAttribute -} from '@angular/core'; +import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, ContentChild, AfterViewInit, Injector, PipeTransform, ChangeDetectorRef, ContentChildren, QueryList, HostListener, booleanAttribute, inject } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, @@ -29,7 +12,6 @@ import { import { IgxInputGroupComponent } from '../input-group/input-group.component'; import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; import { IgxItemListDirective, IgxTimeItemDirective @@ -101,6 +83,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective OnDestroy, AfterViewInit, Validator { + private _injector = inject(Injector); + private platform = inject(PlatformUtil); + private cdr = inject(ChangeDetectorRef); + /** * Sets the value of the `id` attribute. * ```html @@ -614,15 +600,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective return this._itemsDelta; } - constructor( - element: ElementRef, - @Inject(LOCALE_ID) _localeId: string, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType: IgxInputGroupType, - private _injector: Injector, - private platform: PlatformUtil, - private cdr: ChangeDetectorRef, - ) { - super(element, _localeId, _inputGroupType); + constructor() { + super(); this.locale = this.locale || this._localeId; } diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index dc416613062..b5936f95d82 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts @@ -4,16 +4,7 @@ * * @preferred */ -import { - Directive, - ElementRef, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - OnInit -} from '@angular/core'; +import { Directive, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, inject } from '@angular/core'; import { HammerGesturesManager } from '../core/touch'; import { DateTimeUtil } from '../date-common/util/date-time.util'; import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.common'; @@ -26,6 +17,10 @@ import { HammerInput, HammerOptions } from '../core/touch-annotations'; standalone: true }) export class IgxItemListDirective implements OnInit, OnDestroy { + public timePicker = inject(IGX_TIME_PICKER_COMPONENT); + private elementRef = inject(ElementRef); + private touchManager = inject(HammerGesturesManager); + @HostBinding('attr.tabindex') public tabindex = 0; @@ -34,12 +29,6 @@ export class IgxItemListDirective implements OnInit, OnDestroy { public isActive: boolean; - constructor( - @Inject(IGX_TIME_PICKER_COMPONENT) public timePicker: IgxTimePickerBase, - private elementRef: ElementRef, - private touchManager: HammerGesturesManager - ) { } - @HostBinding('class.igx-time-picker__column') public get defaultCSS(): boolean { return true; @@ -229,6 +218,9 @@ export class IgxItemListDirective implements OnInit, OnDestroy { standalone: true }) export class IgxTimeItemDirective { + public timePicker = inject(IGX_TIME_PICKER_COMPONENT); + private itemList = inject(IgxItemListDirective); + @Input('igxTimeItem') public value: string; @@ -340,10 +332,6 @@ export class IgxTimeItemDirective { return this.getHourPart(this.timePicker.selectedDate); } - constructor(@Inject(IGX_TIME_PICKER_COMPONENT) - public timePicker: IgxTimePickerBase, - private itemList: IgxItemListDirective) { } - @HostListener('click', ['value']) public onClick(item) { if (item !== '') { diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.pipes.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.pipes.ts index b20ea11c62d..eab6bf4a96e 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.pipes.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.pipes.ts @@ -1,4 +1,4 @@ -import { Pipe, PipeTransform, Inject } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { DatePipe } from '@angular/common'; import { IGX_TIME_PICKER_COMPONENT, IgxTimePickerBase } from './time-picker.common'; import { DatePart } from '../directives/date-time-editor/public_api'; @@ -11,7 +11,8 @@ const ITEMS_COUNT = 7; standalone: true }) export class TimeFormatPipe implements PipeTransform { - constructor(@Inject(IGX_TIME_PICKER_COMPONENT) private timePicker: IgxTimePickerBase) { } + private timePicker = inject(IGX_TIME_PICKER_COMPONENT); + public transform(value: Date): string { const format = this.timePicker.appliedFormat.replace('tt', 'aa'); @@ -25,7 +26,8 @@ export class TimeFormatPipe implements PipeTransform { standalone: true }) export class TimeItemPipe implements PipeTransform { - constructor(@Inject(IGX_TIME_PICKER_COMPONENT) private timePicker: IgxTimePickerBase) { } + private timePicker = inject(IGX_TIME_PICKER_COMPONENT); + public transform(_collection: any[], timePart: string, selectedDate: Date, min: Date, max: Date) { let list; diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 4cec61b052f..5153228dce2 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -1,19 +1,6 @@ -import { - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - HostBinding, - Inject, - Input, - OnInit, - Optional, - Output -} from '@angular/core'; +import { Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, inject } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; -import { IgxNavigationService } from '../core/navigation'; import { - IgxOverlayService, HorizontalAlignment, VerticalAlignment, GlobalPositionStrategy, @@ -47,6 +34,8 @@ let NEXT_ID = 0; standalone: true }) export class IgxToastComponent extends IgxNotificationsDirective implements OnInit { + private _element = inject(ElementRef); + /** * @hidden */ @@ -144,15 +133,6 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn return this._element.nativeElement; } - constructor( - private _element: ElementRef, - cdr: ChangeDetectorRef, - @Optional() navService: IgxNavigationService, - @Inject(IgxOverlayService) overlayService: IgxOverlayService - ) { - super(_element, cdr, overlayService, navService); - } - /** * Shows the toast. * If `autoHide` is enabled, the toast will hide after `displayTime` is over. diff --git a/projects/igniteui-angular/src/lib/tree/tree-navigation.service.ts b/projects/igniteui-angular/src/lib/tree/tree-navigation.service.ts index 53687c548ad..fa3c5f57a97 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-navigation.service.ts @@ -1,4 +1,4 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import { Injectable, OnDestroy, inject } from '@angular/core'; import { IgxTree, IgxTreeNode, IgxTreeSelectionType } from './common'; import { NAVIGATION_KEYS } from '../core/utils'; import { IgxTreeService } from './tree.service'; @@ -8,6 +8,9 @@ import { Subject } from 'rxjs'; /** @hidden @internal */ @Injectable() export class IgxTreeNavigationService implements OnDestroy { + private treeService = inject(IgxTreeService); + private selectionService = inject(IgxTreeSelectionService); + private tree: IgxTree; private _focusedNode: IgxTreeNode = null; @@ -20,7 +23,7 @@ export class IgxTreeNavigationService implements OnDestroy { private _cacheChange = new Subject(); - constructor(private treeService: IgxTreeService, private selectionService: IgxTreeSelectionService) { + constructor() { this._cacheChange.subscribe(() => { this._visibleChildren = this.tree?.nodes ? diff --git a/projects/igniteui-angular/src/lib/tree/tree-navigation.spec.ts b/projects/igniteui-angular/src/lib/tree/tree-navigation.spec.ts index 47f5d551d43..2b415c5fb32 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-navigation.spec.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-navigation.spec.ts @@ -600,7 +600,7 @@ describe('IgxTree - Navigation #treeView', () => { selectionService = new IgxTreeSelectionService(); treeService = new IgxTreeService(); navService?.ngOnDestroy(); - navService = new IgxTreeNavigationService(treeService, selectionService); + //navService = new IgxTreeNavigationService(); mockNodesLevel1 = TreeTestFunctions.createNodeSpies(0, 3, null, [mockQuery2, mockQuery3, []], [mockQuery6, mockQuery3, []]); mockNodesLevel2_1 = TreeTestFunctions.createNodeSpies(1, 2, mockNodesLevel1[0], [mockQuery4, mockQuery5], [mockQuery4, mockQuery5]); @@ -618,6 +618,8 @@ describe('IgxTree - Navigation #treeView', () => { mockNodesLevel1[2] ]; + + Object.assign(mockQuery1, TreeTestFunctions.createQueryListSpy(allNodes)); Object.assign(mockQuery2, TreeTestFunctions.createQueryListSpy(mockNodesLevel2_1)); Object.assign(mockQuery3, TreeTestFunctions.createQueryListSpy(mockNodesLevel2_2)); @@ -636,12 +638,20 @@ describe('IgxTree - Navigation #treeView', () => { mockEmitter = jasmine.createSpyObj('emitter', ['emit']); mockTree = jasmine.createSpyObj('tree', [''], { selection: IgxTreeSelectionType.BiState, activeNodeChanged: mockEmitter, nodes: mockQuery1 }); - navService.register(mockTree); + + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeComponent, useValue: mockTree }, + { provide: IgxTreeService, useValue: treeService }, + { provide: IgxTreeSelectionService, useValue: selectionService }, + IgxTreeNavigationService + ] + }); + + navService = TestBed.inject(IgxTreeNavigationService); }); it('Should properly register the specified tree', () => { - navService = new IgxTreeNavigationService(treeService, selectionService); - expect((navService as any).tree).toBeFalsy(); navService.register(mockTree); @@ -649,6 +659,7 @@ describe('IgxTree - Navigation #treeView', () => { }); it('Should properly calculate VisibleChildren collection', () => { + navService.register(mockTree); navService.init_invisible_cache(); expect(navService.visibleChildren.length).toEqual(3); @@ -672,6 +683,7 @@ describe('IgxTree - Navigation #treeView', () => { }); it('Should set activeNode and focusedNode correctly', () => { + navService.register(mockTree); const someNode = { tabIndex: null, header: { @@ -711,6 +723,7 @@ describe('IgxTree - Navigation #treeView', () => { }); it('Should traverse visibleChildren on handleKeyDown', async () => { + navService.register(mockTree); navService.init_invisible_cache(); const mockEvent1 = new KeyboardEvent('keydown', { key: 'arrowdown', bubbles: true }); spyOn(mockEvent1, 'preventDefault'); @@ -772,7 +785,20 @@ describe('IgxTree - Navigation #treeView', () => { }); const mockSelectionService = jasmine.createSpyObj('mockSelection', ['selectNodesWithNoEvent', 'selectMultipleNodes', 'deselectNode', 'selectNode', 'register']); - const nav = new IgxTreeNavigationService(mockTreeService, mockSelectionService); + + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeService, useValue: mockTreeService }, + { provide: ElementRef, useValue: mockElementRef }, + { provide: IgxTreeSelectionService, useValue: mockSelectionService }, + IgxTreeNavigationService, + IgxTreeComponent + ] + }); + + const nav = TestBed.inject(IgxTreeNavigationService); + const lvl1Nodes = TreeTestFunctions.createNodeSpies(0, 5); const mockQuery = TreeTestFunctions.createQueryListSpy(lvl1Nodes); Object.assign(mockQuery, { changes: new EventEmitter() }); @@ -780,7 +806,7 @@ describe('IgxTree - Navigation #treeView', () => { spyOn(nav, 'update_disabled_cache'); spyOn(nav, 'update_visible_cache'); spyOn(nav, 'register'); - const tree = new IgxTreeComponent(nav, mockSelectionService, mockTreeService, mockElementRef); + const tree = TestBed.inject(IgxTreeComponent); tree.nodes = mockQuery; expect(nav.register).toHaveBeenCalledWith(tree); expect(nav.init_invisible_cache).not.toHaveBeenCalled(); diff --git a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts index 36955bd179f..8ccc49d381e 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts @@ -1,29 +1,7 @@ -import { - ChangeDetectorRef, - Component, - ContentChildren, - Directive, - ElementRef, - EventEmitter, - HostBinding, - HostListener, - Inject, - Input, - OnDestroy, - OnInit, - Optional, - Output, - QueryList, - SkipSelf, - TemplateRef, - ViewChild, - booleanAttribute -} from '@angular/core'; +import { ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, booleanAttribute, inject } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { ITreeResourceStrings, TreeResourceStringsEN } from '../../core/i18n/tree-resources'; import { ToggleAnimationPlayer, ToggleAnimationSettings } from '../../expansion-panel/toggle-animation-component'; -import { IgxAngularAnimationService } from '../../services/animation/angular-animation-service'; -import { AnimationService } from '../../services/animation/animation'; import { IgxTree, IgxTreeNode, @@ -51,6 +29,10 @@ import { getCurrentResourceStrings } from '../../core/i18n/resources'; standalone: true }) export class IgxTreeNodeLinkDirective implements OnDestroy { + private node = inject>(IGX_TREE_NODE_COMPONENT, { optional: true }); + private navService = inject(IgxTreeNavigationService); + public elementRef = inject(ElementRef); + @HostBinding('attr.role') public role = 'treeitem'; @@ -92,13 +74,6 @@ export class IgxTreeNodeLinkDirective implements OnDestroy { private _parentNode: IgxTreeNode = null; - constructor( - @Optional() @Inject(IGX_TREE_NODE_COMPONENT) - private node: IgxTreeNode, - private navService: IgxTreeNavigationService, - public elementRef: ElementRef, - ) { } - /** @hidden @internal */ @HostBinding('attr.tabindex') public get tabIndex(): number { @@ -157,6 +132,14 @@ export class IgxTreeNodeLinkDirective implements OnDestroy { imports: [NgTemplateOutlet, IgxIconComponent, IgxCheckboxComponent, NgClass, IgxCircularProgressBarComponent] }) export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements IgxTreeNode, OnInit, OnDestroy { + public tree = inject(IGX_TREE_COMPONENT); + protected selectionService = inject(IgxTreeSelectionService); + protected treeService = inject(IgxTreeService); + protected navService = inject(IgxTreeNavigationService); + protected cdr = inject(ChangeDetectorRef); + private element = inject>(ElementRef); + public parentNode = inject>(IGX_TREE_NODE_COMPONENT, { optional: true, skipSelf: true }); + /** * The data entry that the node is visualizing. * @@ -384,19 +367,6 @@ export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements Ig private _tabIndex = null; private _disabled = false; - constructor( - @Inject(IGX_TREE_COMPONENT) public tree: IgxTree, - protected selectionService: IgxTreeSelectionService, - protected treeService: IgxTreeService, - protected navService: IgxTreeNavigationService, - protected cdr: ChangeDetectorRef, - @Inject(IgxAngularAnimationService) animationService: AnimationService, - private element: ElementRef, - @Optional() @SkipSelf() @Inject(IGX_TREE_NODE_COMPONENT) public parentNode: IgxTreeNode - ) { - super(animationService); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts b/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts index c7bed3f83c8..a319ed63594 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewChild, ChangeDetectorRef, inject } from '@angular/core'; import { IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeNodeComponent, IgxTreeNodeLinkDirective } from './public_api'; import { HIERARCHICAL_SAMPLE_DATA } from 'src/app/shared/sample-data'; import { NgTemplateOutlet } from '@angular/common'; @@ -54,9 +54,11 @@ export class IgxTreeSimpleComponent { imports: [IgxTreeComponent, IgxTreeNodeComponent] }) export class IgxTreeSelectionSampleComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild(IgxTreeComponent, { static: true }) public tree: IgxTreeComponent; public data; - constructor(public cdr: ChangeDetectorRef) { + constructor() { this.data = HIERARCHICAL_SAMPLE_DATA; this.mapData(this.data); } diff --git a/projects/igniteui-angular/src/lib/tree/tree-selection.spec.ts b/projects/igniteui-angular/src/lib/tree/tree-selection.spec.ts index c2a7b7b1f0f..71049e5886c 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-selection.spec.ts @@ -1,10 +1,10 @@ import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { EventEmitter, QueryList } from '@angular/core'; +import { ChangeDetectorRef, ElementRef, EventEmitter, QueryList } from '@angular/core'; import { IgxTreeComponent } from './tree.component'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { TreeTestFunctions, TREE_NODE_DIV_SELECTION_CHECKBOX_CSS_CLASS } from './tree-functions.spec'; -import { IgxTree, IgxTreeSelectionType, ITreeNodeSelectionEvent } from './common'; +import { IGX_TREE_COMPONENT, IgxTree, IgxTreeSelectionType, ITreeNodeSelectionEvent } from './common'; import { IgxTreeSelectionService } from './tree-selection.service'; import { IgxTreeService } from './tree.service'; import { IgxTreeNodeComponent } from './tree-node/tree-node.component'; @@ -551,10 +551,25 @@ describe('IgxTree - Selection #treeView', () => { let mockQuery: jasmine.SpyObj>; const selectionService = new IgxTreeSelectionService(); const treeService = new IgxTreeService(); - const navService = new IgxTreeNavigationService(treeService, selectionService); - const tree = new IgxTreeComponent(navService, selectionService, treeService, null); + const elementRef = { nativeElement: null }; + let navService: IgxTreeNavigationService; + let tree: IgxTreeComponent; + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeSelectionService, useValue: selectionService }, + { provide: IgxTreeService, useValue: treeService }, + { provide: ElementRef, useValue: elementRef }, + IgxTreeNavigationService, + IgxTreeComponent + ] + }); + + navService = TestBed.inject(IgxTreeNavigationService); + tree = TestBed.inject(IgxTreeComponent); + mockNodes = TreeTestFunctions.createNodeSpies(0, 5); mockQuery = TreeTestFunctions.createQueryListSpy(mockNodes); mockQuery.toArray.and.returnValue(mockNodes); @@ -564,6 +579,11 @@ describe('IgxTree - Selection #treeView', () => { (tree.nodes as any) = mockQuery; }); + afterAll(() => { + navService.ngOnDestroy(); + tree.ngOnDestroy(); + }); + it('Should be able to deselect all nodes', () => { spyOn(selectionService, 'deselectNodesWithNoEvent').and.callThrough(); @@ -585,26 +605,47 @@ describe('IgxTree - Selection #treeView', () => { expect((tree as any).selectionService.deselectNodesWithNoEvent) .toHaveBeenCalledWith([tree.nodes.toArray()[0], tree.nodes.toArray()[1]]); }); - navService.ngOnDestroy(); - tree.ngOnDestroy(); }); describe('IgxTreeNode - API Tests', () => { + let node: IgxTreeNodeComponent; + let navService: IgxTreeNavigationService; const elementRef = { nativeElement: null }; const selectionService = new IgxTreeSelectionService(); const treeService = new IgxTreeService(); - const navService = new IgxTreeNavigationService(treeService, selectionService); const mockEmitter: EventEmitter = jasmine.createSpyObj('emitter', ['emit']); const mockTree: IgxTree = jasmine.createSpyObj('tree', [''], - { selection: IgxTreeSelectionType.BiState, nodeSelection: mockEmitter, nodes: { - find: () => true - } }); + { + selection: IgxTreeSelectionType.BiState, nodeSelection: mockEmitter, nodes: { + find: () => true + } + }); const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']); + selectionService.register(mockTree); - const node = new IgxTreeNodeComponent(mockTree, selectionService, treeService, navService, mockCdr, null, elementRef, null); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeSelectionService, useValue: selectionService }, + { provide: IgxTreeService, useValue: treeService }, + { provide: IgxTreeNavigationService, useClass: IgxTreeNavigationService }, + { provide: IGX_TREE_COMPONENT, useValue: mockTree }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: ElementRef, useValue: elementRef }, + IgxTreeNodeComponent + ] + }); + + navService = TestBed.inject(IgxTreeNavigationService); + node = TestBed.inject(IgxTreeNodeComponent); + }); + + afterAll(() => { + navService.ngOnDestroy(); + }); - it('Should call selectNodesWithNoEvent when seting node`s selected property to true', () => { + it('Should call selectNodesWithNoEvent when setting node`s selected property to true', () => { spyOn(selectionService, 'selectNodesWithNoEvent').and.callThrough(); node.selected = true; @@ -614,6 +655,11 @@ describe('IgxTree - Selection #treeView', () => { it('Should call deselectNodesWithNoEvent when seting node`s selected property to false', () => { spyOn(selectionService, 'deselectNodesWithNoEvent').and.callThrough(); + + if (!node.selected) { + node.selected = true; + } + node.selected = false; expect((node as any).selectionService.deselectNodesWithNoEvent).toHaveBeenCalled(); @@ -637,8 +683,6 @@ describe('IgxTree - Selection #treeView', () => { expect((node as any).selectionService.isNodeIndeterminate).toHaveBeenCalled(); expect((node as any).selectionService.isNodeIndeterminate).toHaveBeenCalledWith(node); }); - - navService.ngOnDestroy(); }); }); diff --git a/projects/igniteui-angular/src/lib/tree/tree.component.ts b/projects/igniteui-angular/src/lib/tree/tree.component.ts index 2ee5d39e79f..cb73299e3eb 100644 --- a/projects/igniteui-angular/src/lib/tree/tree.component.ts +++ b/projects/igniteui-angular/src/lib/tree/tree.component.ts @@ -1,20 +1,4 @@ -import { - Component, - QueryList, - Input, - Output, - EventEmitter, - ContentChild, - Directive, - TemplateRef, - OnInit, - AfterViewInit, - ContentChildren, - OnDestroy, - HostBinding, - ElementRef, - booleanAttribute, -} from '@angular/core'; +import { Component, QueryList, Input, Output, EventEmitter, ContentChild, Directive, TemplateRef, OnInit, AfterViewInit, ContentChildren, OnDestroy, HostBinding, ElementRef, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, throttleTime } from 'rxjs/operators'; @@ -94,6 +78,11 @@ export class IgxTreeExpandIndicatorDirective { standalone: true }) export class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestroy { + private navService = inject(IgxTreeNavigationService); + private selectionService = inject(IgxTreeSelectionService); + private treeService = inject(IgxTreeService); + private element = inject>(ElementRef); + @HostBinding('class.igx-tree') public cssClass = 'igx-tree'; @@ -322,12 +311,7 @@ export class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestr private destroy$ = new Subject(); private unsubChildren$ = new Subject(); - constructor( - private navService: IgxTreeNavigationService, - private selectionService: IgxTreeSelectionService, - private treeService: IgxTreeService, - private element: ElementRef, - ) { + constructor() { this.selectionService.register(this); this.treeService.register(this); this.navService.register(this); diff --git a/projects/igniteui-angular/src/lib/tree/tree.spec.ts b/projects/igniteui-angular/src/lib/tree/tree.spec.ts index dea876aaaa6..c398f8564d9 100644 --- a/projects/igniteui-angular/src/lib/tree/tree.spec.ts +++ b/projects/igniteui-angular/src/lib/tree/tree.spec.ts @@ -11,6 +11,8 @@ import { IgxTreeNodeComponent } from './tree-node/tree-node.component'; import { IgxTreeSelectionService } from './tree-selection.service'; import { IgxTreeComponent } from './tree.component'; import { IgxTreeService } from './tree.service'; +import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; +import { IGX_TREE_COMPONENT } from './common'; const TREE_ROOT_CLASS = 'igx-tree__root'; const NODE_TAG = 'igx-tree-node'; @@ -45,8 +47,19 @@ describe('IgxTree #treeView', () => { mockElementRef = jasmine.createSpyObj('elementRef', [], { nativeElement: document.createElement('div') }); - tree?.ngOnDestroy(); - tree = new IgxTreeComponent(mockNavService, mockSelectionService, mockTreeService, mockElementRef); + + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeNavigationService, useValue: mockNavService }, + { provide: IgxTreeService, useValue: mockTreeService }, + { provide: IgxTreeSelectionService, useValue: mockSelectionService }, + { provide: ElementRef, useValue: mockElementRef }, + IgxTreeComponent + ] + }); + + tree = TestBed.inject(IgxTreeComponent); + mockNodes = jasmine.createSpyObj('mockList', ['toArray'], { changes: new Subject(), get first() { @@ -235,9 +248,11 @@ describe('IgxTree #treeView', () => { }); }); describe('IgxTreeNodeComponent', () => { + let node: IgxTreeNodeComponent; let mockTree: IgxTreeComponent; let mockCdr: ChangeDetectorRef; let mockAnimationService: AnimationService; + let treeService: IgxTreeService; beforeEach(() => { mockTree = jasmine.createSpyObj('mockTree', ['findNodes'], @@ -249,10 +264,44 @@ describe('IgxTree #treeView', () => { }); mockCdr = jasmine.createSpyObj('mockCdr', ['detectChanges', 'markForCheck'], {}); mockAnimationService = jasmine.createSpyObj('mockAB', ['buildAnimation'], {}); + treeService = new IgxTreeService(); + + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeSelectionService, useValue: mockSelectionService }, + { provide: IgxTreeService, useValue: treeService }, + { provide: IgxTreeNavigationService, useValue: mockNavService }, + { provide: ElementRef, useValue: mockElementRef }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: IgxTreeComponent, useValue: mockTree }, + { provide: IGX_TREE_COMPONENT, useValue: mockTree }, + IgxTreeNodeComponent + ] + }); + + node = TestBed.inject(IgxTreeNodeComponent); }); it('Should call service expand/collapse methods when toggling state through `[expanded]` input', () => { - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeSelectionService, useValue: mockSelectionService }, + { provide: IgxTreeService, useValue: mockTreeService }, + { provide: IgxTreeNavigationService, useValue: mockNavService }, + { provide: ElementRef, useValue: mockElementRef }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: IgxTreeComponent, useValue: mockTree }, + { provide: IGX_TREE_COMPONENT, useValue: mockTree }, + IgxTreeNodeComponent + ] + }); + + node = TestBed.inject(IgxTreeNodeComponent); + + mockTreeService.register(mockTree); expect(mockTreeService.collapse).not.toHaveBeenCalled(); expect(mockTreeService.expand).not.toHaveBeenCalled(); expect(mockTree.nodeExpanded.emit).not.toHaveBeenCalled(); @@ -272,38 +321,29 @@ describe('IgxTree #treeView', () => { expect(mockTree.nodeExpanded.emit).not.toHaveBeenCalled(); }); it('Expand() should expand currently collapsing node', () => { - mockTreeService = new IgxTreeService(); - mockTreeService.register(mockTree); - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); - mockTreeService.expandedNodes.add(node); - mockTreeService.collapsingNodes.add(node); + treeService.register(mockTree); + treeService.expandedNodes.add(node); + treeService.collapsingNodes.add(node); node.expand(); expect(mockTree.nodeExpanding.emit).toHaveBeenCalledTimes(1); }); it('Collapse() shouldn`t affect a currently collapsing node', () => { - mockTreeService = new IgxTreeService(); - mockTreeService.register(mockTree); - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); - mockTreeService.expandedNodes.add(node); - mockTreeService.collapsingNodes.add(node); + treeService.register(mockTree); + treeService.expandedNodes.add(node); + treeService.collapsingNodes.add(node); node.collapse(); expect(mockTree.nodeCollapsing.emit).toHaveBeenCalledTimes(0); }); it('Should call service expand/collapse methods when calling API state methods', () => { - mockTreeService = new IgxTreeService(); - mockTreeService.register(mockTree); - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); + treeService.register(mockTree); node.expandedChange = jasmine.createSpyObj('emitter', ['emit']) const openAnimationSpy = spyOn(node, 'playOpenAnimation'); const closeAnimationSpy = spyOn(node, 'playCloseAnimation'); const mockObj = jasmine.createSpyObj('mockElement', ['focus']); - spyOn(mockTreeService, 'collapse').and.callThrough(); - spyOn(mockTreeService, 'collapsing').and.callThrough(); - spyOn(mockTreeService, 'expand').and.callThrough(); + spyOn(treeService, 'collapse').and.callThrough(); + spyOn(treeService, 'collapsing').and.callThrough(); + spyOn(treeService, 'expand').and.callThrough(); spyOn(node, 'expandedChange').and.callThrough(); const ingArgs = { owner: mockTree, @@ -315,13 +355,13 @@ describe('IgxTree #treeView', () => { node }; (node as any).childrenContainer = mockObj; - expect(mockTreeService.collapse).not.toHaveBeenCalled(); - expect(mockTreeService.expand).not.toHaveBeenCalled(); - expect(mockTreeService.collapsing).not.toHaveBeenCalled(); + expect(treeService.collapse).not.toHaveBeenCalled(); + expect(treeService.expand).not.toHaveBeenCalled(); + expect(treeService.collapsing).not.toHaveBeenCalled(); expect(openAnimationSpy).not.toHaveBeenCalled(); expect(closeAnimationSpy).not.toHaveBeenCalled(); expect(mockCdr.markForCheck).not.toHaveBeenCalled(); - expect(mockTreeService.collapsing).not.toHaveBeenCalled(); + expect(treeService.collapsing).not.toHaveBeenCalled(); expect(mockTree.nodeExpanding.emit).not.toHaveBeenCalledWith(); expect(mockTree.nodeCollapsing.emit).not.toHaveBeenCalledWith(); expect(mockTree.nodeExpanded.emit).not.toHaveBeenCalledWith(); @@ -333,8 +373,8 @@ describe('IgxTree #treeView', () => { expect(openAnimationSpy).toHaveBeenCalledTimes(1); expect(mockTree.nodeExpanded.emit).toHaveBeenCalledTimes(0); expect(mockTree.nodeExpanding.emit).toHaveBeenCalledWith(ingArgs); - expect(mockTreeService.expand).toHaveBeenCalledWith(node, true); - expect(mockTreeService.expand).toHaveBeenCalledTimes(1); + expect(treeService.expand).toHaveBeenCalledWith(node, true); + expect(treeService.expand).toHaveBeenCalledTimes(1); node.openAnimationDone.emit(); expect(node.expandedChange.emit).toHaveBeenCalledTimes(1); expect(node.expandedChange.emit).toHaveBeenCalledWith(true); @@ -346,10 +386,10 @@ describe('IgxTree #treeView', () => { expect(mockTree.nodeCollapsed.emit).toHaveBeenCalledTimes(0); expect(mockTree.nodeCollapsing.emit).toHaveBeenCalledWith(ingArgs); // collapse happens after animation finishes - expect(mockTreeService.collapse).toHaveBeenCalledTimes(0); + expect(treeService.collapse).toHaveBeenCalledTimes(0); node.closeAnimationDone.emit(); - expect(mockTreeService.collapse).toHaveBeenCalledTimes(1); - expect(mockTreeService.collapse).toHaveBeenCalledWith(node); + expect(treeService.collapse).toHaveBeenCalledTimes(1); + expect(treeService.collapse).toHaveBeenCalledWith(node); expect(node.expandedChange.emit).toHaveBeenCalledTimes(2); expect(node.expandedChange.emit).toHaveBeenCalledWith(false); expect(mockTree.nodeCollapsed.emit).toHaveBeenCalledTimes(1); @@ -359,24 +399,20 @@ describe('IgxTree #treeView', () => { node.toggle(); expect(node.expand).toHaveBeenCalledTimes(1); expect(node.collapse).toHaveBeenCalledTimes(0); - spyOn(mockTreeService, 'isExpanded').and.returnValue(true); + spyOn(treeService, 'isExpanded').and.returnValue(true); node.toggle(); expect(node.expand).toHaveBeenCalledTimes(1); expect(node.collapse).toHaveBeenCalledTimes(1); }); it('Should have correct path to node, regardless if node has parent or not', () => { - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); expect(node.path).toEqual([node]); - const childNode = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, node); + const childNode = TestBed.createComponent(IgxTreeNodeComponent).componentInstance; + (childNode as any).parentNode = node; expect(childNode.path).toEqual([node, childNode]); }); it('Should clear itself from selection service on destroy', () => { - const node = new IgxTreeNodeComponent(mockTree, mockSelectionService, mockTreeService, - mockNavService, mockCdr, mockAnimationService, mockElementRef, null); node.ngOnDestroy(); expect(mockSelectionService.ensureStateOnNodeDelete).toHaveBeenCalledWith(node); }); diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts b/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts index 6a1c369b335..dea6bb5b1db 100644 --- a/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts +++ b/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts @@ -45,7 +45,7 @@ export class HierarchicalRemoteService { } public getData(virtualizationState: any, grid: IgxHierarchicalGridComponent, cb?: (any) => void) { - this.hierarchyPipe = this.hierarchyPipe ?? new IgxGridHierarchicalPipe(grid); + this.hierarchyPipe = this.hierarchyPipe ?? new IgxGridHierarchicalPipe(); return this.http.get(this.buildUrl(virtualizationState, grid)).pipe( map(response => response), ) From 0c65ec80dc32420652f47ba7e49379fde94fcfe5 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 31 Jul 2025 18:27:40 +0300 Subject: [PATCH 2/7] refactor(*): change tests to account for new DI --- .../date-picker/date-picker.component.spec.ts | 16 +- .../date-time-editor.directive.spec.ts | 36 +++- .../directives/focus/focus.directive.spec.ts | 49 +++-- .../for-of/for_of.directive.spec.ts | 17 -- .../form-control.directive.spec.ts | 12 +- .../directives/mask/mask.directive.spec.ts | 16 +- .../scroll_inertia.directive.spec.ts | 84 ++++---- .../lib/drop-down/drop-down.component.spec.ts | 33 ++- .../toggle-animation-component.spec.ts | 17 +- .../services/direction/directionality.spec.ts | 22 +- .../simple-combo.component.spec.ts | 201 ++++-------------- 11 files changed, 220 insertions(+), 283 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index d208aed8cd2..245b87ca3b1 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -12,7 +12,7 @@ import { IgxOverlayService, OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings } from '../services/public_api'; -import { Component, DebugElement, ElementRef, EventEmitter, QueryList, Renderer2, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, Injector, QueryList, Renderer2, ViewChild } from '@angular/core'; import { By } from '@angular/platform-browser'; import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types'; import { DatePart } from '../directives/date-time-editor/date-time-editor.common'; @@ -849,7 +849,19 @@ describe('IgxDatePicker', () => { }, focus: () => { } }; - datePicker = new IgxDatePickerComponent(elementRef, 'en-US', overlay, mockInjector, renderer2, null, mockCdr); + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: IgxOverlayService, useValue: overlay }, + { provide: Injector, useValue: mockInjector }, + { provide: Renderer2, useValue: renderer2 }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + IgxDatePickerComponent + ] + }); + + datePicker = TestBed.inject(IgxDatePickerComponent); (datePicker as any).inputGroup = mockInputGroup; (datePicker as any).inputDirective = mockInputDirective; (datePicker as any).dateTimeEditor = mockDateEditor; diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts index 6c36128f68e..1c6d271a453 100644 --- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts @@ -1,7 +1,7 @@ import { IgxDateTimeEditorDirective } from './date-time-editor.directive'; import { DatePart } from './date-time-editor.common'; import { formatDate, registerLocaleData } from '@angular/common'; -import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges, DOCUMENT, inject } from '@angular/core'; +import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges, DOCUMENT, inject, Renderer2, ElementRef } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -12,21 +12,21 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { ViewEncapsulation } from '@angular/core'; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; +import { MaskParsingService } from '../mask/mask-parsing.service'; describe('IgxDateTimeEditor', () => { let dateTimeEditor: IgxDateTimeEditorDirective; describe('Unit tests', () => { - const maskParsingService = jasmine.createSpyObj('MaskParsingService', - ['parseMask', 'restoreValueFromMask', 'parseMaskValue', 'applyMask', 'parseValueFromMask']); - const renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute']); + let maskParsingService: jasmine.SpyObj; + let renderer2: jasmine.SpyObj; let locale = 'en'; - let elementRef = { nativeElement: null }; + let elementRef: ElementRef; let inputFormat: string; let displayFormat: string; let inputDate: string; const initializeDateTimeEditor = (_control?: NgControl) => { // const injector = { get: () => control }; - dateTimeEditor = new IgxDateTimeEditorDirective(renderer2, elementRef, maskParsingService, null, DOCUMENT, locale); + dateTimeEditor = TestBed.inject(IgxDateTimeEditorDirective); dateTimeEditor.inputFormat = inputFormat; dateTimeEditor.ngOnInit(); @@ -34,6 +34,26 @@ describe('IgxDateTimeEditor', () => { const changes: SimpleChanges = { inputFormat: change }; dateTimeEditor.ngOnChanges(changes); }; + + beforeEach(() => { + const mockNativeEl = document.createElement("div"); + (mockNativeEl as any).setSelectionRange = () => {}; + maskParsingService = jasmine.createSpyObj('MaskParsingService', + ['parseMask', 'restoreValueFromMask', 'parseMaskValue', 'applyMask', 'parseValueFromMask']); + renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute']); + elementRef = { nativeElement: mockNativeEl }; + + TestBed.configureTestingModule({ + providers: [ + { provide: MaskParsingService, useValue: maskParsingService }, + { provide: Renderer2, useValue: renderer2 }, + { provide: ElementRef, useValue: elementRef }, + { provide: DOCUMENT, useValue: document }, + { provide: NgControl, useValue: null }, + IgxDateTimeEditorDirective, + ] + }); + }) describe('Properties & Events', () => { it('should emit valueChange event on clear()', () => { inputFormat = 'dd/M/yy'; @@ -446,15 +466,11 @@ describe('IgxDateTimeEditor', () => { expect(dateTimeEditor.value).toEqual(new Date(2020, 5, 12, 23, 15, 14)); inputFormat = 'dd aa yyyy-MM mm-ss-hh'; - inputDate = '12 AM 2020-06 14-15-11'; - elementRef = { nativeElement: { value: inputDate } }; - initializeDateTimeEditor(); dateTimeEditor.inputFormat = inputFormat; expect(dateTimeEditor.mask).toEqual('00 LL 0000-00 00-00-00'); dateTimeEditor.value = new Date(2020, 5, 12, 11, 15, 14); - spyOnProperty((dateTimeEditor as any), 'inputValue', 'get').and.returnValue(inputDate); dateTimeEditor.increment(DatePart.AmPm); expect(dateTimeEditor.value).toEqual(new Date(2020, 5, 12, 23, 15, 14)); diff --git a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts index 30875d5ef94..8021b0f6736 100644 --- a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts @@ -1,9 +1,9 @@ -import { Component, DebugElement, ViewChild } from '@angular/core'; +import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxFocusDirective } from './focus.directive'; -import { EditorProvider } from '../../core/edit-provider'; +import { EDITOR_PROVIDER, EditorProvider } from '../../core/edit-provider'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxDatePickerComponent } from '../../date-picker/public_api'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -40,7 +40,7 @@ describe('igxFocus', () => { const button: DebugElement = fix.debugElement.query(By.css('button')); const divs = fix.debugElement.queryAll(By.css('div')); - const lastDiv = divs[divs.length - 1 ].nativeElement; + const lastDiv = divs[divs.length - 1].nativeElement; button.triggerEventHandler('click', null); tick(16); @@ -57,21 +57,40 @@ describe('igxFocus', () => { expect(document.activeElement).toBe(document.body); })); - it('Should return EditorProvider element to focus', fakeAsync(() => { - const elem = { nativeElement: document.createElement('button') }; + it('Should return EditorProvider element to focus', () => { + const elementRef = { nativeElement: document.createElement('button') }; const providerElem = document.createElement('input'); + const provider: EditorProvider = { getEditElement: () => providerElem - }; - let directive = new IgxFocusDirective(elem, null); - expect(directive.nativeElement).toBe(elem.nativeElement); - directive = new IgxFocusDirective(elem, []); - expect(directive.nativeElement).toBe(elem.nativeElement); - directive = new IgxFocusDirective(elem, [null]); - expect(directive.nativeElement).toBe(elem.nativeElement); - directive = new IgxFocusDirective(elem, [provider]); - expect(directive.nativeElement).toBe(providerElem); - })); + }; + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: EDITOR_PROVIDER, useValue: [provider] }, + IgxFocusDirective + ] + }); + + const directive = TestBed.inject(IgxFocusDirective); + expect(directive.nativeElement).toEqual(providerElem); + }); + + it('Should fallback to ElementRef.nativeElement if no EDITOR_PROVIDER', () => { + const elementRef = { nativeElement: document.createElement('button') }; + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: EDITOR_PROVIDER, useValue: null }, + IgxFocusDirective + ] + }); + + const directivew = TestBed.inject(IgxFocusDirective); + expect(directivew.nativeElement).toBe(elementRef.nativeElement); + }); it('Should correctly focus igx-checkbox, igx-radio, igx-switch and igx-date-picker', fakeAsync(() => { const fix = TestBed.createComponent(CheckboxPickerComponent); diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts index 7e8c4317971..68e2a4d7af6 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts @@ -1348,24 +1348,7 @@ export class TestIgxForOfDirective extends IgxForOfDirective { public scrStepArray = []; public scrTopArray = []; - constructor() { - const viewContainer = inject(ViewContainerRef); - const template = inject>>(TemplateRef); - const differs = inject(IterableDiffers); - const changeDet = inject(ChangeDetectorRef); - const zone = inject(NgZone); - const syncService = inject(IgxForOfScrollSyncService); - const platformUtil = inject(PlatformUtil); - - super(viewContainer, template, differs, changeDet, zone, syncService, platformUtil, document); - this.viewContainer = viewContainer; - this.template = template; - this.differs = differs; - this.changeDet = changeDet; - this.zone = zone; - this.syncService = syncService; - } public override onScroll(evt) { const ind = this.scrTopArray.length - 1; const prevScrTop = ind < 0 ? 0 : this.scrTopArray[ind]; diff --git a/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.spec.ts index d7fbf5bec89..7de8dfb9ae5 100644 --- a/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/form-control/form-control.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, ViewChild } from '@angular/core'; +import { Component, DebugElement, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -17,6 +17,14 @@ describe('IgcFormControlDirective - ', () => { beforeEach(waitForAsync(() => { defineComponents(IgcRatingComponent); + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: Renderer2, useValue: renderer2Mock }, + IgcFormControlDirective + ] + }); })); const elementRef = { nativeElement: document.createElement('igc-rating') }; @@ -35,7 +43,7 @@ describe('IgcFormControlDirective - ', () => { ]); it('should correctly implement interface methods - ControlValueAccessor ', () => { - directive = new IgcFormControlDirective(elementRef, renderer2Mock); + directive = TestBed.inject(IgcFormControlDirective); directive.registerOnChange(mockNgControl.registerOnChangeCb); directive.registerOnTouched(mockNgControl.registerOnTouchedCb); diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts index 3bd850f15f6..9fc1f4b5e46 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts @@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms'; import { IgxMaskDirective } from './mask.directive'; import { UIInteractions } from '../../test-utils/ui-interactions.spec'; -import { Replaced } from './mask-parsing.service'; +import { MaskParsingService, Replaced } from './mask-parsing.service'; import { By } from '@angular/platform-browser'; import { IgxInputGroupComponent } from '../../input-group/input-group.component'; import { IgxInputDirective } from '../input/input.directive'; +import { PlatformUtil } from '../../core/utils'; describe('igxMask', () => { // TODO: Refactor tests to reuse components @@ -609,7 +610,18 @@ describe('igxMaskDirective ControlValueAccessor Unit', () => { // init renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute']); - mask = new IgxMaskDirective({ nativeElement: {} } as any, mockParser, renderer2, platformMock as any); + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: { nativeElement: {} } }, + { provide: MaskParsingService, useValue: mockParser }, + { provide: Renderer2, useValue: renderer2 }, + { provide: PlatformUtil, useValue: platformMock }, + IgxMaskDirective + ] + }); + + mask = TestBed.inject(IgxMaskDirective); mask.mask = format; mask.registerOnChange(mockNgControl.registerOnChangeCb); mask.registerOnTouched(mockNgControl.registerOnTouchedCb); diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts index 6237f0f421a..2012ed3bcbc 100644 --- a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, Directive, NgZone, OnInit, ViewChild, ElementRef, inject } from '@angular/core'; +import { Component, Directive, NgZone, OnInit, ViewChild, ElementRef } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxScrollInertiaDirective } from './scroll_inertia.directive'; @@ -76,13 +76,25 @@ describe('Scroll Inertia Directive - Scrolling', () => { beforeEach(() => { const mockZone = jasmine.createSpyObj('NgZone', ['runOutsideAngular']); + const mockScheduler = { + notify: () => { }, + subscribe: () => ({ unsubscribe: () => { } }) + }; scrollContainerMock = { scrollLeft: 0, scrollTop: 0, offsetHeight: 500, children: [{ style: { width: '50px', height: '500px', scrollHeight: 100 } }] }; - scrollInertiaDir = new IgxTestScrollInertiaDirective(null, mockZone); + + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: null }, + IgxTestScrollInertiaDirective + ] + }); + + scrollInertiaDir = TestBed.inject(IgxTestScrollInertiaDirective); scrollInertiaDir.IgxScrollInertiaScrollContainer = scrollContainerMock; scrollInertiaDir.smoothingDuration = 0; }); @@ -94,14 +106,14 @@ describe('Scroll Inertia Directive - Scrolling', () => { // Unit test for wheel - wheelDelataY/wheelDeltaX supported on Chrome, Safari, Opera. it('should change scroll top for related scrollbar if onWheel is executed with wheelDeltaY.', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'vertical'; - const evt = {wheelDeltaY: -240, preventDefault: () => {}}; + const evt = { wheelDeltaY: -240, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(2 * scrollInertiaDir.wheelStep); }); it('should change scroll left for related scrollbar if onWheel is executed with wheelDeltaX.', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - const evt = {wheelDeltaX: -240, preventDefault: () => {}}; + const evt = { wheelDeltaX: -240, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep); @@ -110,14 +122,14 @@ describe('Scroll Inertia Directive - Scrolling', () => { // Unit tests for wheel on other browsers that don't provide wheelDelta - use deltaX and deltaY. it('should change scroll top for related scrollbar if onWheel is executed with deltaY.', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'vertical'; - const evt = {deltaY: 1, preventDefault: () => {}}; + const evt = { deltaY: 1, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(scrollInertiaDir.wheelStep); }); it('should change scroll left for related scrollbar if onWheel is executed with deltaX.', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - const evt = {deltaX: 1, preventDefault: () => {}}; + const evt = { deltaX: 1, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep); @@ -125,53 +137,53 @@ describe('Scroll Inertia Directive - Scrolling', () => { it('should not throw error if there is no associated scrollbar and wheel event is called.', () => { scrollInertiaDir.IgxScrollInertiaScrollContainer = null; - const evt = {preventDefault: () => {}}; - expect (() => scrollInertiaDir.onWheel(evt)).not.toThrow(); + const evt = { preventDefault: () => { } }; + expect(() => scrollInertiaDir.onWheel(evt)).not.toThrow(); }); - it('should change scroll left when shift + wheel is triggered' , () => { + it('should change scroll left when shift + wheel is triggered', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - const evt = {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}}; + const evt = { shiftKey: true, wheelDeltaY: -240, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep); }); - it('should be able to scroll to left/right when shift + wheel is triggered' , () => { + it('should be able to scroll to left/right when shift + wheel is triggered', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - let evt = {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}}; + let evt = { shiftKey: true, wheelDeltaY: -240, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep); - evt = {shiftKey: true, wheelDeltaY: 120, preventDefault: () => {}}; + evt = { shiftKey: true, wheelDeltaY: 120, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep); }); - it('should change scroll left when shift + wheel is called with with deltaY' , () => { + it('should change scroll left when shift + wheel is called with with deltaY', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - const evt = {shiftKey: true, deltaY: 1, preventDefault: () => {}}; + const evt = { shiftKey: true, deltaY: 1, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep); }); - it('should be able to scroll to left/right when shift + wheel is called with with deltaY' , () => { + it('should be able to scroll to left/right when shift + wheel is called with with deltaY', () => { scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal'; - let evt = {shiftKey: true, deltaY: 1, preventDefault: () => {}}; + let evt = { shiftKey: true, deltaY: 1, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep); - evt = {shiftKey: true, deltaY: -1, preventDefault: () => {}}; + evt = { shiftKey: true, deltaY: -1, preventDefault: () => { } }; scrollInertiaDir.onWheel(evt); expect(scrollContainerMock.scrollTop).toEqual(0); @@ -185,7 +197,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -194,7 +206,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: -100 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -211,7 +223,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -220,7 +232,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: -100 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -234,7 +246,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -248,7 +260,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); evt = { @@ -256,7 +268,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: -10, pageY: -50 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -274,7 +286,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -283,7 +295,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: -100, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -296,10 +308,10 @@ describe('Scroll Inertia Directive - Scrolling', () => { })); it('should not throw errors on touch start/move/end if no scrollbar is associated.', () => { scrollInertiaDir.IgxScrollInertiaScrollContainer = null; - const evt = {preventDefault: () => {}}; - expect (() => scrollInertiaDir.onTouchStart(evt)).not.toThrow(); - expect (() => scrollInertiaDir.onTouchMove(evt)).not.toThrow(); - expect (() => scrollInertiaDir.onTouchEnd(evt)).not.toThrow(); + const evt = { preventDefault: () => { } }; + expect(() => scrollInertiaDir.onTouchStart(evt)).not.toThrow(); + expect(() => scrollInertiaDir.onTouchMove(evt)).not.toThrow(); + expect(() => scrollInertiaDir.onTouchEnd(evt)).not.toThrow(); }); }); @@ -310,12 +322,6 @@ describe('Scroll Inertia Directive - Scrolling', () => { }) export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { - constructor() { - const element = inject(ElementRef); - const _zone = inject(NgZone); - - super(element, _zone); - } public override onWheel(evt) { super.onWheel(evt); } @@ -327,7 +333,7 @@ export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { super.onTouchEnd(evt); } public override onTouchMove(evt) { - return super.onTouchMove(evt); + return super.onTouchMove(evt); } public override _inertiaInit(speedX, speedY) { @@ -361,7 +367,7 @@ export class ScrollInertiaComponent implements OnInit { public scrLeftArray = []; public scrLeftStepArray = []; - public ngOnInit() { + public ngOnInit() { this.scrInertiaDir.IgxScrollInertiaScrollContainer = this.scrollContainer.nativeElement; } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 4aa4089fef9..f53ca1001ea 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList } from '@angular/core'; +import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList, ChangeDetectorRef, DOCUMENT } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -47,9 +47,21 @@ describe('IgxDropDown ', () => { mockSelection.get.and.returnValue(new Set([])); const mockForOf = jasmine.createSpyObj('IgxForOfDirective', ['totalItemCount']); const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }}); + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + { provide: ElementRef, useValue: { nativeElement: null } }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: DOCUMENT, useValue: mockDocument }, + IgxSelectionAPIService, + IgxDropDownComponent + ] + }); + + dropdown = TestBed.inject(IgxDropDownComponent); + }); it('should notify when selection has changed', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); spyOn(dropdown.selectionChanging, 'emit').and.callThrough(); @@ -63,8 +75,6 @@ describe('IgxDropDown ', () => { expect(dropdown.selectionChanging.emit).toHaveBeenCalledTimes(2); }); it('should fire selectionChanging with correct args', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); spyOn(dropdown.selectionChanging, 'emit').and.callThrough(); @@ -88,8 +98,6 @@ describe('IgxDropDown ', () => { expect(dropdown.selectionChanging.emit).toHaveBeenCalledWith(newSelectionArgs); }); it('should notify when selection is cleared', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); spyOn(dropdown.selectionChanging, 'emit').and.callThrough(); @@ -119,8 +127,6 @@ describe('IgxDropDown ', () => { expect(dropdown.selectionChanging.emit).toHaveBeenCalledWith(args); }); it('setSelectedItem should return selected item', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; (dropdown as any).virtDir.igxForOf = data; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -133,8 +139,6 @@ describe('IgxDropDown ', () => { expect(selectedItem.index).toEqual(3); }); it('setSelectedItem should return null when selection is cleared', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; (dropdown as any).virtDir.igxForOf = data; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -147,8 +151,6 @@ describe('IgxDropDown ', () => { expect(dropdown.selectedItem).toBeNull(); }); it('toggle should call open method when dropdown is collapsed', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); spyOnProperty(dropdown, 'collapsed', 'get').and.returnValue(true); @@ -158,8 +160,6 @@ describe('IgxDropDown ', () => { expect(dropdown.open).toHaveBeenCalledTimes(1); }); it('toggle should call close method when dropdown is opened', () => { - const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); (dropdown as any).virtDir = mockForOf; const mockToggle = jasmine.createSpyObj('IgxToggleDirective', ['open']); mockToggle.isClosing = false; @@ -172,9 +172,8 @@ describe('IgxDropDown ', () => { expect(dropdown.close).toHaveBeenCalledTimes(1); }); it('should remove selection on destroy', () => { - const selectionService = new IgxSelectionAPIService(); + const selectionService = TestBed.inject(IgxSelectionAPIService); const selectionDeleteSpy = spyOn(selectionService, 'delete'); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, mockDocument, selectionService); dropdown.ngOnDestroy(); expect(selectionDeleteSpy).toHaveBeenCalled(); }); diff --git a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts index 343d6d9a7b5..639ebbdcb27 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts @@ -1,16 +1,11 @@ -import { Inject } from '@angular/core'; import { TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { noop } from 'rxjs'; -import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; -import { AnimationService } from '../services/animation/animation'; import { ANIMATION_TYPE, ToggleAnimationPlayer } from './toggle-animation-component'; import { growVerIn, growVerOut } from 'igniteui-angular/animations'; +import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; class MockTogglePlayer extends ToggleAnimationPlayer { - constructor(@Inject(IgxAngularAnimationService) animationService: AnimationService) { - super(animationService); - } } describe('Toggle animation component', () => { @@ -19,12 +14,16 @@ describe('Toggle animation component', () => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule + ], + providers: [ + { provide: IgxAngularAnimationService, useValue: mockBuilder }, + MockTogglePlayer ] }).compileComponents(); }); describe('Unit tests', () => { it('Should initialize player with give settings', () => { - const player = new MockTogglePlayer(mockBuilder); + const player = TestBed.inject(MockTogglePlayer); const startPlayerSpy = spyOn(player, 'startPlayer'); const mockEl = jasmine.createSpyObj('mockRef', ['focus'], {}); player.playOpenAnimation(mockEl); @@ -43,7 +42,7 @@ describe('Toggle animation component', () => { }); it('Should allow overwriting animation setting with falsy value', () => { - const player = new MockTogglePlayer(mockBuilder); + const player = TestBed.inject(MockTogglePlayer); expect(player.animationSettings).toEqual({ openAnimation: growVerIn, closeAnimation: growVerOut @@ -53,7 +52,7 @@ describe('Toggle animation component', () => { }); it('Should not throw if called with a falsy animationSettings value', () => { - const player = new MockTogglePlayer(mockBuilder); + const player = TestBed.inject(MockTogglePlayer); player.animationSettings = null; const mockCb = jasmine.createSpy('mockCb'); const mockElement = jasmine.createSpy('element'); diff --git a/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts b/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts index fc558c8d314..ad29ace4c56 100644 --- a/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts +++ b/projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts @@ -37,17 +37,25 @@ describe('IgxDirectionality', () => { describe('RLT, LTR', () => { let fakeDoc: FakeDoc; - beforeEach(() => { - fakeDoc = {body: {}, documentElement: {}}; - }); let expectedRes: string; let dirInstance: IgxDirectionality; + + beforeEach(() => { + fakeDoc = { body: {}, documentElement: {} }; + + TestBed.configureTestingModule({ + providers: [ + { provide: DOCUMENT, useValue: fakeDoc }, + IgxDirectionality + ] + }); + }); it('should read dir from html if not specified on the body', () => { expectedRes = 'rtl'; fakeDoc.documentElement.dir = expectedRes; - dirInstance = new IgxDirectionality(fakeDoc); + dirInstance = TestBed.inject(IgxDirectionality); expect(dirInstance.value).toEqual(expectedRes); }); it('should read dir from body even it is also specified on the html element', () => { @@ -55,14 +63,14 @@ describe('IgxDirectionality', () => { expectedRes = 'rtl'; fakeDoc.body.dir = expectedRes; - dirInstance = new IgxDirectionality(fakeDoc); + dirInstance = TestBed.inject(IgxDirectionality); expect(dirInstance.value).toEqual(expectedRes); }); it('should default to ltr if nothing specified', () => { expectedRes = 'ltr'; - dirInstance = new IgxDirectionality(fakeDoc); + dirInstance = TestBed.inject(IgxDirectionality); expect(dirInstance.value).toEqual(expectedRes); }); @@ -70,7 +78,7 @@ describe('IgxDirectionality', () => { fakeDoc.documentElement.dir = 'none'; fakeDoc.body.dir = 'irrelevant'; - dirInstance = new IgxDirectionality(fakeDoc); + dirInstance = TestBed.inject(IgxDirectionality); expect(dirInstance.value).toEqual('ltr'); }); }); diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index f938c59b8a0..65896388afd 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -1,5 +1,5 @@ import { AsyncPipe } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DebugElement, ElementRef, Injector, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; @@ -8,7 +8,7 @@ import { IgxComboDropDownComponent } from '../combo/combo-dropdown.component'; import { RemoteDataService } from '../combo/combo.component.spec'; import { IComboSelectionChangingEventArgs, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective, IgxComboToggleIconDirective } from '../combo/public_api'; import { IgxSelectionAPIService } from '../core/selection'; -import { IBaseCancelableBrowserEventArgs } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs, PlatformUtil } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxInputState, IgxLabelDirective } from '../input-group/public_api'; import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy } from '../services/public_api'; @@ -16,6 +16,7 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from './public_api'; import { IgxGridComponent } from '../grids/grid/grid.component'; import { IGX_GRID_DIRECTIVES } from '../grids/grid/public_api'; +import { IgxComboAPIService } from '../combo/combo.api'; const CSS_CLASS_COMBO = 'igx-combo'; @@ -71,7 +72,32 @@ describe('IgxSimpleCombo', () => { }); mockSelection.get.and.returnValue(new Set([])); const platformUtil = null; - const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }}); + const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { + 'body': document.createElement('div'), + 'defaultView': { + getComputedStyle: () => ({}) + } + }); + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [IgxSimpleComboComponent], + providers: [ + { provide: ElementRef, useValue: elementRef }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: IgxSelectionAPIService, useValue: mockSelection }, + { provide: IgxComboAPIService, useValue: mockComboService }, + { provide: PlatformUtil, useValue: platformUtil }, + { provide: DOCUMENT, useValue: mockDocument }, + { provide: Injector, useValue: mockInjector }, + IgxSimpleComboComponent, + IgxSelectionAPIService + ] + }); + + combo = TestBed.inject(IgxSimpleComboComponent); + }); + jasmine.getEnv().allowRespy(true); afterAll(() => { @@ -79,15 +105,6 @@ describe('IgxSimpleCombo', () => { }); it('should properly call dropdown methods on toggle', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']); combo.ngOnInit(); combo.dropdown = dropdown; @@ -109,15 +126,6 @@ describe('IgxSimpleCombo', () => { expect(combo.collapsed).toBe(false); }); it('should call dropdown toggle with correct overlaySettings', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']); combo.ngOnInit(); combo.dropdown = dropdown; @@ -134,15 +142,6 @@ describe('IgxSimpleCombo', () => { expect(combo.dropdown.toggle).toHaveBeenCalledWith(expectedSettings); }); it('should properly get/set displayKey', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnInit(); combo.valueKey = 'field'; expect(combo.displayKey).toEqual(combo.valueKey); @@ -151,17 +150,6 @@ describe('IgxSimpleCombo', () => { expect(combo.displayKey === combo.valueKey).toBeFalsy(); }); it('should select items through select method', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); const comboInput = jasmine.createSpyObj('IgxInputDirective', ['value']); combo.ngOnInit(); @@ -193,15 +181,6 @@ describe('IgxSimpleCombo', () => { expect(combo.value).toEqual(selectedItem); }); it('should emit owner on `opening` and `closing`', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnInit(); spyOn(combo.opening, 'emit').and.callThrough(); spyOn(combo.closing, 'emit').and.callThrough(); @@ -239,17 +218,6 @@ describe('IgxSimpleCombo', () => { sub.unsubscribe(); }); it('should fire selectionChanging event on item selection', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); combo.ngOnInit(); combo.data = data; @@ -290,17 +258,6 @@ describe('IgxSimpleCombo', () => { }); }); it('should properly emit added and removed values in change event on single value selection', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); combo.ngOnInit(); combo.data = complexData; @@ -333,17 +290,6 @@ describe('IgxSimpleCombo', () => { expect(selectionSpy).toHaveBeenCalledWith(expectedResults); }); it('should properly handle selection manipulation through selectionChanging emit', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); combo.ngOnInit(); combo.data = data; @@ -360,16 +306,6 @@ describe('IgxSimpleCombo', () => { expect(combo.selection).toEqual(undefined); }); it('should not throw error when setting data to null', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnInit(); let errorMessage = ''; try { @@ -383,16 +319,6 @@ describe('IgxSimpleCombo', () => { expect(combo.data.length).toBe(0); }); it('should not throw error when setting data to undefined', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnInit(); let errorMessage = ''; try { @@ -406,16 +332,6 @@ describe('IgxSimpleCombo', () => { expect(combo.data.length).toBe(0); }); it('should properly handleInputChange', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem', 'navigateFirst']); combo.ngOnInit(); combo.data = data; @@ -451,16 +367,6 @@ describe('IgxSimpleCombo', () => { expect(combo.searchInputUpdate.emit).toHaveBeenCalledTimes(2); }); it('should be able to cancel searchInputUpdate', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnInit(); combo.data = data; combo.searchInputUpdate.subscribe((e) => { @@ -479,16 +385,6 @@ describe('IgxSimpleCombo', () => { expect(matchSpy).toHaveBeenCalledTimes(1); }); it('should not open on click if combo is disabled', () => { - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - mockSelection as any, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']); const spyObj = jasmine.createSpyObj('event', ['stopPropagation', 'preventDefault']); const comboInput = jasmine.createSpyObj('IgxInputDirective', ['value']); @@ -503,17 +399,6 @@ describe('IgxSimpleCombo', () => { expect(combo.dropdown.collapsed).toBeTruthy(); }); it('should not clear value when combo is disabled', () => { - const selectionService = new IgxSelectionAPIService(); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem', 'focusedItem']); const spyObj = jasmine.createSpyObj('event', ['stopPropagation']); combo.ngOnInit(); @@ -532,19 +417,9 @@ describe('IgxSimpleCombo', () => { }); it('should delete the selection on destroy', () => { - const selectionService = new IgxSelectionAPIService(); + const selectionService = TestBed.inject(IgxSelectionAPIService); const comboClearSpy = spyOn(mockComboService, 'clear'); const selectionDeleteSpy = spyOn(selectionService, 'delete'); - combo = new IgxSimpleComboComponent( - elementRef, - mockCdr, - selectionService, - mockComboService, - platformUtil, - mockDocument, - null, - mockInjector - ); combo.ngOnDestroy(); expect(comboClearSpy).toHaveBeenCalled(); expect(selectionDeleteSpy).toHaveBeenCalled(); @@ -925,7 +800,7 @@ describe('IgxSimpleCombo', () => { expect(clearButtonAfterEmptyObject).not.toBeNull(); }); })); - it('should properly assign the resource string to the aria-label of the clear button',() => { + it('should properly assign the resource string to the aria-label of the clear button', () => { combo.toggle(); fixture.detectChanges(); @@ -963,9 +838,9 @@ describe('IgxSimpleCombo', () => { fixture = TestBed.createComponent(IgxComboInContainerTestComponent); fixture.detectChanges(); combo = fixture.componentInstance.combo; - combo.data = ['New York', 'Sofia', undefined, 'Istanbul','Paris']; + combo.data = ['New York', 'Sofia', undefined, 'Istanbul', 'Paris']; - expect(combo.data).toEqual(['New York', 'Sofia', 'Istanbul','Paris']); + expect(combo.data).toEqual(['New York', 'Sofia', 'Istanbul', 'Paris']); }); it('should bind combo data to array of objects', () => { fixture = TestBed.createComponent(IgxSimpleComboSampleComponent); @@ -2250,7 +2125,7 @@ describe('IgxSimpleCombo', () => { combo.valueKey = undefined; combo.displayKey = undefined; combo.groupKey = undefined; - combo.data = [ 0, false, '', null, NaN, undefined]; + combo.data = [0, false, '', null, NaN, undefined]; fixture.componentInstance.form.resetForm(); fixture.detectChanges(); @@ -2328,7 +2203,7 @@ describe('IgxSimpleCombo', () => { combo.valueKey = undefined; combo.displayKey = undefined; combo.groupKey = undefined; - combo.data = [ 0, false, '', null, NaN, undefined]; + combo.data = [0, false, '', null, NaN, undefined]; fixture.componentInstance.form.resetForm(); fixture.detectChanges(); @@ -2422,7 +2297,7 @@ describe('IgxSimpleCombo', () => { combo.data = [ { field: '0', value: 0 }, { field: 'false', value: false }, - { field: 'empty string', value: ''}, + { field: 'empty string', value: '' }, { field: 'null', value: null }, { field: 'NaN', value: NaN }, { field: 'undefined', value: undefined }, @@ -2584,7 +2459,7 @@ describe('IgxSimpleCombo', () => { // primitive data - undefined is not displayed in the dropdown combo.valueKey = undefined; combo.displayKey = undefined; - combo.data = [ 0, false, '', null, NaN, undefined]; + combo.data = [0, false, '', null, NaN, undefined]; reactiveForm.resetForm(); fixture.detectChanges(); @@ -3014,7 +2889,7 @@ export class IgxSimpleComboIconTemplatesComponent { @ViewChild('combo', { read: IgxSimpleComboComponent, static: true }) public combo: IgxSimpleComboComponent; - public data: any[] = [ + public data: any[] = [ { name: 'Sofia', id: '1' }, { name: 'London', id: '2' }, ]; From 0991fd042bc503d8865fac10ce35f160a79c4967 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 5 Aug 2025 09:57:43 +0300 Subject: [PATCH 3/7] refactor(*): change tests to account for new DI --- .../days-view/days-view.component.spec.ts | 4 + .../date-range-picker.component.spec.ts | 95 +++------ .../src/lib/grids/grid-navigation.service.ts | 5 +- .../src/lib/grids/grid/grid.component.ts | 2 +- .../grids/grid/grid.multi-row-layout.spec.ts | 6 +- .../hierarchical-grid.spec.ts | 184 +++++++++--------- .../navigation-drawer.component.spec.ts | 13 +- .../src/lib/select/select.component.spec.ts | 22 ++- .../src/lib/services/overlay/overlay.spec.ts | 160 ++++++--------- 9 files changed, 226 insertions(+), 265 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.spec.ts index 3759cc71e98..2f511d7955a 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.spec.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.spec.ts @@ -6,6 +6,7 @@ import { UIInteractions } from "../../test-utils/ui-interactions.spec"; import { CalendarDay } from "../common/model"; import { DateRangeDescriptor, DateRangeType } from 'igniteui-webcomponents'; import { ScrollDirection } from "../calendar"; +import { KeyboardNavigationService } from '../calendar.services'; const TODAY = new Date(2024, 6, 12); @@ -15,6 +16,9 @@ describe("Days View Component", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [InitDaysViewComponent], + providers: [ + KeyboardNavigationService + ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 79ea947956f..9e964d02be2 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing'; -import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy, inject } from '@angular/core'; +import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy, inject, ApplicationRef, NgZone, DOCUMENT, ChangeDetectorRef, ElementRef } from '@angular/core'; import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api'; import { PickerInteractionMode } from '../date-common/types'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -8,13 +8,13 @@ import { By } from '@angular/platform-browser'; import { ControlsFunction } from '../test-utils/controls-functions.spec'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { HelperTestFunctions } from '../test-utils/calendar-helper-utils'; -import { CancelableEventArgs } from '../core/utils'; +import { CancelableEventArgs, PlatformUtil } from '../core/utils'; import { DateRange, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent } from './date-range-picker-inputs.common'; import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api'; import { DateRangeType } from '../core/dates'; import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api'; import { AutoPositionStrategy, IgxOverlayService } from '../services/public_api'; -import { AnimationMetadata, AnimationOptions } from '@angular/animations'; +import { AnimationBuilder, AnimationMetadata, AnimationOptions } from '@angular/animations'; import { IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api'; import { Subject } from 'rxjs'; import { AsyncPipe } from '@angular/common'; @@ -25,6 +25,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { registerLocaleData } from "@angular/common"; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; +import { KeyboardNavigationService } from '../calendar/calendar.services'; // The number of milliseconds in one day const DEBOUNCE_TIME = 16; @@ -48,18 +49,9 @@ const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive'; describe('IgxDateRangePicker', () => { describe('Unit tests: ', () => { let mockElement: any; - let mockApplicationRef: any; - let mockAnimationBuilder: any; - let mockDocument: any; - let mockNgZone: any; - let mockPlatformUtil: any; - let overlay: IgxOverlayService; - let mockInjector; let mockCalendar: IgxCalendarComponent; let mockDaysView: any; - let mockAnimationService: AnimationService; const elementRef = { nativeElement: null }; - const platform = {} as any; const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb', @@ -79,54 +71,21 @@ describe('IgxDateRangePicker', () => { }; mockElement.parent = mockElement; mockElement.parentElement = mockElement; - mockApplicationRef = { attachView: (h: any) => { }, detachView: (h: any) => { } }; - mockInjector = jasmine.createSpyObj('Injector', { - get: mockNgControl + + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: ElementRef, useValue: elementRef }, + IgxAngularAnimationService, + IgxOverlayService, + IgxCalendarComponent, + KeyboardNavigationService, + ChangeDetectorRef, + IgxDateRangePickerComponent + ] }); - mockAnimationBuilder = { - build: (a: AnimationMetadata | AnimationMetadata[]) => ({ - create: (e: any, opt?: AnimationOptions) => ({ - onDone: (fn: any) => { }, - onStart: (fn: any) => { }, - onDestroy: (fn: any) => { }, - init: () => { }, - hasStarted: () => true, - play: () => { }, - pause: () => { }, - restart: () => { }, - finish: () => { }, - destroy: () => { }, - rest: () => { }, - setPosition: (p: any) => { }, - getPosition: () => 0, - parentPlayer: {}, - totalTime: 0, - beforeDestroy: () => { }, - _renderer: { - engine: { - players: [ - {} - ] - } - } - }) - }) - }; - mockDocument = { - body: mockElement, - defaultView: mockElement, - documentElement: document.documentElement, - createElement: () => mockElement, - appendChild: () => { }, - addEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { }, - removeEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { } - }; - mockNgZone = {}; - mockPlatformUtil = { isIOS: false }; - mockAnimationService = new IgxAngularAnimationService(mockAnimationBuilder); - overlay = new IgxOverlayService( - mockApplicationRef, mockDocument, mockNgZone, mockPlatformUtil, mockAnimationService); - mockCalendar = new IgxCalendarComponent(platform, 'en'); + + mockCalendar = TestBed.inject(IgxCalendarComponent); mockDaysView = { focusActiveDate: jasmine.createSpy() @@ -135,7 +94,7 @@ describe('IgxDateRangePicker', () => { }); /* eslint-enable @typescript-eslint/no-unused-vars */ it('should set range dates correctly through selectRange method', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, null, null, null, null); + const dateRange = TestBed.inject(IgxDateRangePickerComponent); // dateRange.calendar = calendar; let startDate = new Date(2020, 3, 7); const endDate = new Date(2020, 6, 27); @@ -153,7 +112,7 @@ describe('IgxDateRangePicker', () => { }); it('should emit valueChange on selection', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, null, null, null, null); + const dateRange = TestBed.inject(IgxDateRangePickerComponent); // dateRange.calendar = calendar; spyOn(dateRange.valueChange, 'emit'); let startDate = new Date(2017, 4, 5); @@ -180,7 +139,7 @@ describe('IgxDateRangePicker', () => { const rangeUpdate = { start: new Date(2020, 2, 22), end: new Date(2020, 2, 25) }; // init - const dateRangePicker = new IgxDateRangePickerComponent(null, 'en', platform, null, null, null, null); + const dateRangePicker = TestBed.inject(IgxDateRangePickerComponent); dateRangePicker.registerOnChange(mockNgControl.registerOnChangeCb); dateRangePicker.registerOnTouched(mockNgControl.registerOnTouchedCb); spyOn(dateRangePicker as any, 'handleSelection').and.callThrough(); @@ -214,7 +173,7 @@ describe('IgxDateRangePicker', () => { }); it('should validate correctly minValue and maxValue', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null); + const dateRange = TestBed.inject(IgxDateRangePickerComponent); dateRange.ngOnInit(); // dateRange.calendar = calendar; @@ -239,7 +198,7 @@ describe('IgxDateRangePicker', () => { }); it('should disable calendar dates when min and/or max values as dates are provided', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, overlay); + const dateRange = TestBed.inject(IgxDateRangePickerComponent); dateRange.ngOnInit(); spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar); @@ -255,7 +214,7 @@ describe('IgxDateRangePicker', () => { }); it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, null, null, null); + const dateRange = TestBed.inject(IgxDateRangePickerComponent); dateRange.ngOnInit(); spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar); @@ -687,7 +646,7 @@ describe('IgxDateRangePicker', () => { .withContext('focus should return to the picker input') .toBeTrue(); expect(dateRange.isFocused).toBeTrue(); - })); + })); it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => { fixture.componentInstance.mode = PickerInteractionMode.DropDown; @@ -1791,8 +1750,8 @@ export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledCompon export class DateRangeReactiveFormComponent { private fb = inject(UntypedFormBuilder); - @ViewChild('range', {read: IgxDateRangePickerComponent}) public dateRange: IgxDateRangePickerComponent; - @ViewChild('twoInputs', {read: IgxDateRangePickerComponent}) public dateRangeWithTwoInputs: IgxDateRangePickerComponent; + @ViewChild('range', { read: IgxDateRangePickerComponent }) public dateRange: IgxDateRangePickerComponent; + @ViewChild('twoInputs', { read: IgxDateRangePickerComponent }) public dateRangeWithTwoInputs: IgxDateRangePickerComponent; public form = this.fb.group({ range: ['', Validators.required], diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 279b75b580d..a0be2d0f54d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -33,6 +33,7 @@ export interface IActiveNode { /** @hidden */ @Injectable() export class IgxGridNavigationService { + protected platform = inject(PlatformUtil); public grid: GridType; public _activeNode: IActiveNode = {} as IActiveNode; public lastActiveNode: IActiveNode = {} as IActiveNode; @@ -44,9 +45,7 @@ export class IgxGridNavigationService { public set activeNode(value: IActiveNode) { this._activeNode = value; - } - - protected platform = inject(PlatformUtil) + } public handleNavigation(event: KeyboardEvent) { const key = event.key.toLowerCase(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 0e7448a8795..6acc4b6f80b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1346,7 +1346,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, private _setupNavigationService() { if (this.hasColumnLayouts) { - this.navigation = new IgxGridMRLNavigationService(); + this.navigation = this.injector.get(IgxGridMRLNavigationService); this.navigation.grid = this; } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts index cbaee4b0fcd..916187ce96e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts @@ -11,6 +11,7 @@ import { ICellPosition } from '../common/events'; import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec'; import { IgxColumnGroupComponent } from '../columns/column-group.component'; import { IgxColumnComponent } from '../columns/column.component'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const GRID_COL_THEAD_CLASS = '.igx-grid-th'; const GRID_MRL_BLOCK_CLASS = `.${GRID_MRL_BLOCK}`; @@ -24,6 +25,9 @@ describe('IgxGrid - multi-row-layout #grid', () => { NoopAnimationsModule, ColumnLayoutTestComponent, ColumnLayoutAndGroupsTestComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); @@ -677,7 +681,7 @@ describe('IgxGrid - multi-row-layout #grid', () => { gridFirstRow = grid.rowList.first; GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow); - GridFunctions.verifyDOMMatchesLayoutSettings(grid,gridFirstRow, fixture.componentInstance.colGroups); + GridFunctions.verifyDOMMatchesLayoutSettings(grid, gridFirstRow, fixture.componentInstance.colGroups); })); it('should initialize correctly when grid width is in % and no widths are set for columns.', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 8cc2d9cb83e..bc10e839e23 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -21,6 +21,7 @@ import { IgxCellHeaderTemplateDirective } from '../columns/templates.directive'; import { CellType, ColumnType, IGridCellEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxRowEditActionsDirective, IgxRowEditTextDirective } from '../public_api'; import { getComponentSize } from '../../core/utils'; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('Basic IgxHierarchicalGrid #hGrid', () => { @@ -41,6 +42,9 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { IgxHierarchicalGridCustomFilteringTemplateComponent, IgxHierarchicalGridToggleRIAndColsComponent, IgxHierarchicalGridMCHComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) @@ -57,9 +61,9 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { it('should render expansion indicator as the first element of each expandable row.', () => { fixture.componentInstance.data = [ - {ID: 0, ProductName: 'Product: A0'}, - {ID: 1, ProductName: 'Product: A1', childData: fixture.componentInstance.generateDataUneven(1, 1)}, - {ID: 2, ProductName: 'Product: A2', childData: fixture.componentInstance.generateDataUneven(1, 1)} + { ID: 0, ProductName: 'Product: A0' }, + { ID: 1, ProductName: 'Product: A1', childData: fixture.componentInstance.generateDataUneven(1, 1) }, + { ID: 2, ProductName: 'Product: A2', childData: fixture.componentInstance.generateDataUneven(1, 1) } ]; fixture.detectChanges(); const row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; @@ -129,14 +133,14 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { expect(hierarchicalGrid.expansionStates.size).toEqual(0); }); - it ('checks if attributes are correctly assigned when grid has or does not have data', () => { + it('checks if attributes are correctly assigned when grid has or does not have data', () => { // Checks if igx-grid__tbody-content attribute is null when there is data in the grid const container = fixture.nativeElement.querySelectorAll('.igx-grid__tbody-content')[0]; expect(container.getAttribute('role')).toBe(null); //Filter grid so no results are available and grid is empty - hierarchicalGrid.filter('index','111',IgxStringFilteringOperand.instance().condition('contains'),true); + hierarchicalGrid.filter('index', '111', IgxStringFilteringOperand.instance().condition('contains'), true); hierarchicalGrid.markForCheck(); fixture.detectChanges(); expect(container.getAttribute('role')).toMatch('row'); @@ -173,7 +177,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); // should have 3 level hierarchy - const allChildren = hierarchicalGrid.gridAPI.getChildGrids(true); + const allChildren = hierarchicalGrid.gridAPI.getChildGrids(true); expect(allChildren.length).toBe(2); expect(hierarchicalGrid.gridAPI.get_row_by_index(1) instanceof IgxChildGridRowComponent).toBe(true); expect(childGrid.gridAPI.get_row_by_index(1) instanceof IgxChildGridRowComponent).toBe(true); @@ -197,7 +201,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { it('should show header collapse button if grid has data and row island is defined.', () => { fixture.componentInstance.data = [ - {ID: 0, ProductName: 'Product: A0'} + { ID: 0, ProductName: 'Product: A0' } ]; fixture.detectChanges(); const headerExpanderElem = fixture.debugElement.queryAll(By.css('.igx-grid__hierarchical-expander--header'))[0]; @@ -391,7 +395,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(hierarchicalGrid.gridSize).toEqual(Size.Large); @@ -413,13 +417,13 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { it('should update child grid data when root grid data is changed.', () => { const newData1 = [ { - ID: 0, ChildLevels: 0, ProductName: 'Product: A', childData: [ { ID: 1, ProductName: 'Product: Child A' } ] + ID: 0, ChildLevels: 0, ProductName: 'Product: A', childData: [{ ID: 1, ProductName: 'Product: Child A' }] }, { - ID: 1, ChildLevels: 0, ProductName: 'Product: A1', childData: [ { ID: 2, ProductName: 'Product: Child A' } ] + ID: 1, ChildLevels: 0, ProductName: 'Product: A1', childData: [{ ID: 2, ProductName: 'Product: Child A' }] }, { - ID: 2, ChildLevels: 0, ProductName: 'Product: A2', childData: [ { ID: 3, ProductName: 'Product: Child A' } ] + ID: 2, ChildLevels: 0, ProductName: 'Product: A2', childData: [{ ID: 3, ProductName: 'Product: Child A' }] } ]; fixture.componentInstance.data = newData1; @@ -427,20 +431,20 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { let row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid.data).toBe(newData1[0].childData); const newData2 = [ { - ID: 0, ChildLevels: 0, ProductName: 'Product: A', childData: [ { ID: 10, ProductName: 'Product: New Child A' } ] + ID: 0, ChildLevels: 0, ProductName: 'Product: A', childData: [{ ID: 10, ProductName: 'Product: New Child A' }] }, { - ID: 1, ChildLevels: 0, ProductName: 'Product: A1', childData: [ { ID: 20, ProductName: 'Product: New Child A' } ] + ID: 1, ChildLevels: 0, ProductName: 'Product: A1', childData: [{ ID: 20, ProductName: 'Product: New Child A' }] }, { - ID: 2, ChildLevels: 0, ProductName: 'Product: A2', childData: [ { ID: 30, ProductName: 'Product: New Child A' } ] + ID: 2, ChildLevels: 0, ProductName: 'Product: A2', childData: [{ ID: 30, ProductName: 'Product: New Child A' }] } ]; fixture.componentInstance.data = newData2; @@ -450,7 +454,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid.data).toBe(newData2[0].childData); @@ -486,7 +490,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid.calcWidth - 370).toBeLessThan(3); UIInteractions.simulateClickAndSelectEvent(row.expander); @@ -551,7 +555,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid.calcWidth - 370 - childGrid.scrollSize).toBeLessThanOrEqual(5); @@ -566,8 +570,8 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { it('should not expand children when hasChildrenKey is false for the row', () => { hierarchicalGrid.hasChildrenKey = 'hasChild'; fixture.componentInstance.data = [ - {ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1)}, - {ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1)} + { ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1) }, + { ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1) } ]; fixture.detectChanges(); const row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; @@ -587,8 +591,8 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { hierarchicalGrid.hasChildrenKey = 'hasChild'; hierarchicalGrid.primaryKey = 'ID'; fixture.componentInstance.data = [ - {ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1)}, - {ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1)} + { ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1) }, + { ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1) } ]; fixture.detectChanges(); const row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; @@ -626,7 +630,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(`${childGrid.id}_0_1`); }); - it('should emit columnInit when a column is added runtime.', async() => { + it('should emit columnInit when a column is added runtime.', async () => { spyOn(hierarchicalGrid.columnInit, 'emit').and.callThrough(); fixture.detectChanges(); fixture.componentInstance.showAnotherCol = true; @@ -698,11 +702,11 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const uniqueData = [ { ID: 1, - ProductName : 'Parent Name', + ProductName: 'Parent Name', childData: [ { ID: 11, - ProductName : 'Child1 Name' + ProductName: 'Child1 Name' } ], childData2: [ @@ -747,7 +751,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = hierarchicalGrid.gridAPI.getChildGrids(false) as IgxHierarchicalGridComponent []; + const childGrids = hierarchicalGrid.gridAPI.getChildGrids(false) as IgxHierarchicalGridComponent[]; expect(childGrids[0].height).toBe('200px'); expect(childGrids[1].height).toBe('200px'); }); @@ -763,7 +767,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { // check rendered grid let childGrids = hierarchicalGrid.gridAPI.getChildGrids(false); - expect(childGrids[0].rowSelection).toBe( GridSelectionMode.multiple); + expect(childGrids[0].rowSelection).toBe(GridSelectionMode.multiple); expect(childGrids[1].rowSelection).toBe(GridSelectionMode.none); // expand new row and check newly generated grid @@ -772,8 +776,8 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); childGrids = hierarchicalGrid.gridAPI.getChildGrids(false); - expect(childGrids[0].rowSelection).toBe( GridSelectionMode.multiple); - expect(childGrids[1].rowSelection).toBe( GridSelectionMode.multiple); + expect(childGrids[0].rowSelection).toBe(GridSelectionMode.multiple); + expect(childGrids[1].rowSelection).toBe(GridSelectionMode.multiple); expect(childGrids[2].rowSelection).toBe(GridSelectionMode.none); expect(childGrids[3].rowSelection).toBe(GridSelectionMode.none); }); @@ -816,7 +820,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { let row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; // check sizes are applied @@ -844,7 +848,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); - childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; // check sizes are applied @@ -892,7 +896,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; const cellElem = childGrid.gridAPI.get_row_by_index(0).cells.toArray()[0]; const cell = childGrid.getRowByIndex(0).cells[0] as CellType; @@ -927,15 +931,15 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const uniqueData = [ { ID: 1, - ProductName : 'Parent Name', + ProductName: 'Parent Name', childData: [ { ID: 11, - ProductName : 'Child11 ProductName' + ProductName: 'Child11 ProductName' }, { ID: 12, - ProductName : 'Child12 ProductName' + ProductName: 'Child12 ProductName' } ], childData2: [ @@ -964,7 +968,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid1 = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid1.data.length).toEqual(2); expect(childGrid1.filteredData.length).toEqual(1); @@ -982,33 +986,33 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const complexObjData = [ { ID: 1, - ProductName : 'Parent Name', + ProductName: 'Parent Name', childData: { Records: [ { ID: 11, - ProductName : 'Child11 ProductName' + ProductName: 'Child11 ProductName' }, { ID: 12, - ProductName : 'Child12 ProductName' + ProductName: 'Child12 ProductName' } ] }, childData2: { Records: [ - { - ID: 21, - Col1: 'Child21 Col1', - Col2: 'Child21 Col2', - Col3: 'Child21 Col3' - }, - { - ID: 22, - Col1: 'Child22 Col1', - Col2: 'Child22 Col2', - Col3: 'Child22 Col3' - } + { + ID: 21, + Col1: 'Child21 Col1', + Col2: 'Child21 Col2', + Col3: 'Child21 Col3' + }, + { + ID: 22, + Col1: 'Child22 Col1', + Col2: 'Child22 Col2', + Col3: 'Child22 Col3' + } ] } } @@ -1020,7 +1024,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid1 = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; const childGrid2 = childGrids[1].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid1.data.length).toEqual(2); @@ -1044,7 +1048,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { hierarchicalGrid.expandRow(fixture.componentInstance.data[0]); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const gridBody = child1Grid.query(By.css('.igx-grid__tbody')); expect(gridBody.nativeElement.innerText).toBe('Get child grid ref'); //text from custom template button @@ -1079,7 +1083,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { fixture.detectChanges(); //check child grid column are editable - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid1 = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; expect(childGrid1.columns[0].editable).toBeTrue(); @@ -1154,7 +1158,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.rowList.first as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; let defaultHeight = childGrids[0].query(By.css(TBODY_CLASS)).styles.height; @@ -1176,7 +1180,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.rowList.first as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; let defaultHeight = childGrids[0].query(By.css(TBODY_CLASS)).styles.height; @@ -1199,7 +1203,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.rowList.first as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; let defaultHeight = childGrids[0].query(By.css(TBODY_CLASS)).styles.height; @@ -1222,7 +1226,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.rowList.first as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; let defaultHeight = childGrids[0].query(By.css(TBODY_CLASS)).styles.height; @@ -1252,7 +1256,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { const row = hierarchicalGrid.rowList.first as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; let defaultHeight = childGrids[0].query(By.css(TBODY_CLASS)).styles.height; @@ -1380,7 +1384,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const child1Headers = child1Grid.queryAll(By.css('igx-grid-header')); @@ -1395,7 +1399,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row1.expander); fixture.detectChanges(); - const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); + const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); const child2Grid = child2Grids[0].query(By.css('igx-hierarchical-grid')); const child2Headers = child2Grid.queryAll(By.css('igx-grid-header')); @@ -1410,7 +1414,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')).componentInstance; fixture.componentInstance.parentCols = ['Col1', 'Col2']; @@ -1436,14 +1440,14 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const row1 = child1Grid.componentInstance.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row1.expander); fixture.detectChanges(); - const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); + const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); const child2Grid = child2Grids[0].query(By.css('igx-hierarchical-grid')); let child2Headers = child2Grid.queryAll(By.css('igx-grid-header')); @@ -1484,14 +1488,14 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const row1 = child1Grid.componentInstance.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row1.expander); fixture.detectChanges(); - const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); + const child2Grids = child1Grid.queryAll(By.css('igx-child-grid-row')); const child2Grid = child2Grids[0].query(By.css('igx-hierarchical-grid')); let child2Headers = child2Grid.queryAll(By.css('igx-grid-header')); @@ -1534,7 +1538,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); + const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const firstRow = child1Grid.componentInstance.getRowByIndex(0); @@ -1846,21 +1850,21 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { let rows = hierarchicalGrid.dataRowList.toArray(); for (const row of rows) { - const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); expect((expander as HTMLElement).innerText).toBe('COLLAPSED'); } hierarchicalGrid.expandChildren = true; fixture.detectChanges(); rows = hierarchicalGrid.dataRowList.toArray(); for (const row of rows) { - const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); expect((expander as HTMLElement).innerText).toBe('EXPANDED'); } const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0]; const childRows = childGrid.dataRowList.toArray(); for (const row of childRows) { - const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); expect((expander as HTMLElement).innerText).toBe('COLLAPSED'); } @@ -1993,18 +1997,19 @@ export class IgxHierarchicalGridTestBaseComponent { let children; for (let i = 0; i < count; i++) { const rowID = parentID ? parentID + i : i.toString(); - if (level > 0 ) { - // Have child grids for row with even id less rows by not multiplying by 2 - children = this.generateDataUneven((i % 2 + 1) * Math.round(count / 3) , currLevel - 1, rowID); + if (level > 0) { + // Have child grids for row with even id less rows by not multiplying by 2 + children = this.generateDataUneven((i % 2 + 1) * Math.round(count / 3), currLevel - 1, rowID); } prods.push({ - ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, Col1: i, - Col2: i, Col3: i, childData: children, childData2: children }); + ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, Col1: i, + Col2: i, Col3: i, childData: children, childData2: children + }); } return prods; } - public clearData(){ + public clearData() { this.data = []; } } @@ -2070,8 +2075,9 @@ export class IgxHGridRemoteOnDemandComponent { for (let i = 0; i < count; i++) { const rowID = parendID ? parendID + i : i.toString(); prods.push({ - ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, Col1: i, - Col2: i, Col3: i }); + ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, Col1: i, + Col2: i, Col3: i + }); } return prods; } @@ -2121,7 +2127,7 @@ export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGr public cdr = inject(ChangeDetectorRef); public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3']; - public cols2 = ['ID', 'ProductName', 'Col1']; + public cols2 = ['ID', 'ProductName', 'Col1']; public parentCols = []; public islandCols1 = []; public islandCols2 = []; @@ -2183,10 +2189,10 @@ export class IgxHierarchicalGridSizingComponent { `, imports: [IgxHierarchicalGridComponent, IgxRowIslandComponent] }) -export class IgxHierarchicalGridToggleRIComponent extends IgxHierarchicalGridTestBaseComponent { -public toggleRI = true; -public toggleChildRI = true; -public toggleRINested = false; +export class IgxHierarchicalGridToggleRIComponent extends IgxHierarchicalGridTestBaseComponent { + public toggleRI = true; + public toggleChildRI = true; + public toggleRINested = false; } @Component({ @@ -2206,7 +2212,7 @@ public toggleRINested = false; `, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) -export class IgxHierarchicalGridToggleRIAndColsComponent extends IgxHierarchicalGridToggleRIComponent { +export class IgxHierarchicalGridToggleRIAndColsComponent extends IgxHierarchicalGridToggleRIComponent { public override toggleRI = false; public toggleColumns = false; } @@ -2238,7 +2244,7 @@ export class IgxHierarchicalGridToggleRIAndColsComponent extends IgxHierarchica `, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective] }) -export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} +export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` @@ -2299,7 +2305,7 @@ export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalG IgxHeaderCollapsedIndicatorDirective ] }) -export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} +export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` @@ -2334,7 +2340,7 @@ export class IgxHierarchicalGridHidingPinningColumnsComponent extends IgxHierarc col.pin(); } - public hideColumn(col: ColumnType){ + public hideColumn(col: ColumnType) { col.hidden = true; } } @@ -2361,7 +2367,7 @@ export class IgxHierarchicalGridHidingPinningColumnsComponent extends IgxHierarc `, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective] }) -export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarchicalGridTestBaseComponent{} +export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` @@ -2385,7 +2391,7 @@ export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarc `, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective] }) -export class IgxHierarchicalGridAutoSizeColumnsComponent extends IgxHierarchicalGridTestBaseComponent {} +export class IgxHierarchicalGridAutoSizeColumnsComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 6e4d235aee9..06e080b0640 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -1,14 +1,14 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { Component, ViewChild } from '@angular/core'; +import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { By } from '@angular/platform-browser'; import { wait } from '../test-utils/ui-interactions.spec'; import { IgxNavigationDrawerComponent } from './navigation-drawer.component'; import { IgxNavigationService } from '../core/navigation/nav.service'; -import { PlatformUtil } from '../core/utils'; import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; import { IgxLayoutModule } from '../directives/layout/layout.module'; import { IgxNavbarModule } from '../navbar/navbar.module'; import { IgxNavbarComponent } from '../navbar/navbar.component'; +import { HammerGesturesManager } from '../core/touch'; // HammerJS simulator from https://github.com/hammerjs/simulator, manual typings TODO declare let Simulator: any; @@ -22,6 +22,12 @@ describe('Navigation Drawer', () => { TestComponentMiniComponent, TestComponent, TestComponentDIComponent + ], + providers: [ + IgxNavigationDrawerComponent, + { provide: ElementRef, useValue: null }, + Renderer2, + HammerGesturesManager ] }).compileComponents(); @@ -580,8 +586,7 @@ describe('Navigation Drawer', () => { it('should get correct window width', (done) => { const originalWidth = window.innerWidth; - const platformUtil = TestBed.inject(PlatformUtil); - const drawer = new IgxNavigationDrawerComponent(null, null, null, null, platformUtil); + const drawer = TestBed.inject(IgxNavigationDrawerComponent); // re-enable `getWindowWidth` const widthSpy = (widthSpyOverride as jasmine.Spy).and.callThrough(); diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 3405aba95b3..f9f2f76fe25 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, DebugElement, OnInit, ElementRef, inject } from '@angular/core'; +import { Component, ViewChild, DebugElement, OnInit, ElementRef, inject, ChangeDetectorRef, DOCUMENT, Injector } from '@angular/core'; import { NgStyle } from '@angular/common'; import { TestBed, tick, fakeAsync, waitForAsync, discardPeriodicTasks } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators, ReactiveFormsModule, NgForm, NgControl } from '@angular/forms'; @@ -17,6 +17,8 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxInputState } from './../directives/input/input.directive'; import { IgxSelectGroupComponent } from './select-group.component'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; +import { IgxSelectionAPIService } from '../core/selection'; +import { IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common'; const CSS_CLASS_INPUT_GROUP = 'igx-input-group'; const CSS_CLASS_INPUT = 'igx-input-group__input'; @@ -2671,8 +2673,22 @@ describe('igxSelect ControlValueAccessor Unit', () => { }); const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }}); + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: ElementRef, useValue: null }, + { provide: IgxSelectionAPIService, useValue: mockSelection }, + { provide: ChangeDetectorRef, useValue: mockCdr }, + { provide: DOCUMENT, useValue: mockDocument }, + { provide: Injector, useValue: mockInjector }, + { provide: IGX_DROPDOWN_BASE, useValue: {} }, + IgxSelectComponent, + IgxDropDownItemComponent, + ] + }); + // init - select = new IgxSelectComponent(null, mockCdr, mockDocument, mockSelection, null, null, mockInjector); + select = TestBed.inject(IgxSelectComponent); select.ngOnInit(); select.registerOnChange(mockNgControl.registerOnChangeCb); select.registerOnTouched(mockNgControl.registerOnTouchedCb); @@ -2691,7 +2707,7 @@ describe('igxSelect ControlValueAccessor Unit', () => { expect(select.disabled).toBe(false); // OnChange callback - const item = new IgxDropDownItemComponent(select, null, null, mockSelection); + const item = TestBed.inject(IgxDropDownItemComponent); item.value = 'itemValue'; select.selectItem(item); expect(mockSelection.set).toHaveBeenCalledWith(select.id, new Set([item])); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index ec4bf608ffb..b1ffad488ca 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -1,4 +1,4 @@ -import { Component, ComponentRef, ElementRef, HostBinding, Injector, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from '@angular/core'; +import { ApplicationRef, Component, ComponentRef, DOCUMENT, ElementRef, HostBinding, Injector, NgZone, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { first } from 'rxjs/operators'; @@ -32,6 +32,8 @@ import { VerticalAlignment } from './utilities'; import { scaleInVerTop, scaleOutVerTop } from 'igniteui-angular/animations'; +import { PlatformUtil } from '../../core/utils'; +import { AnimationBuilder } from '@angular/animations'; const CLASS_OVERLAY_CONTENT = 'igx-overlay__content'; const CLASS_OVERLAY_CONTENT_MODAL = 'igx-overlay__content--modal'; @@ -205,93 +207,47 @@ describe('igxOverlay', () => { describe('Pure Unit Test', () => { let mockElement: any; - let mockElementRef: any; - let mockApplicationRef: any; - let mockAnimationBuilder: any; - let mockDocument: any; - let mockNgZone: any; + let mockElementRef: ElementRef; + let outlet: any; let mockPlatformUtil: any; let overlay: IgxOverlayService; - let mockAnimationService: AnimationService; beforeEach(() => { - mockElement = { - style: { visibility: '', cursor: '', transitionDuration: '' }, - children: [], - classList: { add: () => { }, remove: () => { } }, - appendChild(element: any) { - this.children.push(element); - }, - removeChild(element: any) { - const index = this.children.indexOf(element); - if (index !== -1) { - this.children.splice(index, 1); - } - }, - addEventListener: () => { }, - removeEventListener: () => { }, - getBoundingClientRect: () => ({ width: 10, height: 10 }), - insertBefore(newChild: HTMLDivElement, refChild: Node) { - let refIndex = this.children.indexOf(refChild); - if (refIndex === -1) { - refIndex = 0; - } - this.children.splice(refIndex, 0, newChild); - }, - contains(element: any) { - return this.children.indexOf(element) !== -1; - } - }; - mockElement.parent = mockElement; - mockElement.parentElement = mockElement; - mockElement.parentNode = mockElement; + outlet = document.createElement("div"); + document.body.appendChild(outlet); + + mockElement = document.createElement("div"); mockElementRef = new ElementRef(mockElement); - mockApplicationRef = { attachView: () => { }, detachView: () => { } }; - mockAnimationBuilder = {}; - mockDocument = { - body: mockElement, - listeners: {}, - defaultView: mockElement, - // this is used be able to properly invoke rxjs `fromEvent` operator, which, turns out - // just adds an event listener to the element and emits accordingly - dispatchEvent(event: KeyboardEvent) { - const type = event.type; - if (this.listeners[type]) { - this.listeners[type].forEach(listener => { - listener(event); - }); - } - }, - createElement: () => mockElement, - appendChild: () => { }, - addEventListener(type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) { - if (!this.listeners[type]) { - this.listeners[type] = []; - } - this.listeners[type].push(listener); - }, - removeEventListener(type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) { - if (this.listeners[type]) { - const index = this.listeners[type].indexOf(listener); - if (index !== -1) { - this.listeners[type].splice(index, 1); - } - } - } - }; - mockNgZone = {}; + mockPlatformUtil = { isIOS: false }; - mockAnimationService = new IgxAngularAnimationService(mockAnimationBuilder); - overlay = new IgxOverlayService( - mockApplicationRef, mockDocument, mockNgZone, mockPlatformUtil, mockAnimationService); + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: PlatformUtil, useValue: mockPlatformUtil }, + IgxAngularAnimationService, + IgxOverlayService, + ] + }); + + overlay = TestBed.inject(IgxOverlayService); }); afterEach(() => { + outlet.remove(); overlay.ngOnDestroy(); }); it('Should set cursor to pointer on iOS', () => { mockPlatformUtil.isIOS = true; - mockDocument.body.style.cursor = 'initialCursorValue'; + + const mockCursorStyle = { value: 'initialCursorValue' }; + + Object.defineProperty(document.body.style, 'cursor', { + get: () => mockCursorStyle.value, + set: (val: string) => { + mockCursorStyle.value = val; + }, + configurable: true + }); const mockOverlaySettings: OverlaySettings = { modal: false, @@ -300,28 +256,32 @@ describe('igxOverlay', () => { let id = overlay.attach(mockElementRef, mockOverlaySettings); overlay.show(id); - expect(mockDocument.body.style.cursor).toEqual('pointer'); + expect(document.body.style.cursor).toEqual('pointer'); overlay.hide(id); overlay.detach(id); - expect(mockDocument.body.style.cursor).toEqual('initialCursorValue'); + expect(document.body.style.cursor).toEqual('initialCursorValue'); mockPlatformUtil.isIOS = false; id = overlay.attach(mockElementRef, mockOverlaySettings); overlay.show(id); - expect(mockDocument.body.style.cursor).toEqual('initialCursorValue'); + expect(document.body.style.cursor).toEqual('initialCursorValue'); overlay.hide(id); overlay.detach(id); - expect(mockDocument.body.style.cursor).toEqual('initialCursorValue'); + expect(document.body.style.cursor).toEqual('initialCursorValue'); }); it('Should clear listener for escape key when overlay settings have outlet specified', () => { + const addEventSpy = spyOn(document, 'addEventListener').and.callThrough(); + const removeEventSpy = spyOn(document, 'removeEventListener').and.callThrough(); + const hideSpy = spyOn(overlay, 'hide').and.callThrough(); + const mockOverlaySettings: OverlaySettings = { modal: false, closeOnEscape: true, - outlet: mockElement, + outlet, positionStrategy: new GlobalPositionStrategy({ openAnimation: null, closeAnimation: null }) }; const id = overlay.attach(mockElementRef, mockOverlaySettings); @@ -330,35 +290,43 @@ describe('igxOverlay', () => { overlay.show(id); // expect escape listener to be added to document - expect(mockDocument.listeners['keydown'].length > 0).toBeTruthy(); - const keydownListener = mockDocument.listeners['keydown'][0]; + expect(addEventSpy).toHaveBeenCalledWith('keydown', jasmine.any(Function), undefined); - spyOn(overlay, 'hide').and.callThrough(); - spyOn(mockDocument, 'removeEventListener').and.callThrough(); + const listener = addEventSpy.calls.all() + .find(call => call.args[0] === 'keydown')?.args[1] as EventListener; - mockDocument.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); + expect(listener).toBeDefined(); + + listener!(new KeyboardEvent('keydown', { key: 'Escape' })); // expect hide to have been called - expect(overlay.hide).toHaveBeenCalledTimes(1); - expect(mockDocument.removeEventListener).not.toHaveBeenCalled(); + expect(hideSpy).toHaveBeenCalledTimes(1); + expect(removeEventSpy).not.toHaveBeenCalled(); overlay.detach(id); - expect(mockDocument.removeEventListener).toHaveBeenCalled(); + expect(removeEventSpy).toHaveBeenCalled(); // the keydown listener is now removed - expect(mockDocument.removeEventListener).toHaveBeenCalledWith('keydown', keydownListener, undefined); + expect(removeEventSpy).toHaveBeenCalledWith('keydown', listener, undefined); // fire event again, expecting hide NOT to be fired again - mockDocument.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); - expect(overlay.hide).toHaveBeenCalledTimes(1); - expect(mockDocument.listeners['keydown'].length).toBe(0); + listener!(new KeyboardEvent('keydown', { key: 'Escape' })); + expect(hideSpy).toHaveBeenCalledTimes(1); }); }); describe('Unit Tests: ', () => { + let outlet: any; + let outletRef: ElementRef; beforeEach(waitForAsync(() => { + outlet = document.createElement('div'); + outletRef = new ElementRef(outlet); TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent] + imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent], + providers: [ + { provide: ElementRef, useValue: outletRef }, + IgxOverlayOutletDirective + ] }).compileComponents(); })); @@ -404,9 +372,8 @@ describe('igxOverlay', () => { overlay.detach(id); tick(); - const outlet = document.createElement('div'); fixture.debugElement.nativeElement.appendChild(outlet); - id = overlay.attach(SimpleDynamicComponent, { modal: false, outlet: new IgxOverlayOutletDirective(new ElementRef(outlet)) }); + id = overlay.attach(SimpleDynamicComponent, { modal: false, outlet: TestBed.inject(IgxOverlayOutletDirective) }); overlay.show(id); tick(); wrapperElement = (fixture.nativeElement as HTMLElement) @@ -1307,8 +1274,9 @@ describe('igxOverlay', () => { it('should correctly handle close on outside click in shadow DOM', fakeAsync(() => { const fixture = TestBed.createComponent(EmptyPageInShadowDomComponent); const button = fixture.componentInstance.buttonElement; - const outlet = fixture.componentInstance.outletElement; const overlay = fixture.componentInstance.overlay; + outlet = fixture.componentInstance.outletElement; + fixture.detectChanges(); const overlaySettings: OverlaySettings = { From ce346e717e76d6d436b330cd277921835a2156c7 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 5 Aug 2025 17:03:17 +0300 Subject: [PATCH 4/7] refactor(*): change tests to account for new DI --- .../grid-editing-actions.component.spec.ts | 4 + .../lib/carousel/carousel.component.spec.ts | 12 +- .../src/lib/grids/grid-base.directive.ts | 5 +- .../src/lib/grids/grid/grid-add-row.spec.ts | 4 + .../grid/grid-filtering-advanced.spec.ts | 4 + .../grid/grid-keyBoardNav-headers.spec.ts | 7 + .../grids/grid/grid-mrl-keyboard-nav.spec.ts | 10 +- .../lib/grids/grid/grid-row-pinning.spec.ts | 4 + .../lib/grids/grid/grid.master-detail.spec.ts | 4 + .../src/lib/grids/grid/grid.pinning.spec.ts | 4 + .../hierarchical-grid-add-row.spec.ts | 8 +- .../hierarchical-grid.integration.spec.ts | 4 + .../hierarchical-grid.selection.spec.ts | 4 + .../hierarchical-grid.virtualization.spec.ts | 4 + .../pivot-grid/pivot-data-selector.spec.ts | 4 + .../pivot-grid-keyboard-nav.spec.ts | 7 + .../grids/pivot-grid/pivot-grid.component.ts | 3 +- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 6 +- .../services/csv/csv-exporter-grid.spec.ts | 7 + .../excel/excel-exporter-grid.spec.ts | 128 +++++++++--------- 20 files changed, 160 insertions(+), 73 deletions(-) diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts index 4a86a58fdf4..00c5a5f3f94 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts @@ -15,6 +15,7 @@ import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component import { IgxActionStripComponent } from '../action-strip.component'; import { IRowDataCancelableEventArgs, IgxColumnComponent } from '../../grids/public_api'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; +import { IgxGridNavigationService } from '../../grids/grid-navigation.service'; describe('igxGridEditingActions #grid ', () => { let fixture; @@ -31,6 +32,9 @@ describe('igxGridEditingActions #grid ', () => { IgxActionStripEditMenuComponent, IgxActionStripOneRowComponent, IgxActionStripMenuOneRowComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index 9e352f2f74b..c1e03ab6751 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, TemplateRef, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, TemplateRef, ChangeDetectionStrategy, ElementRef } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { @@ -14,8 +14,12 @@ import { CarouselIndicatorsOrientation, CarouselAnimationType } from './enums'; describe('Carousel', () => { let fixture; let carousel: IgxCarouselComponent; + let mockElement: any; + let mockElementRef: ElementRef; beforeEach(waitForAsync(() => { + mockElement = document.createElement("div"); + mockElementRef = new ElementRef(mockElement); TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, @@ -24,6 +28,10 @@ describe('Carousel', () => { CarouselTemplateSetInTypescriptTestComponent, CarouselAnimationsComponent, CarouselDynamicSlidesComponent + ], + providers: [ + { provide: ElementRef, useValue: mockElementRef }, + IgxSlideComponent ] }).compileComponents(); })); @@ -184,7 +192,7 @@ describe('Carousel', () => { expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3); spyOn(carousel.slideAdded, 'emit'); - const newSlide = new IgxSlideComponent(); + const newSlide = TestBed.inject(IgxSlideComponent); carousel.add(newSlide); fixture.detectChanges(); args = { diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 5ba25cc19cb..c2e5053b459 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -148,7 +148,8 @@ import { RowType, IPinningConfig, IClipboardOptions, - EntityType + EntityType, + GridServiceType } from './common/grid.interface'; import { DropPosition } from './moving/moving.service'; import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors'; @@ -212,7 +213,7 @@ export abstract class IgxGridBaseDirective implements GridType, /** @hidden @internal */ public readonly selectionService = inject(IgxGridSelectionService); protected colResizingService = inject(IgxColumnResizingService); - public readonly gridAPI = inject(IGX_GRID_SERVICE_BASE); + public readonly gridAPI = inject(IGX_GRID_SERVICE_BASE); protected transactionFactory = inject(IgxFlatTransactionFactory); private elementRef = inject(ElementRef); protected zone = inject(NgZone); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts index c04441e4637..d9eee999a96 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts @@ -18,6 +18,7 @@ import { TransactionType } from '../../services/public_api'; import { IgxGridRowComponent } from './grid-row.component'; import { takeUntil, first } from 'rxjs/operators'; import { Subject } from 'rxjs'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const DEBOUNCETIME = 30; @@ -47,6 +48,9 @@ describe('IgxGrid - Row Adding #grid', () => { IgxGridRowEditingDefinedColumnsComponent, ColumnLayoutTestComponent, DefaultGridMasterDetailComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index fce5caf5528..47a880ee036 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -29,6 +29,7 @@ import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/da import { QueryBuilderSelectors } from '../../query-builder/query-builder.common'; import { IgxHGridRemoteOnDemandComponent } from '../hierarchical-grid/hierarchical-grid.spec'; import { IGridResourceStrings } from '../../core/i18n/grid-resources'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('IgxGrid - Advanced Filtering #grid - ', () => { beforeEach(waitForAsync(() => { @@ -45,6 +46,9 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridExportComponent, IgxHGridRemoteOnDemandComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts index d7a37146f98..7e783c17558 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts @@ -15,6 +15,7 @@ import { IActiveNodeChangeEventArgs } from '../common/events'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; import { ISortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const DEBOUNCETIME = 30; @@ -27,6 +28,9 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { TestBed.configureTestingModule({ imports: [ SelectionWithScrollsComponent, NoopAnimationsModule + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); @@ -732,6 +736,9 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { TestBed.configureTestingModule({ imports: [ MRLTestComponent, NoopAnimationsModule + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index 13fa654dde0..81097d1ac5c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -12,6 +12,7 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.s import { CellType } from '../common/grid.interface'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; import { IGridCellEventArgs, IgxColumnComponent } from '../public_api'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const DEBOUNCE_TIME = 30; const CELL_CSS_CLASS = '.igx-grid__td'; @@ -23,7 +24,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, ColumnLayoutTestComponent] + imports: [NoopAnimationsModule, ColumnLayoutTestComponent], + providers: [IgxGridMRLNavigationService] }).compileComponents(); })); @@ -1458,7 +1460,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { fix.detectChanges(); setupGridScrollDetection(fix, fix.componentInstance.grid); - const [ _firstCell, _secondCell, thirdCell ] = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS)); + const [_firstCell, _secondCell, thirdCell] = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS)); UIInteractions.simulateClickAndSelectEvent(thirdCell); fix.detectChanges(); @@ -1899,7 +1901,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - fix.detectChanges(); + fix.detectChanges(); // focus 3rd row, first cell let cell = grid.gridAPI.get_cell_by_index(2, 'ContactName'); @@ -2361,7 +2363,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { const secondBlock = fix.debugElement.query(By.css('igx-grid-row')).queryAll(By.css(CELL_BLOCK))[1]; const thirdBlock = fix.debugElement.query(By.css('igx-grid-row')).queryAll(By.css(CELL_BLOCK))[2]; - const [secondCell, thirdCell, _fourthCell ] = thirdBlock.queryAll(By.css(CELL_CSS_CLASS)); + const [secondCell, thirdCell, _fourthCell] = thirdBlock.queryAll(By.css(CELL_CSS_CLASS)); const firstCell = secondBlock.queryAll(By.css(CELL_CSS_CLASS))[0]; fix.componentInstance.grid.headerContainer.getScroll().scrollLeft = 500; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts index bc7e5b42feb..cc89d170840 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts @@ -17,6 +17,7 @@ import { GridRowConditionalStylingComponent } from '../../test-utils/grid-base-c import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; import { CellType, IPinRowEventArgs, IPinningConfig, IgxColumnComponent } from '../public_api'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; @@ -35,6 +36,9 @@ describe('Row Pinning #grid', () => { GridRowPinningWithMDVComponent, GridRowPinningWithTransactionsComponent, GridRowPinningWithInitialPinningComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 39d1f60e0f7..e1a25621335 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -17,6 +17,7 @@ import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; import { CellType, IgxColumnComponent, IgxGridDetailTemplateDirective } from '../public_api'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const DEBOUNCE_TIME = 30; const ROW_TAG = 'igx-grid-row'; @@ -38,6 +39,9 @@ describe('IgxGrid Master Detail #grid', () => { DefaultGridMasterDetailComponent, AllExpandedGridMasterDetailComponent, MRLMasterDetailComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts index 7fb0029c904..009ee4837f2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts @@ -26,6 +26,7 @@ import { DropPosition } from '../moving/moving.service'; import { clearGridSubs, setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IPinningConfig } from '../public_api'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; describe('IgxGrid - Column Pinning #grid', () => { @@ -40,6 +41,9 @@ describe('IgxGrid - Column Pinning #grid', () => { GridFeaturesComponent, MultiColumnHeadersWithGroupingComponent, GridPinningMRLComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts index 265d9764ece..6829f3c0806 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts @@ -5,6 +5,7 @@ import { IgxActionStripComponent } from '../../action-strip/public_api'; import { IgxHierarchicalGridActionStripComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { wait } from '../../test-utils/ui-interactions.spec'; import { By } from '@angular/platform-browser'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => { let fixture; @@ -21,6 +22,9 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, IgxHierarchicalGridActionStripComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -74,7 +78,7 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => { }); it('Should allow adding to child grid for parent row that has null/undefined child collection.', async () => { - const data = [ { ID: '1', ProductName: 'Product: A'}]; + const data = [{ ID: '1', ProductName: 'Product: A' }]; hierarchicalGrid.data = data; fixture.detectChanges(); @@ -84,7 +88,7 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => { const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')); const childComponent: IgxHierarchicalGridComponent = child1Grid.componentInstance; - const childDataToAdd = { ID: '2', ProductName: 'ChildProduct: A'}; + const childDataToAdd = { ID: '2', ProductName: 'ChildProduct: A' }; childComponent.addRow(childDataToAdd); fixture.detectChanges(); expect(data[0]['childData1'].length).toBe(1); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 6dcf55889e9..4ef3cd1a63f 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -21,6 +21,7 @@ import { GridSelectionMode, ColumnPinningPosition, RowPinningPosition, Size } fr import { IgxPaginatorComponent } from '../../paginator/paginator.component'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('IgxHierarchicalGrid Integration #hGrid', () => { let fixture: ComponentFixture; @@ -41,6 +42,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { IgxHierarchicalGridWithTransactionProviderComponent, IgxHierarchicalGridTestInputPaginatorComponent, IgxHierarchicalGridTestInputToolbarComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts index 910a4ae8648..8659fcfac1e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts @@ -17,6 +17,7 @@ import { QueryList } from '@angular/core'; import { CellType } from '../public_api'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('IgxHierarchicalGrid selection #hGrid', () => { let fix; @@ -34,6 +35,9 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent, IgxHierarchicalGridCustomSelectorsComponent, IgxHierarchicalGridRowSelectionNoTransactionsComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index 77585a088cc..7cb9aa407e7 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -15,6 +15,7 @@ import { HierarchicalGridFunctions } from '../../test-utils/hierarchical-grid-fu import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { IgxHierarchicalGridDefaultComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { firstValueFrom } from 'rxjs'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe('IgxHierarchicalGrid Virtualization #hGrid', () => { let fixture; @@ -26,6 +27,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridDefaultComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.spec.ts index ccadda4f213..38ac407d1f1 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.spec.ts @@ -18,6 +18,7 @@ import { } from "./pivot-grid.interface"; import { Size } from '../common/enums'; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxGridNavigationService } from '../grid-navigation.service'; describe("Pivot data selector", () => { @@ -47,6 +48,9 @@ describe("Pivot data selector integration", () => { imports: [ NoopAnimationsModule, IgxPivotGridTestBaseComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts index 316aeb956a9..99633cb4ede 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts @@ -6,6 +6,7 @@ import { IgxPivotGridMultipleRowComponent, IgxPivotGridTestBaseComponent } from import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { IgxPivotGridComponent } from './pivot-grid.component'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; +import { IgxGridNavigationService } from '../grid-navigation.service'; const DEBOUNCE_TIME = 250; const PIVOT_TBODY_CSS_CLASS = '.igx-grid__tbody'; @@ -24,6 +25,9 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { imports: [ NoopAnimationsModule, IgxPivotGridMultipleRowComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -271,6 +275,9 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { imports: [ NoopAnimationsModule, IgxPivotGridTestBaseComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 4f6a7137ae2..50da63e1599 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -70,7 +70,7 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operati import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; -import { IgxPivotGridRow } from '../grid-public-row'; +import { IgxPivotGridRow } from '../grid-public-row'; let NEXT_ID = 0; const MINIMUM_COLUMN_WIDTH = 200; @@ -167,6 +167,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; }) export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit, PivotGridType, AfterViewInit, OnChanges { + public override readonly gridAPI = inject>(GridBaseAPIService); public override navigation = inject(IgxPivotGridNavigationService); /** diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 30777c67385..53a8dab3436 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -23,12 +23,13 @@ import { setElementSize } from '../../test-utils/helper-utils.spec'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; import { IgxGridCellComponent } from '../cell.component'; +import { IgxGridNavigationService } from '../grid-navigation.service'; const CSS_CLASS_LIST = 'igx-drop-down__list'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active'; -describe('IgxPivotGrid #pivotGrid', () => { +fdescribe('IgxPivotGrid #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ @@ -37,6 +38,9 @@ describe('IgxPivotGrid #pivotGrid', () => { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxPivotGridFlexContainerComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index 629d9ecc68a..62dae68aae7 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -24,6 +24,7 @@ import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxPivotGridComponent } from '../../grids/pivot-grid/pivot-grid.component'; import { IgxPivotGridTestBaseComponent } from '../../test-utils/pivot-grid-samples.spec'; import { IgxPivotNumericAggregate } from '../../grids/pivot-grid/pivot-grid-aggregate'; +import { IgxGridNavigationService } from '../../grids/grid-navigation.service'; describe('CSV Grid Exporter', () => { let exporter: IgxCsvExporterService; @@ -523,6 +524,12 @@ describe('CSV Grid Exporter', () => { let fix; let pivotGrid: IgxPivotGridComponent; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + IgxGridNavigationService + ] + }); + fix = TestBed.createComponent(IgxPivotGridTestBaseComponent); fix.detectChanges(); pivotGrid = fix.componentInstance.pivotGrid; diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index bd7d815ecb9..56e1711b194 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -38,17 +38,19 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; -import { IgxHierarchicalGridExportComponent, - IgxHierarchicalGridMCHCollapsibleComponent, - IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent, - IgxHierarchicalGridMultiColumnHeadersExportComponent, - IgxHierarchicalGridSummariesExportComponent +import { + IgxHierarchicalGridExportComponent, + IgxHierarchicalGridMCHCollapsibleComponent, + IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent, + IgxHierarchicalGridMultiColumnHeadersExportComponent, + IgxHierarchicalGridSummariesExportComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { IgxHierarchicalGridComponent } from '../../grids/hierarchical-grid/public_api'; import { IgxHierarchicalRowComponent } from '../../grids/hierarchical-grid/hierarchical-row.component'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { IgxPivotGridMultipleRowComponent, IgxPivotGridTestComplexHierarchyComponent, SALES_DATA } from '../../test-utils/pivot-grid-samples.spec'; import { IgxPivotGridComponent, IgxPivotNumericAggregate, PivotRowLayoutType } from '../../grids/pivot-grid/public_api'; +import { IgxGridNavigationService } from '../../grids/grid-navigation.service'; describe('Excel Exporter', () => { let exporter: IgxExcelExporterService; @@ -85,6 +87,9 @@ describe('Excel Exporter', () => { GridCustomSummaryWithUndefinedZeroAndValidNumberComponent, GridCustomSummaryWithUndefinedAndNullComponent, GridCustomSummaryWithDateComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -290,7 +295,7 @@ describe('Excel Exporter', () => { await wait(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const wrapper = await getExportedData(grid, options); @@ -307,13 +312,13 @@ describe('Excel Exporter', () => { await wait(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.simpleGridSortByName, 'Ascending sorted data should have been exported.'); - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + grid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); wrapper = await getExportedData(grid, options); @@ -321,7 +326,7 @@ describe('Excel Exporter', () => { actualData.simpleGridSortByNameDesc(), 'Descending sorted data should have been exported.'); grid.clearSort(); - grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // wrapper = await getExportedData(grid, options); @@ -525,7 +530,7 @@ describe('Excel Exporter', () => { const grid = fix.componentInstance.grid; grid.columnList.get(1).header = 'My header'; grid.columnList.get(1).sortable = true; - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false}); + grid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false }); const sortField = grid.sortingExpressions[0].fieldName; fix.detectChanges(); @@ -546,7 +551,7 @@ describe('Excel Exporter', () => { // Set column formatters grid.columnList.get(0).formatter = ((val: number) => { - const numbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' , 'ten']; + const numbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']; return numbers[val - 1]; }); grid.cdr.detectChanges(); @@ -706,7 +711,7 @@ describe('Excel Exporter', () => { const grid = fix.componentInstance.grid; grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false }); - grid.sort({fieldName: 'Price', dir: SortingDirection.Desc}); + grid.sort({ fieldName: 'Price', dir: SortingDirection.Desc }); options.ignoreSorting = true; @@ -822,14 +827,14 @@ describe('Excel Exporter', () => { }); it('should export sorted hierarchical grid data', async () => { - hGrid.sort({fieldName: 'GrammyNominations', dir: SortingDirection.Desc}); + hGrid.sort({ fieldName: 'GrammyNominations', dir: SortingDirection.Desc }); fix.detectChanges(); await exportAndVerify(hGrid, options, actualData.exportSortedHierarchicalData); }); it('should export hierarchical grid data with ignored sorting', async () => { - hGrid.sort({fieldName: 'GrammyNominations', dir: SortingDirection.Desc}); + hGrid.sort({ fieldName: 'GrammyNominations', dir: SortingDirection.Desc }); options.ignoreSorting = true; fix.detectChanges(); @@ -908,7 +913,7 @@ describe('Excel Exporter', () => { args.header === 'Tickets Sold' || args.header === 'Released') { args.cancel = true; - } + } }); fix.detectChanges(); @@ -922,8 +927,8 @@ describe('Excel Exporter', () => { args.owner?.key === "Songs" || args.owner?.key === "Tours" || args.owner?.key === "TourData") { - args.cancel = true; - } + args.cancel = true; + } }); fix.detectChanges(); @@ -1054,7 +1059,7 @@ describe('Excel Exporter', () => { }); it('should export sorted tree grid properly.', async () => { - treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc}); + treeGrid.sort({ fieldName: 'ID', dir: SortingDirection.Desc }); options.ignoreSorting = true; fix.detectChanges(); @@ -1086,7 +1091,7 @@ describe('Excel Exporter', () => { it('should export filtered and sorted tree grid properly.', async () => { treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); fix.detectChanges(); - treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); + treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Desc }); fix.detectChanges(); await exportAndVerify(treeGrid, options, actualData.treeGridDataFilteredSorted); @@ -1113,7 +1118,7 @@ describe('Excel Exporter', () => { }); it('should export tree grid with ignore sorting properly.', async () => { - treeGrid.sort({fieldName: 'Age', dir: SortingDirection.Desc}); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Desc }); options.ignoreSorting = true; fix.detectChanges(); @@ -1462,11 +1467,12 @@ describe('Excel Exporter', () => { beforeEach(waitForAsync(() => { options = createExportOptions('PivotGridExcelExport'); + fix = TestBed.createComponent(IgxPivotGridMultipleRowComponent); + fix.detectChanges(); })); it('should export pivot grid', async () => { - fix = TestBed.createComponent(IgxPivotGridMultipleRowComponent); - fix.detectChanges(); + await wait(300); grid = fix.componentInstance.pivotGrid; @@ -1494,7 +1500,7 @@ describe('Excel Exporter', () => { fix.componentInstance.data = SALES_DATA; fix.componentInstance.pivotConfigHierarchy = { rows: [ - { + { memberName: 'All_Srep Code Alts', enabled: true, width: '150px', @@ -1509,7 +1515,7 @@ describe('Excel Exporter', () => { memberName: 'All_Srep Codes', enabled: true, width: '150px', - childLevel: { + childLevel: { memberName: 'SREP_CODE', displayName: 'Srep Code', sortDirection: 1, @@ -1530,29 +1536,29 @@ describe('Excel Exporter', () => { ], columns: [], values: [ - { - member: 'JOBS', - aggregate: { - key: 'Count of Jobs', - aggregator: IgxPivotNumericAggregate.count, - label: 'Count of Jobs', + { + member: 'JOBS', + aggregate: { + key: 'Count of Jobs', + aggregator: IgxPivotNumericAggregate.count, + label: 'Count of Jobs', + }, + enabled: true, + dataType: 'number', }, - enabled: true, - dataType: 'number', - }, - { - member: 'INV_SALES', - aggregate: { - key: 'Sum of Sales', - aggregator: IgxPivotNumericAggregate.sum, - label: 'Sum of Sales', + { + member: 'INV_SALES', + aggregate: { + key: 'Sum of Sales', + aggregator: IgxPivotNumericAggregate.sum, + label: 'Sum of Sales', + }, + enabled: true, + dataType: 'number', }, - enabled: true, - dataType: 'number', - }, ], filters: [], - }; + }; grid.pivotUI.showRowHeaders = true; fix.detectChanges(); await wait(300); @@ -1581,7 +1587,7 @@ describe('Excel Exporter', () => { memberName: 'ProductCategory', memberFunction: (data) => data.ProductCategory, enabled: true, - childLevel:{ + childLevel: { memberName: 'Country', enabled: true, childLevel: { @@ -1590,7 +1596,7 @@ describe('Excel Exporter', () => { } } }], - fix.detectChanges(); + fix.detectChanges(); await wait(300); fix.detectChanges(); @@ -1610,29 +1616,29 @@ describe('Excel Exporter', () => { }; const setColWidthAndExport = (grid, exportOptions: IgxExcelExporterOptions, fix, value) => new Promise((resolve) => { - options.columnWidth = value; - fix.detectChanges(); - getExportedData(grid, exportOptions).then((wrapper) => { - wrapper.verifyDataFilesContent(actualData.simpleGridColumnWidth(value), ' Width :' + value).then(() => resolve()); - }); + options.columnWidth = value; + fix.detectChanges(); + getExportedData(grid, exportOptions).then((wrapper) => { + wrapper.verifyDataFilesContent(actualData.simpleGridColumnWidth(value), ' Width :' + value).then(() => resolve()); }); + }); const setRowHeightAndExport = (grid, exportOptions: IgxExcelExporterOptions, fix, value) => new Promise((resolve) => { - options.rowHeight = value; - fix.detectChanges(); - getExportedData(grid, exportOptions).then((wrapper) => { - wrapper.verifyDataFilesContent(actualData.simpleGridRowHeight(value), ' Height :' + value).then(() => resolve()); - }); + options.rowHeight = value; + fix.detectChanges(); + getExportedData(grid, exportOptions).then((wrapper) => { + wrapper.verifyDataFilesContent(actualData.simpleGridRowHeight(value), ' Height :' + value).then(() => resolve()); }); + }); const setWorksheetNameAndExport = (grid, exportOptions: IgxExcelExporterOptions, fix, worksheetName) => new Promise((resolve) => { - options.worksheetName = worksheetName; - fix.detectChanges(); - getExportedData(grid, exportOptions).then((wrapper) => { - wrapper.verifyDataFilesContent(actualData.simpleGridWorksheetName(worksheetName), ' Worksheet Name : ' + worksheetName) - .then(() => resolve()); - }); + options.worksheetName = worksheetName; + fix.detectChanges(); + getExportedData(grid, exportOptions).then((wrapper) => { + wrapper.verifyDataFilesContent(actualData.simpleGridWorksheetName(worksheetName), ' Worksheet Name : ' + worksheetName) + .then(() => resolve()); }); + }); const createExportOptions = (fileName, columnWidth?) => { const opts = new IgxExcelExporterOptions(fileName); From 5b40832befcf2249ced73e8d1de1a6452beef1d3 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 11 Aug 2025 12:44:09 +0300 Subject: [PATCH 5/7] refactor(*): change tests to account for new DI --- .../grid.multi-row-layout.integration.spec.ts | 4 ++++ .../lib/grids/grid/row-drag.directive.spec.ts | 4 ++++ .../hierarchical-grid.navigation.spec.ts | 4 ++++ .../hierarchical-grid.virtualization.spec.ts | 3 +++ .../grids/pivot-grid/pivot-grid.pipes.spec.ts | 22 ++++++++++++++----- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 2 +- .../lib/grids/state.hierarchicalgrid.spec.ts | 6 ++++- .../src/lib/grids/state.pivotgrid.spec.ts | 6 ++++- .../test-utils/grid-base-components.spec.ts | 4 ++-- 9 files changed, 45 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index 72569e18ea7..db821f12800 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -14,6 +14,7 @@ import { IgxGridToolbarComponent } from '../toolbar/grid-toolbar.component'; import { IgxGridToolbarActionsComponent } from '../toolbar/common'; import { IgxGridToolbarHidingComponent } from '../toolbar/grid-toolbar-hiding.component'; import { IgxGridToolbarPinningComponent } from '../toolbar/grid-toolbar-pinning.component'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; type FixtureType = ColumnLayoutGroupingTestComponent | ColumnLayoutHidingTestComponent | ColumnLayoutResizingTestComponent @@ -39,6 +40,9 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { ColumnLayoutHidingTestComponent, ColumnLayoutGroupingTestComponent, ColumnLayoutResizingTestComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 7d272f46d73..edab170dcf9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -22,6 +22,7 @@ import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxRowDirective } from '../row.directive'; import { NgStyle } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; +import { IgxGridNavigationService } from '../grid-navigation.service'; const DEBOUNCE_TIME = 50; const CSS_CLASS_DRAG_INDICATOR = '.igx-grid__drag-indicator'; @@ -954,6 +955,9 @@ describe('Row Drag Tests', () => { NoopAnimationsModule, IgxHierarchicalGridTestComponent, IgxHierarchicalGridCustomGhostTestComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts index 5a885124a4f..5a6dfe7ef58 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts @@ -10,6 +10,7 @@ import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../test- import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { IgxGridCellComponent } from '../cell.component'; import { IGridCellEventArgs, IgxColumnComponent, IPathSegment } from '../public_api'; +import { IgxGridNavigationService } from '../grid-navigation.service'; const DEBOUNCE_TIME = 50; const GRID_CONTENT_CLASS = '.igx-grid__tbody-content'; @@ -29,6 +30,9 @@ describe('IgxHierarchicalGrid Navigation', () => { IgxHierarchicalGridTestComplexComponent, IgxHierarchicalGridMultiLayoutComponent, IgxHierarchicalGridSmallerChildComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout * 2; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index 7cb9aa407e7..3292abfa1fa 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -450,6 +450,9 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridNoScrollTestComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts index b0215cf73cb..af657741976 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts @@ -6,8 +6,10 @@ import { IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotRowExpansionPipe, Ig import { PivotGridFunctions } from '../../test-utils/pivot-grid-functions.spec'; import { DATA } from 'src/app/shared/pivot-data'; import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operations/data-clone-strategy'; +import { TestBed } from '@angular/core/testing'; +import { IGX_GRID_BASE } from '../common/grid.interface'; -describe('Pivot pipes #pivotGrid', () => { +fdescribe('Pivot pipes #pivotGrid', () => { let rowPipe: IgxPivotRowPipe; let rowStatePipe: IgxPivotRowExpansionPipe; let columnPipe: IgxPivotColumnPipe; @@ -18,6 +20,8 @@ describe('Pivot pipes #pivotGrid', () => { let cloneStrategy: IDataCloneStrategy; beforeEach(() => { + + data = [ { ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', @@ -65,9 +69,17 @@ describe('Pivot pipes #pivotGrid', () => { ], filters: null }; + TestBed.configureTestingModule({ + providers: [ + IgxPivotRowPipe, + IgxPivotRowExpansionPipe, + { provide: IGX_GRID_BASE, useValue: null }, + ] + }); + expansionStates = new Map(); - rowPipe = new IgxPivotRowPipe(); - rowStatePipe = new IgxPivotRowExpansionPipe(); + rowPipe = TestBed.inject(IgxPivotRowPipe); + rowStatePipe = TestBed.inject(IgxPivotRowExpansionPipe); columnPipe = new IgxPivotColumnPipe(); autoTransformPipe = new IgxPivotAutoTransform(); cloneStrategy = new DefaultDataCloneStrategy(); @@ -648,7 +660,7 @@ describe('Pivot pipes #pivotGrid', () => { let columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, cloneStrategy, new Map()); let rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true); - const date_prod_seller = PivotGridFunctions.getDimensionValues(rowStatePipeResult); + const date_prod_seller = PivotGridFunctions.getDimensionValues(rowStatePipeResult); expect(rowStatePipeResult.length).toBe(42); const allPeriodsRecords = date_prod_seller.filter(x => x['AllPeriods'] === 'All Periods'); @@ -746,7 +758,7 @@ describe('Pivot pipes #pivotGrid', () => { columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, cloneStrategy, new Map()); rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true); expect(rowStatePipeResult.length).toBe(42); - const seller_prod_date = PivotGridFunctions.getDimensionValues(rowStatePipeResult); + const seller_prod_date = PivotGridFunctions.getDimensionValues(rowStatePipeResult); const stanleyRecords = seller_prod_date.filter(x => x['SellerName'] === 'Stanley'); expect(stanleyRecords).toEqual([ { SellerName: 'Stanley', AllProduct: 'All Products', AllPeriods: 'All Periods' }, diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 53a8dab3436..7bc5f4d6bdb 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -29,7 +29,7 @@ const CSS_CLASS_LIST = 'igx-drop-down__list'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active'; -fdescribe('IgxPivotGrid #pivotGrid', () => { +describe('IgxPivotGrid #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 8db8589fd49..7a6bd79df63 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -15,6 +15,7 @@ import { GridSelectionRange } from './common/types'; import { IgxColumnComponent } from './public_api'; import { IgxPaginatorComponent } from '../paginator/paginator.component'; import { IColumnState, IGridState } from './state-base.directive'; +import { IgxGridNavigationService } from './grid-navigation.service'; describe('IgxHierarchicalGridState - input properties #hGrid', () => { let fix; @@ -22,7 +23,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxHierarchicalGridTestExpandedBaseComponent] + imports: [NoopAnimationsModule, IgxHierarchicalGridTestExpandedBaseComponent], + providers: [ + IgxGridNavigationService + ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/src/lib/grids/state.pivotgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.pivotgrid.spec.ts index 7ef2e6779cc..5fea24fdf3e 100644 --- a/projects/igniteui-angular/src/lib/grids/state.pivotgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.pivotgrid.spec.ts @@ -8,13 +8,17 @@ import { IgxPivotNumericAggregate } from './pivot-grid/pivot-grid-aggregate'; import { IgxPivotDateDimension } from './pivot-grid/pivot-grid-dimensions'; import { IPivotDimension, IPivotGridRecord } from './pivot-grid/pivot-grid.interface'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-grid/pivot-row-dimension-header.component'; +import { IgxGridNavigationService } from './grid-navigation.service'; describe('IgxPivotGridState #pivotGrid :', () => { let fixture; let pivotGrid; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxPivotGridPersistanceComponent] + imports: [NoopAnimationsModule, IgxPivotGridPersistanceComponent], + providers: [ + IgxGridNavigationService + ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index c6720d7be64..13caa827f61 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -230,7 +230,7 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { constructor() { const cdr = inject(ChangeDetectorRef); - super(cdr); + super(); } } @@ -303,6 +303,6 @@ export class ColumnGroupsPinningTestComponent extends ColumnPinningTestComponent constructor() { const cdr = inject(ChangeDetectorRef); - super(cdr); + super(); } } From b3bf2de2c232c52a9fb71e996ef4785b8264c28a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 11 Aug 2025 12:44:36 +0300 Subject: [PATCH 6/7] fix(*): wrong injected service --- .../src/lib/grids/pivot-grid/pivot-grid.component.ts | 1 + .../src/lib/grids/tree-grid/tree-grid.component.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 50da63e1599..ce550488b40 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -169,6 +169,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni PivotGridType, AfterViewInit, OnChanges { public override readonly gridAPI = inject>(GridBaseAPIService); public override navigation = inject(IgxPivotGridNavigationService); + protected override colResizingService = inject(IgxPivotColumnResizingService); /** * Emitted when the dimension collection is changed via the grid chip area. diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index b2ecf4d5de9..94baa6c8b9e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -54,6 +54,7 @@ import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; import { IgxGridDragSelectDirective } from '../selection/drag-select.directive'; import { IgxGridBodyDirective } from '../grid.common'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; +import { IgxHierarchicalTransactionFactory } from '../../services/transaction/transaction-factory.service'; let NEXT_ID = 0; @@ -146,6 +147,7 @@ let NEXT_ID = 0; }) export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, AfterViewInit, DoCheck, AfterContentInit { protected override _diTransactions = inject>(IgxGridTransaction, { optional: true, }); + protected override transactionFactory = inject(IgxHierarchicalTransactionFactory); /** * Sets the child data key of the `IgxTreeGridComponent`. From 1952455c9c8be5519d66f28245ba619a286ed1ca Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 11 Aug 2025 12:45:29 +0300 Subject: [PATCH 7/7] fix(*): remove fdescribe --- .../src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts index af657741976..495924f56cf 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts @@ -9,7 +9,7 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operati import { TestBed } from '@angular/core/testing'; import { IGX_GRID_BASE } from '../common/grid.interface'; -fdescribe('Pivot pipes #pivotGrid', () => { +describe('Pivot pipes #pivotGrid', () => { let rowPipe: IgxPivotRowPipe; let rowStatePipe: IgxPivotRowExpansionPipe; let columnPipe: IgxPivotColumnPipe;