diff --git a/CHANGELOG.md b/CHANGELOG.md index b7f8bd913f0..cb640dfa939 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -63,6 +63,11 @@ All notable changes for each version of this project will be documented in this ### Breaking Changes +#### Dependency Injection Refactor +- All internal DI now uses the `inject()` API across `igniteui-angular` (no more constructor DI in library code). +- If you extend our components/services or call their constructors directly, remove DI params and switch to `inject()` (e.g., `protected foo = inject(FooService);`). +- App usage via templates remains the same; no action needed unless you subclass/override our types. + #### Multiple Entry Points Support The library now supports multiple entry points for better tree-shaking and code splitting. While the main entry point (`igniteui-angular`) remains fully backwards compatible by re-exporting all granular entry points, we recommend migrating to the new entry points for optimal bundle sizes. diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index 179a57a392d..e22d18bba45 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -46,7 +46,7 @@ export var registerConfig = [ IgxRowIslandComponent, ], contentQueries: [], - additionalProperties: [], + additionalProperties: [{ name: "cdr", writable: true }], methods: ["show", "hide"], boolProps: ["hidden"], provideAs: IgxActionStripToken, @@ -65,6 +65,7 @@ export var registerConfig = [ ], contentQueries: [], additionalProperties: [ + { name: "grid", writable: true }, { name: "selected", writable: true }, { name: "index" }, { name: "visibleIndex" }, @@ -75,7 +76,6 @@ export var registerConfig = [ { name: "level" }, { name: "filteringExpressionsTree" }, { name: "parent", writable: true }, - { name: "grid", writable: true }, { name: "topLevelParent" }, ], methods: ["pin", "unpin", "move", "autosize"], @@ -130,13 +130,13 @@ export var registerConfig = [ { name: "childColumns" }, { name: "columnGroup" }, { name: "columnLayout" }, + { name: "grid", writable: true }, { name: "index" }, { name: "visibleIndex" }, { name: "columnLayoutChild" }, { name: "level" }, { name: "filteringExpressionsTree" }, { name: "parent", writable: true }, - { name: "grid", writable: true }, { name: "topLevelParent" }, ], methods: ["pin", "unpin", "move", "autosize"], @@ -187,12 +187,12 @@ export var registerConfig = [ { name: "selected", writable: true }, { name: "childColumns" }, { name: "columnGroup" }, + { name: "grid", writable: true }, { name: "index" }, { name: "columnLayoutChild" }, { name: "level" }, { name: "filteringExpressionsTree" }, { name: "parent", writable: true }, - { name: "grid", writable: true }, { name: "topLevelParent" }, ], methods: ["pin", "unpin", "move", "autosize"], @@ -252,6 +252,10 @@ export var registerConfig = [ additionalProperties: [ { name: "groupsRecords" }, { name: "selectedCells" }, + { name: "validation" }, + { name: "gridAPI" }, + { name: "cdr" }, + { name: "navigation", writable: true }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, { name: "dataRowList" }, @@ -261,10 +265,6 @@ export var registerConfig = [ { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "gridAPI" }, - { name: "cdr" }, - { name: "navigation", writable: true }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, @@ -550,6 +550,8 @@ export var registerConfig = [ { name: "selectedCells" }, { name: "gridAPI", writable: true }, { name: "navigation", writable: true }, + { name: "validation" }, + { name: "cdr" }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, { name: "dataRowList" }, @@ -559,8 +561,6 @@ export var registerConfig = [ { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "cdr" }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, @@ -733,17 +733,17 @@ export var registerConfig = [ }, ], additionalProperties: [ - { name: "dimensionsSortingExpressions" }, + { name: "gridAPI" }, { name: "navigation", writable: true }, + { name: "dimensionsSortingExpressions" }, { name: "allDimensions" }, + { name: "validation" }, + { name: "cdr" }, { name: "rowList" }, { name: "dataRowList" }, { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "gridAPI" }, - { name: "cdr" }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, @@ -865,12 +865,12 @@ export var registerConfig = [ { name: "rowIslandAPI", writable: true }, { name: "gridAPI", writable: true }, { name: "navigation", writable: true }, + { name: "validation" }, + { name: "cdr" }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, { name: "dataRowList" }, { name: "transactions" }, - { name: "validation" }, - { name: "cdr" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, { name: "columns" }, @@ -1009,6 +1009,10 @@ export var registerConfig = [ { name: "processedRootRecords", writable: true }, { name: "processedRecords", writable: true }, { name: "selectedCells" }, + { name: "validation" }, + { name: "gridAPI" }, + { name: "cdr" }, + { name: "navigation", writable: true }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, { name: "dataRowList" }, @@ -1017,10 +1021,6 @@ export var registerConfig = [ { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "gridAPI" }, - { name: "cdr" }, - { name: "navigation", writable: true }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, 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.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts index 775dd440209..13918574976 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/core'; import { IconMeta, IgxIconService } from 'igniteui-angular/icon'; @@ -25,12 +25,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 90a25e80f50..a29257a22be 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, EventEmitter, Output, inject } from '@angular/core'; import { IFilteringExpressionsTree, IGroupingState, IPagingState, ISortingExpression } from 'igniteui-angular/core'; import { GridFeatures, GridSelectionRange, GridType, IColumnState, IGridStateCollection, IGX_GRID_BASE, IgxGridStateBaseDirective, IPinningConfig, IPivotConfiguration } from 'igniteui-angular/grids/core'; @@ -44,15 +44,7 @@ export interface IGridStateInfo { standalone: true }) export class IgxGridStateComponent extends IgxGridStateBaseDirective { - - constructor( - @Inject(IGX_GRID_BASE) grid: GridType, - protected override viewRef: ViewContainerRef, protected override envInjector: EnvironmentInjector, - protected override injector: Injector, - ) { - super(grid, viewRef, envInjector, injector); - } - + public override grid = inject(IGX_GRID_BASE); /** * Restores grid features' state based on the IGridStateInfo object passed as an argument. * @param state object to restore state from. diff --git a/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts b/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts index d4c36414467..a7362c8a755 100644 --- a/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts +++ b/projects/igniteui-angular/accordion/src/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 'igniteui-angular/core'; @@ -57,6 +54,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"`; @@ -218,8 +217,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/action-strip/src/action-strip/action-strip.component.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts index 041a629b4df..09ff6f865d5 100644 --- a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts @@ -13,7 +13,8 @@ import { AfterViewInit, ElementRef, booleanAttribute, - AfterContentInit + AfterContentInit, + inject } from '@angular/core'; @@ -31,7 +32,7 @@ import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigati standalone: true }) export class IgxActionStripMenuItemDirective { - constructor(public templateRef: TemplateRef) {} + public templateRef = inject>(TemplateRef); } /* blazorElement */ @@ -82,6 +83,11 @@ export class IgxActionStripMenuItemDirective { providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }] }) export class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit, AfterContentInit { + private _viewContainer = inject(ViewContainerRef); + private renderer = inject(Renderer2); + protected el = inject(ElementRef); + public cdr = inject(ChangeDetectorRef); + /* blazorSuppress */ /** @@ -186,14 +192,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn 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/avatar/src/avatar/avatar.component.ts b/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts index c00d93029b6..91ead023fea 100644 --- a/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts +++ b/projects/igniteui-angular/avatar/src/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 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -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/banner/src/banner/banner.component.ts b/projects/igniteui-angular/banner/src/banner/banner.component.ts index aee5605eb43..14ade6c7f7f 100644 --- a/projects/igniteui-angular/banner/src/banner/banner.component.ts +++ b/projects/igniteui-angular/banner/src/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 'igniteui-angular/icon'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -52,6 +43,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective] }) export class IgxBannerComponent implements IToggleView { + public elementRef = inject>(ElementRef); + /** * @hidden */ @@ -238,8 +231,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/button-group/src/button-group/button-group.component.ts b/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts index 26c2485b91e..f11590b12c7 100644 --- a/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts +++ b/projects/igniteui-angular/button-group/src/button-group/button-group.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 'igniteui-angular/directives'; import { IgxRippleDirective } from 'igniteui-angular/directives'; @@ -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/calendar/src/calendar/calendar-base.ts b/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts index e43aa7c94d1..55c938a24ba 100644 --- a/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts +++ b/projects/igniteui-angular/calendar/src/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 { IFormattingOptions, IFormattingViews, IViewDateChangeEventArgs, ScrollDirection, IgxCalendarView, CalendarSelection } from './calendar'; import { ControlValueAccessor } from '@angular/forms'; import { noop, Subject } from 'rxjs'; @@ -26,6 +26,11 @@ import { KeyboardNavigationService } from './calendar.services'; 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. */ @@ -656,13 +661,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/calendar/src/calendar/calendar.directives.ts b/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts index cb5b031b515..93688d4dc74 100644 --- a/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts +++ b/projects/igniteui-angular/calendar/src/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 { CalendarDay, PlatformUtil } from 'igniteui-angular/core'; @@ -28,6 +15,8 @@ export const IGX_CALENDAR_VIEW_ITEM = @Directive() export abstract class IgxCalendarViewBaseDirective { + public elementRef = inject(ElementRef); + @Input() public value: Date; @@ -44,8 +33,6 @@ export abstract class IgxCalendarViewBaseDirective { return this.elementRef.nativeElement; } - constructor(public elementRef: ElementRef) { } - @HostListener('mousedown', ['$event']) public onMouseDown(event: MouseEvent) { event.preventDefault(); @@ -122,7 +109,7 @@ export class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective { standalone: true }) export class IgxCalendarHeaderTitleTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -133,7 +120,7 @@ export class IgxCalendarHeaderTitleTemplateDirective { standalone: true }) export class IgxCalendarHeaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -144,7 +131,7 @@ export class IgxCalendarHeaderTemplateDirective { standalone: true }) export class IgxCalendarSubheaderTemplateDirective { - constructor(public template: TemplateRef) { } + public template = inject>(TemplateRef); } /** @@ -155,6 +142,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. * @@ -176,8 +167,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/calendar/src/calendar/calendar.services.ts b/projects/igniteui-angular/calendar/src/calendar/calendar.services.ts index 6cdb44fd125..1873e35cc63 100644 --- a/projects/igniteui-angular/calendar/src/calendar/calendar.services.ts +++ b/projects/igniteui-angular/calendar/src/calendar/calendar.services.ts @@ -4,15 +4,13 @@ import { PlatformUtil } from 'igniteui-angular/core'; @Injectable() export class KeyboardNavigationService { + private eventManager = inject(EventManager); + private ngZone = inject(NgZone); + private keyHandlers = new Map void>(); private eventUnsubscribeFn: Function | null = null; private platform = inject(PlatformUtil); - constructor( - private eventManager: EventManager, - private ngZone: NgZone, - ) {} - public attachKeyboardHandlers(elementRef: ElementRef, context: any) { if (!this.platform.isBrowser) { return this; diff --git a/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts b/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts index 0ffcc6cf32f..b86d2f8613b 100644 --- a/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts +++ b/projects/igniteui-angular/calendar/src/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"; @@ -41,6 +41,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'; @@ -175,7 +177,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/calendar/src/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts index ee59dfc2ed3..69c708164a9 100644 --- a/projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts +++ b/projects/igniteui-angular/calendar/src/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 { areSameMonth, CalendarDay, DateRangeDescriptor, isDateInRanges, isNextMonth, isPreviousMonth } from 'igniteui-angular/core'; @@ -12,6 +12,8 @@ import { areSameMonth, CalendarDay, DateRangeDescriptor, isDateInRanges, isNextM standalone: true }) export class IgxDayItemComponent { + private elementRef = inject(ElementRef); + @Input() public date: CalendarDay; @@ -189,6 +191,4 @@ export class IgxDayItemComponent { } private _selected = false; - - constructor(private elementRef: ElementRef) { } } diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts index ce82533d3cf..cf2fac8ad27 100644 --- a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts +++ b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts @@ -4,6 +4,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { DateRangeDescriptor, DateRangeType } from 'igniteui-webcomponents'; import { ScrollDirection } from "../calendar"; +import { KeyboardNavigationService } from '../calendar.services'; import { CalendarDay } from 'igniteui-angular/core'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; @@ -15,6 +16,9 @@ describe("Days View Component", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [InitDaysViewComponent], + providers: [ + KeyboardNavigationService + ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts index cd2e9adc2ba..204b5805c92 100644 --- a/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts @@ -1,24 +1,9 @@ -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 { CalendarDay, DateRangeType, PlatformUtil, areSameMonth, generateMonth, getClosestActiveDate, getNextActiveDate, getPreviousActiveDate, intoChunks, isDateInRanges } from 'igniteui-angular/core'; +import { CalendarDay, DateRangeType, areSameMonth, generateMonth, getClosestActiveDate, getNextActiveDate, getPreviousActiveDate, intoChunks, isDateInRanges } from 'igniteui-angular/core'; import { IgxCalendarBaseDirective } from '../calendar-base'; import { IViewChangingEventArgs } from './days-view.interface'; @@ -38,6 +23,9 @@ let NEXT_ID = 0; imports: [IgxDayItemComponent, TitleCasePipe] }) export class IgxDaysViewComponent extends IgxCalendarBaseDirective { + protected el = inject(ElementRef); + public override cdr = inject(ChangeDetectorRef); + #standalone = true; /** @@ -187,18 +175,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/calendar/src/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts index a0f86cac0a7..e5439bdb1bb 100644 --- a/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts +++ b/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts @@ -4,7 +4,6 @@ import { HostBinding, ElementRef, booleanAttribute, - Inject, inject, } from "@angular/core"; import { IgxCalendarMonthDirective } from "../calendar.directives"; @@ -14,7 +13,7 @@ import { DAY_INTERVAL_TOKEN, } from "../common/calendar-view.directive"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; -import { CalendarDay, calendarRange, DayInterval, PlatformUtil } from 'igniteui-angular/core'; +import { CalendarDay, calendarRange, PlatformUtil } from 'igniteui-angular/core'; let NEXT_ID = 0; @@ -35,6 +34,8 @@ let NEXT_ID = 0; imports: [IgxCalendarMonthDirective, TitleCasePipe] }) export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { + public el = inject(ElementRef); + #standalone = true; private platform = inject(PlatformUtil); @@ -128,13 +129,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/calendar/src/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts index c62e5053700..4a25f361dc0 100644 --- a/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts +++ b/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts @@ -3,7 +3,6 @@ import { Input, HostBinding, ElementRef, - Inject, inject, } from "@angular/core"; import { IgxCalendarYearDirective } from "../calendar.directives"; @@ -12,7 +11,7 @@ import { DAY_INTERVAL_TOKEN, } from "../common/calendar-view.directive"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; -import { CalendarDay, calendarRange, PlatformUtil, type DayInterval } from 'igniteui-angular/core'; +import { CalendarDay, calendarRange, PlatformUtil } from 'igniteui-angular/core'; @Component({ providers: [ @@ -31,6 +30,8 @@ import { CalendarDay, calendarRange, PlatformUtil, type DayInterval } from 'igni imports: [IgxCalendarYearDirective] }) export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { + public el = inject(ElementRef); + #standalone = true; private platform = inject(PlatformUtil); @@ -110,13 +111,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/card/src/card/card.component.ts b/projects/igniteui-angular/card/src/card/card.component.ts index 60f713e41ee..eeb346f783b 100644 --- a/projects/igniteui-angular/card/src/card/card.component.ts +++ b/projects/igniteui-angular/card/src/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/carousel/src/carousel/carousel-base.ts b/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts index f67793cb77a..e2b7eb87bf1 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts +++ b/projects/igniteui-angular/carousel/src/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 'igniteui-angular/core'; import { AnimationPlayer, AnimationService } from 'igniteui-angular/core'; 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 { if (this.enterAnimationPlayer) { this.enterAnimationPlayer.destroy(); diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts index 4749e763c27..74ddfc755c9 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/carousel/src/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 { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interaction 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(); })); @@ -196,7 +204,7 @@ describe('Carousel', () => { expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3); spyOn(carousel.slideAdded, 'emit'); - const newSlide = new IgxSlideComponent(null); + const newSlide = TestBed.inject(IgxSlideComponent); carousel.add(newSlide); fixture.detectChanges(); args = { diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts index 75eef06bb79..068dc72d817 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts +++ b/projects/igniteui-angular/carousel/src/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, ɵIgxDirectionality } from 'igniteui-angular/core'; import { first, IBaseEventArgs, last, PlatformUtil } from 'igniteui-angular/core'; -import { IgxAngularAnimationService } from 'igniteui-angular/core'; -import { AnimationService } from 'igniteui-angular/core'; import { CarouselAnimationDirection, IgxCarouselComponentBase } from './carousel-base'; import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives'; import { IgxSlideComponent } from './slide.component'; @@ -87,6 +61,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. @@ -564,16 +544,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/carousel/src/carousel/slide.component.ts b/projects/igniteui-angular/carousel/src/carousel/slide.component.ts index 67a92cd39d0..308f5d52d16 100644 --- a/projects/igniteui-angular/carousel/src/carousel/slide.component.ts +++ b/projects/igniteui-angular/carousel/src/carousel/slide.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute } from '@angular/core'; +import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-base'; @@ -20,6 +20,8 @@ import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-ba 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/checkbox/src/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts index 436883f1145..1c0cd7e15f7 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/checkbox/src/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/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts index 4b830e179b2..b25a5e646a0 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.component.ts +++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts @@ -13,7 +13,7 @@ import { OnDestroy, booleanAttribute, OnInit, - Inject, + inject, DOCUMENT } from '@angular/core'; import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; @@ -87,6 +87,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. @@ -605,12 +610,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/chips/src/chips/chip.spec.ts b/projects/igniteui-angular/chips/src/chips/chip.spec.ts index 73daff168fc..b7c54bf7951 100644 --- a/projects/igniteui-angular/chips/src/chips/chip.spec.ts +++ b/projects/igniteui-angular/chips/src/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 { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interaction 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/chips/src/chips/chips-area.component.ts b/projects/igniteui-angular/chips/src/chips/chips-area.component.ts index 475bffb12e1..1146c073d6c 100644 --- a/projects/igniteui-angular/chips/src/chips/chips-area.component.ts +++ b/projects/igniteui-angular/chips/src/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/chips/src/chips/chips-area.spec.ts b/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts index f72e6430fd9..75cd1090f56 100644 --- a/projects/igniteui-angular/chips/src/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/chips/src/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'; @@ -23,6 +23,8 @@ import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interaction imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipComponent { + public cdr = inject(ChangeDetectorRef); + @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) public chipsArea: IgxChipsAreaComponent; @@ -33,8 +35,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({ @@ -71,6 +71,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; @@ -84,8 +86,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/combo/src/combo/combo-dropdown.component.ts b/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts index 5759f04cac6..8cdbaf022ae 100644 --- a/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/combo/src/combo/combo-dropdown.component.ts @@ -1,10 +1,7 @@ -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 { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; -import { IgxSelectionAPIService } from 'igniteui-angular/core'; import { IgxComboItemComponent } from './combo-item.component'; import { IgxToggleDirective } from 'igniteui-angular/directives'; import { DropDownActionKey, IDropDownBase, IGX_DROPDOWN_BASE, IgxDropDownComponent, IgxDropDownItemBaseDirective } from 'igniteui-angular/drop-down'; @@ -17,6 +14,9 @@ import { DropDownActionKey, IDropDownBase, IGX_DROPDOWN_BASE, IgxDropDownCompone 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; @@ -75,16 +75,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/combo/src/combo/combo-item.component.ts b/projects/igniteui-angular/combo/src/combo/combo-item.component.ts index 19cefb33d9f..bd6add67e1d 100644 --- a/projects/igniteui-angular/combo/src/combo/combo-item.component.ts +++ b/projects/igniteui-angular/combo/src/combo/combo-item.component.ts @@ -1,16 +1,14 @@ import { Component, - ElementRef, HostBinding, - Inject, Input, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { IgxComboAPIService } from './combo.api'; -import { IgxSelectionAPIService } from 'igniteui-angular/core'; import { rem } from 'igniteui-angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; -import { IDropDownBase, IGX_DROPDOWN_BASE, IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down'; +import { IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down'; /** @hidden */ @Component({ @@ -19,6 +17,8 @@ import { IDropDownBase, IGX_DROPDOWN_BASE, IgxDropDownItemComponent, Navigate } imports: [IgxCheckboxComponent] }) export class IgxComboItemComponent extends IgxDropDownItemComponent { + protected comboAPI = inject(IgxComboAPIService); + /** * Gets the height of a list item @@ -70,15 +70,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/combo/src/combo/combo.common.ts b/projects/igniteui-angular/combo/src/combo/combo.common.ts index 2cd256b9c86..31b8db9df3e 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.common.ts +++ b/projects/igniteui-angular/combo/src/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'; @@ -110,6 +109,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 * @@ -973,17 +981,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/combo/src/combo/combo.component.spec.ts b/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts index b65d413905f..3f3be0f1da7 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/combo/src/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,12 +13,12 @@ import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/core'; import { SortingDirection } from '../../../core/src/data-operations/sorting-strategy'; import { IForOfState } from '../../../directives/src/directives/for-of/for_of.directive'; import { IgxInputState } from '../../../input-group/src/public_api'; -import { IgxLabelDirective } from '../../../input-group/src/public_api'; +import { IGX_INPUT_GROUP_TYPE, IgxLabelDirective } from '../../../input-group/src/public_api'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from 'igniteui-angular/core'; 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'; @@ -26,6 +26,7 @@ import { IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective import { IgxComboFilteringPipe, comboIgnoreDiacriticsFilter } from './combo.pipes'; import { IgxDropDownItemBaseDirective } from '../../../drop-down/src/drop-down/drop-down-item.base'; import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec'; +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(); + })); }); }); @@ -1317,7 +1171,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(); @@ -3643,6 +3497,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 @@ -3656,7 +3512,7 @@ class IgxComboSampleComponent { public initData = []; public size = 'medium'; - constructor(public elementRef: ElementRef) { + constructor() { const division = { 'New England 01': ['Connecticut', 'Maine', 'Massachusetts'], @@ -3732,7 +3588,9 @@ class IgxComboFormComponent { public reactiveForm: UntypedFormGroup; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + const division = { 'New England 01': ['Connecticut', 'Maine', 'Massachusetts'], @@ -3858,12 +3716,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; @@ -3954,10 +3814,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; } @@ -4002,11 +3864,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/combo/src/combo/combo.component.ts b/projects/igniteui-angular/combo/src/combo/combo.component.ts index ea30870803e..5a54c9c7f0f 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.component.ts +++ b/projects/igniteui-angular/combo/src/combo/combo.component.ts @@ -1,8 +1,5 @@ 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'; @@ -10,11 +7,9 @@ import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs, - IgxSelectionAPIService, EditorProvider } from 'igniteui-angular/core'; import { IgxForOfDirective } from 'igniteui-angular/directives'; -import { IgxIconService } from 'igniteui-angular/icon'; import { IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxComboItemComponent } from './combo-item.component'; @@ -23,7 +18,7 @@ import { IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes'; import { IGX_COMBO_COMPONENT, IgxComboBaseDirective } from './combo.common'; import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputDirective, IgxReadOnlyInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxInputGroupComponent, IgxInputDirective, IgxReadOnlyInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -177,17 +172,8 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie private _displayText: string; - 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/combo/src/combo/combo.pipes.ts b/projects/igniteui-angular/combo/src/combo/combo.pipes.ts index 68996b60f80..8550301598e 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.pipes.ts +++ b/projects/igniteui-angular/combo/src/combo/combo.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { IComboFilteringOptions, IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common'; import { SortingDirection } from 'igniteui-angular/core'; @@ -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/core/src/core/navigation/directives.ts b/projects/igniteui-angular/core/src/core/navigation/directives.ts index eac108b1a0b..c900ad410f6 100644 --- a/projects/igniteui-angular/core/src/core/navigation/directives.ts +++ b/projects/igniteui-angular/core/src/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/core/src/core/touch.ts b/projects/igniteui-angular/core/src/core/touch.ts index 7a5df7824f4..36341f15bc7 100644 --- a/projects/igniteui-angular/core/src/core/touch.ts +++ b/projects/igniteui-angular/core/src/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/core/src/core/utils.ts b/projects/igniteui-angular/core/src/core/utils.ts index 6b0b7b7acbd..16791ab0379 100644 --- a/projects/igniteui-angular/core/src/core/utils.ts +++ b/projects/igniteui-angular/core/src/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'; @@ -257,6 +257,8 @@ export const clamp = (number: number, min: number, max: number) => */ @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); @@ -293,8 +295,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/core/src/date-common/picker-icons.common.ts b/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts index dea7d37bc9a..c3b3b0f6e80 100644 --- a/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts +++ b/projects/igniteui-angular/core/src/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/core/src/services/animation/angular-animation-service.ts b/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts index 232a5004bc0..042a9609965 100644 --- a/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts +++ b/projects/igniteui-angular/core/src/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/core/src/services/direction/directionality.spec.ts b/projects/igniteui-angular/core/src/services/direction/directionality.spec.ts index 79c7c67969a..ad29ace4c56 100644 --- a/projects/igniteui-angular/core/src/services/direction/directionality.spec.ts +++ b/projects/igniteui-angular/core/src/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 { @@ -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'); }); }); @@ -84,5 +92,5 @@ describe('IgxDirectionality', () => { standalone: true }) class InjectsIgxDirectionalityComponent { - constructor(public dir: IgxDirectionality) { } + public dir = inject_1(IgxDirectionality); } diff --git a/projects/igniteui-angular/core/src/services/direction/directionality.ts b/projects/igniteui-angular/core/src/services/direction/directionality.ts index 35e09ab8dfd..6c7726caf40 100644 --- a/projects/igniteui-angular/core/src/services/direction/directionality.ts +++ b/projects/igniteui-angular/core/src/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 @internal @@ -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/core/src/services/overlay/overlay.spec.ts b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts index 1b53bb25dd8..2dd45ea03e2 100644 --- a/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts @@ -1,20 +1,9 @@ -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'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { IgxAngularAnimationService } from '../animation/angular-animation-service'; -import { AnimationService } from '../animation/animation'; import { IgxOverlayService } from './overlay'; import { ContainerPositionStrategy } from './position'; import { AutoPositionStrategy } from './position/auto-position-strategy'; @@ -43,6 +32,7 @@ import { IgxCalendarContainerComponent } from 'igniteui-angular/date-picker'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxToggleDirective } from 'igniteui-angular/directives'; +import { PlatformUtil } from 'igniteui-angular'; const CLASS_OVERLAY_CONTENT = 'igx-overlay__content'; const CLASS_OVERLAY_CONTENT_MODAL = 'igx-overlay__content--modal'; @@ -216,93 +206,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, @@ -311,28 +255,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); @@ -341,35 +289,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; + + expect(listener).toBeDefined(); - mockDocument.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); + 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(); })); @@ -415,9 +371,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) @@ -1318,8 +1273,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 = { @@ -4520,10 +4476,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({ @@ -4598,14 +4554,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)); } @@ -4620,10 +4575,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({ @@ -4641,6 +4596,8 @@ export class EmptyPageInShadowDomComponent { standalone: true }) export class DownRightButtonComponent { + public overlay = inject(IgxOverlayService); + @ViewChild('button', { static: true }) public buttonElement: ElementRef; public positionStrategy: IPositionStrategy; @@ -4654,8 +4611,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, { @@ -4681,10 +4636,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)); @@ -4702,9 +4657,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); @@ -4738,16 +4693,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(); @@ -4811,11 +4764,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/core/src/services/overlay/overlay.ts b/projects/igniteui-angular/core/src/services/overlay/overlay.ts index e1c8dc11cac..687d0aa143e 100644 --- a/projects/igniteui-angular/core/src/services/overlay/overlay.ts +++ b/projects/igniteui-angular/core/src/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/core/src/services/overlay/scroll/scroll-strategy.ts b/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts index 0a9e3550774..946afa27b83 100644 --- a/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts +++ b/projects/igniteui-angular/core/src/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/core/src/services/overlay/utilities.ts b/projects/igniteui-angular/core/src/services/overlay/utilities.ts index 4459d1bdfb3..08590065596 100644 --- a/projects/igniteui-angular/core/src/services/overlay/utilities.ts +++ b/projects/igniteui-angular/core/src/services/overlay/utilities.ts @@ -1,5 +1,5 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { ComponentRef, Directive, ElementRef, Injector, NgZone } from '@angular/core'; +import { ComponentRef, Directive, ElementRef, inject, Injector, NgZone } from '@angular/core'; import { CancelableBrowserEventArgs, CancelableEventArgs, cloneValue, IBaseEventArgs } from '../../core/utils'; import { AnimationPlayer } from '../animation/animation'; import { IPositionStrategy } from './position/IPositionStrategy'; @@ -18,7 +18,7 @@ import { IScrollStrategy } from './scroll'; standalone: true }) export class IgxOverlayOutletDirective { - constructor(public element: ElementRef) { } + public element = inject>(ElementRef); /** @hidden */ public get nativeElement() { diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts index 16ad78106d9..c0433316246 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts @@ -14,7 +14,7 @@ import { OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings, WEEKDAYS } from 'igniteui-angular/core'; -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 { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types'; import { DatePart } from '../../../core/src/date-common/public_api'; @@ -1015,7 +1015,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/date-picker/src/date-picker/date-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts index c649d6bdd99..8b17fd03c56 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts @@ -9,19 +9,17 @@ import { EventEmitter, HostBinding, HostListener, - Inject, Injector, Input, - LOCALE_ID, OnDestroy, OnInit, - Optional, Output, PipeTransform, Renderer2, ViewChild, ViewContainerRef, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { AbstractControl, @@ -37,7 +35,7 @@ import { IFormattingViews, IFormattingOptions } from 'igniteui-angular/calendar'; import { - IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxInputGroupType, IgxInputState, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, + IgxLabelDirective, IgxInputState, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxReadOnlyInputDirective } from 'igniteui-angular/input-group'; import { fromEvent, Subscription, noop, MonoTypeOperatorFunction } from 'rxjs'; @@ -108,6 +106,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. @@ -522,15 +526,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/date-picker/src/date-picker/picker-base.directive.ts b/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts index b32be7bebd4..270274efafd 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/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"; @@ -12,6 +13,10 @@ import { DateRange, EditorProvider, IBaseCancelableBrowserEventArgs, IBaseEventA @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. * @@ -305,9 +310,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/date-picker/src/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts index b7ddd1323db..f9fb858e552 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/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, ChangeDetectorRef, ElementRef } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api'; import { CustomDateRange, DateRange, PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -14,10 +14,8 @@ import { IgxDateTimeEditorDirective } from '../../../directives/src/directives/d import { DateRangeType } from 'igniteui-angular/core'; import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api'; import { AutoPositionStrategy, IgxOverlayService } from 'igniteui-angular/core'; -import { AnimationMetadata, AnimationOptions } from '@angular/animations'; import { Subject } from 'rxjs'; import { AsyncPipe } from '@angular/common'; -import { AnimationService } from 'igniteui-angular/core'; import { IgxAngularAnimationService } from 'igniteui-angular/core'; import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../../../core/src/date-common/picker-icons.common'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -26,6 +24,7 @@ import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; import { CalendarDay } from 'igniteui-angular/core'; import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from 'igniteui-angular/calendar'; +import { KeyboardNavigationService } from 'igniteui-angular/calendar/src/calendar/calendar.services'; // The number of milliseconds in one day const DEBOUNCE_TIME = 16; @@ -54,19 +53,12 @@ const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical'; 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; let mockCdr: any; + let fixture: any; + let dateRange: IgxDateRangePickerComponent; const elementRef = { nativeElement: null }; - const platform = {} as any; const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb', @@ -86,57 +78,28 @@ describe('IgxDateRangePicker', () => { }; mockElement.parent = mockElement; mockElement.parentElement = mockElement; - mockApplicationRef = { attachView: (h: any) => { }, detachView: (h: any) => { } }; - mockInjector = jasmine.createSpyObj('Injector', { - get: mockNgControl - }); + mockCdr = jasmine.createSpyObj('ChangeDetectorRef', { detectChanges: () => { } }); - 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'); + + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: ElementRef, useValue: elementRef }, + IgxAngularAnimationService, + IgxOverlayService, + IgxCalendarComponent, + KeyboardNavigationService, + ChangeDetectorRef, + ] + }); + + fixture = TestBed.createComponent(IgxDateRangePickerComponent); + dateRange = fixture.componentInstance; + (dateRange as any)._cdr = mockCdr; + + mockCalendar = TestBed.inject(IgxCalendarComponent); mockDaysView = { focusActiveDate: jasmine.createSpy() @@ -145,7 +108,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); @@ -163,7 +126,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); @@ -190,44 +153,41 @@ 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); - dateRangePicker.registerOnChange(mockNgControl.registerOnChangeCb); - dateRangePicker.registerOnTouched(mockNgControl.registerOnTouchedCb); - spyOn(dateRangePicker as any, 'handleSelection').and.callThrough(); + dateRange.registerOnChange(mockNgControl.registerOnChangeCb); + dateRange.registerOnTouched(mockNgControl.registerOnTouchedCb); + spyOn(dateRange as any, 'handleSelection').and.callThrough(); // writeValue - expect(dateRangePicker.value).toBeUndefined(); + expect(dateRange.value).toBeUndefined(); expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled(); - dateRangePicker.writeValue(range); - expect(dateRangePicker.value).toBe(range); + dateRange.writeValue(range); + expect(dateRange.value).toBe(range); // set value & handleSelection call _onChangeCallback - dateRangePicker.value = rangeUpdate; + dateRange.value = rangeUpdate; expect(mockNgControl.registerOnChangeCb).toHaveBeenCalledWith(rangeUpdate); - (dateRangePicker as any).handleSelection([range.start]); - expect((dateRangePicker as any).handleSelection).toHaveBeenCalledWith([range.start]); - expect((dateRangePicker as any).handleSelection).toHaveBeenCalledTimes(1); + (dateRange as any).handleSelection([range.start]); + expect((dateRange as any).handleSelection).toHaveBeenCalledWith([range.start]); + expect((dateRange as any).handleSelection).toHaveBeenCalledTimes(1); expect(mockNgControl.registerOnChangeCb).toHaveBeenCalledWith({ start: range.start, end: range.start }); // awaiting implementation - OnTouched callback // Docs: changes the value, turning the control dirty; or blurs the form control element, setting the control to touched. // when handleSelection fires should be touched&dirty // when input is blurred(two inputs), should be touched. - (dateRangePicker as any).handleSelection([range.start]); - (dateRangePicker as any).updateValidityOnBlur(); + (dateRange as any).handleSelection([range.start]); + (dateRange as any).updateValidityOnBlur(); expect(mockNgControl.registerOnTouchedCb).toHaveBeenCalledTimes(1); - dateRangePicker.setDisabledState(true); - expect(dateRangePicker.disabled).toBe(true); - dateRangePicker.setDisabledState(false); - expect(dateRangePicker.disabled).toBe(false); + dateRange.setDisabledState(true); + expect(dateRange.disabled).toBe(true); + dateRange.setDisabledState(false); + expect(dateRange.disabled).toBe(false); }); it('should validate correctly minValue and maxValue', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null); dateRange.ngOnInit(); - // dateRange.calendar = calendar; dateRange.registerOnChange(mockNgControl.registerOnChangeCb); dateRange.registerOnValidatorChange(mockNgControl.registerOnValidatorChangeCb); @@ -249,7 +209,6 @@ 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, mockCdr, overlay); dateRange.ngOnInit(); spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar); @@ -265,7 +224,6 @@ 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, mockCdr, null, null); dateRange.ngOnInit(); spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar); @@ -282,7 +240,6 @@ describe('IgxDateRangePicker', () => { })); it('should validate correctly when disabledDates are set', () => { - const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, mockCdr, null, null); dateRange.ngOnInit(); dateRange.registerOnChange(mockNgControl.registerOnChangeCb); @@ -869,7 +826,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; @@ -2553,16 +2510,16 @@ export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledCompon ] }) export class DateRangeReactiveFormComponent { - @ViewChild('range', {read: IgxDateRangePickerComponent}) public dateRange: IgxDateRangePickerComponent; - @ViewChild('twoInputs', {read: IgxDateRangePickerComponent}) public dateRangeWithTwoInputs: IgxDateRangePickerComponent; + private fb = inject(UntypedFormBuilder); + + @ViewChild('range', { read: IgxDateRangePickerComponent }) public dateRange: IgxDateRangePickerComponent; + @ViewChild('twoInputs', { read: IgxDateRangePickerComponent }) public dateRangeWithTwoInputs: IgxDateRangePickerComponent; public form = this.fb.group({ range: ['', Validators.required], 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/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts index ca15a8b834b..c67394209ec 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/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, @@ -45,10 +40,8 @@ import { PickerBaseDirective } from '../date-picker/picker-base.directive'; import { IgxInputDirective, IgxInputGroupComponent, - IgxInputGroupType, IgxInputState, IgxLabelDirective, - IGX_INPUT_GROUP_TYPE, IgxSuffixDirective, IgxPrefixDirective, IgxReadOnlyInputDirective, @@ -108,6 +101,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. @@ -639,14 +637,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/dialog/src/dialog/dialog.component.ts b/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts index c6e49a00a42..c6f95f29f63 100644 --- a/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts +++ b/projects/igniteui-angular/dialog/src/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 'igniteui-angular/core'; @@ -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/directives/src/directives/button/button-base.ts b/projects/igniteui-angular/directives/src/directives/button/button-base.ts index af286d5f955..63ab95cb2ea 100644 --- a/projects/igniteui-angular/directives/src/directives/button/button-base.ts +++ b/projects/igniteui-angular/directives/src/directives/button/button-base.ts @@ -22,7 +22,8 @@ export const IgxBaseButtonType = { @Directive() export abstract class IgxButtonBaseDirective implements AfterViewInit{ private _platformUtil = inject(PlatformUtil); - private _viewInit = false; + public element = inject(ElementRef); + private _viewInit = false; /** * Emitted when the button is clicked. @@ -95,9 +96,7 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit{ return this.disabled || null; } - protected constructor( - public element: ElementRef, - ) { + protected constructor() { // In browser, set via native API for immediate effect (no-op on server). // In SSR there is no paint, so there’s no visual rendering or transitions to suppress. // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759 diff --git a/projects/igniteui-angular/directives/src/directives/button/button.directive.ts b/projects/igniteui-angular/directives/src/directives/button/button.directive.ts index 6401836d82a..15714511be0 100644 --- a/projects/igniteui-angular/directives/src/directives/button/button.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/button/button.directive.ts @@ -1,6 +1,5 @@ import { Directive, - ElementRef, EventEmitter, HostBinding, HostListener, @@ -8,6 +7,7 @@ import { Output, Renderer2, booleanAttribute, + inject } from '@angular/core'; import { IBaseEventArgs } from 'igniteui-angular/core'; import { IgxBaseButtonType, IgxButtonBaseDirective } from './button-base'; @@ -46,6 +46,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,11 +121,8 @@ export class IgxButtonDirective extends IgxButtonBaseDirective { return this._selected; } - constructor( - public override element: ElementRef, - private _renderer: Renderer2, - ) { - super(element); + constructor() { + super(); } /** diff --git a/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts b/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts index 2651082f410..7cad2ca3ae8 100644 --- a/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, HostBinding, Input} from '@angular/core'; +import {Directive, HostBinding, Input} from '@angular/core'; import { IgxBaseButtonType, IgxButtonBaseDirective } from './button-base'; /** @@ -23,6 +23,10 @@ export type IgxIconButtonType = typeof IgxBaseButtonType[keyof typeof IgxBaseBut export class IgxIconButtonDirective extends IgxButtonBaseDirective { private static ngAcceptInputType_type: IgxIconButtonType | ''; + constructor() { + super(); + } + /** * @hidden * @internal @@ -78,10 +82,4 @@ export class IgxIconButtonDirective extends IgxButtonBaseDirective { public get outlined(): boolean { return this._type === IgxBaseButtonType.Outlined; } - - constructor( - public override element: ElementRef, - ) { - super(element); - } } diff --git a/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts b/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts index af323ef393f..e37e78cc1ba 100644 --- a/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/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 'igniteui-angular/core'; 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/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts index f351edb82fd..fb4daf1ea45 100644 --- a/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts @@ -1,6 +1,6 @@ import { IgxDateTimeEditorDirective } from './date-time-editor.directive'; 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, 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 { ViewEncapsulation } from '@angular/core'; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; import { DatePart } from 'igniteui-angular/core'; +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)); @@ -1436,7 +1452,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/directives/src/directives/date-time-editor/date-time-editor.directive.ts b/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts index 54e9cb6cdcf..cd6ff647175 100644 --- a/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts +++ b/projects/igniteui-angular/directives/src/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, DatePartInfo, DatePart, DatePartDeltas, DateTimeUtil } from 'igniteui-angular/core'; +import { isDate, DatePartInfo, DatePart, DatePartDeltas, DateTimeUtil } from 'igniteui-angular/core'; import { IgxDateTimeEditorEventArgs } from './date-time-editor.common'; import { noop } from 'rxjs'; @@ -55,6 +50,9 @@ import { noop } from 'rxjs'; 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. * @@ -299,14 +297,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/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index 8f653e7ab56..23dd0b25719 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts index bf8553c6123..ba3fd6937b1 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/focus-trap/focus-trap.directive.ts b/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts index 84ac3800038..9f0c0790e71 100644 --- a/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts +++ b/projects/igniteui-angular/directives/src/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 'igniteui-angular/core'; @@ -8,6 +8,9 @@ import { PlatformUtil } from 'igniteui-angular/core'; 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/directives/src/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts index bd8267a7f73..9c0a9de5b04 100644 --- a/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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/src/core/edit-provider'; +import { EDITOR_PROVIDER, EditorProvider } from '../../../../core/src/core/edit-provider'; import { IgxCheckboxComponent } from '../../../../checkbox/src/checkbox/checkbox.component'; import { IgxDatePickerComponent } from '../../../../date-picker/src/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/directives/src/directives/focus/focus.directive.ts b/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts index 91a28b8d8e2..7ce6ad51901 100644 --- a/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts +++ b/projects/igniteui-angular/directives/src/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 'igniteui-angular/core'; @@ -8,6 +8,10 @@ import { EditorProvider, EDITOR_PROVIDER } from 'igniteui-angular/core'; 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/directives/src/directives/for-of/base.helper.component.ts b/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts index 5908555307e..7df0cac709d 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts @@ -5,7 +5,6 @@ import { OnDestroy, Directive, AfterViewInit, - Inject, NgZone, Renderer2, PLATFORM_ID, @@ -21,6 +20,12 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common'; 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; @@ -34,13 +39,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { protected platformId = inject(PLATFORM_ID); protected ngZone = inject(NgZone); - 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/directives/src/directives/for-of/display.container.ts b/projects/igniteui-angular/directives/src/directives/for-of/display.container.ts index 79ccacbfa99..764807e6f32 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/display.container.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts index 6f14cf456aa..68a390706b4 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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'; @@ -24,7 +7,6 @@ import { IForOfState, IgxForOfDirective } from './for_of.directive'; import { UIInteractions, wait } from '../../../../test-utils/ui-interactions.spec'; import { IgxForOfScrollSyncService } from './for_of.sync.service'; -import { PlatformUtil } from '../../../../core/src/core/utils'; describe('IgxForOf directive -', () => { const INACTIVE_VIRT_CONTAINER = 'igx-display-container--inactive'; @@ -1356,18 +1338,16 @@ 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) { - super(viewContainer, template, differs, changeDet, zone, syncService, platformUtil, document); - } + public override onScroll(evt) { const ind = this.scrTopArray.length - 1; const prevScrTop = ind < 0 ? 0 : this.scrTopArray[ind]; @@ -1745,6 +1725,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 +1735,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 +1770,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 +1781,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/directives/src/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts index 3bc7b8955ff..7d035ae2888 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/for-of/horizontal.virtual.helper.component.ts b/projects/igniteui-angular/directives/src/directives/for-of/horizontal.virtual.helper.component.ts index a5d01360129..71981c495ef 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/horizontal.virtual.helper.component.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/horizontal.virtual.helper.component.ts @@ -1,7 +1,5 @@ -import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core'; +import { Component, HostBinding, Input, ViewChild, ViewContainerRef } from '@angular/core'; import { VirtualHelperBaseDirective } from './base.helper.component'; -import { DOCUMENT } from '@angular/common'; -import { PlatformUtil } from 'igniteui-angular/core'; /** * @hidden @@ -19,16 +17,6 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective { @HostBinding('class') public cssClasses = 'igx-vhelper--horizontal'; - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - zone: NgZone, - @Inject(DOCUMENT) document: any, - platformUtil: PlatformUtil - ) { - super(elementRef, cdr, zone, document, platformUtil); - } - protected override restoreScroll() { this.nativeElement.scrollLeft = this.scrollAmount; } diff --git a/projects/igniteui-angular/directives/src/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/directives/src/directives/for-of/virtual.helper.component.ts index f23bc3461f6..17263004f61 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/virtual.helper.component.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/virtual.helper.component.ts @@ -1,8 +1,6 @@ -import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, - ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone} from '@angular/core'; +import { Component, HostBinding, Input, ViewChild, ViewContainerRef, + OnDestroy, OnInit} from '@angular/core'; import { VirtualHelperBaseDirective } from './base.helper.component'; -import { DOCUMENT } from '@angular/common'; -import { PlatformUtil } from 'igniteui-angular/core'; @Component({ selector: 'igx-virtual-helper', @@ -21,16 +19,6 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement @HostBinding('class') public cssClasses = 'igx-vhelper--vertical'; - constructor( - elementRef: ElementRef, - cdr: ChangeDetectorRef, - zone: NgZone, - @Inject(DOCUMENT) document: any, - 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/directives/src/directives/form-control/form-control.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.spec.ts index d7fbf5bec89..7de8dfb9ae5 100644 --- a/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/form-control/form-control.directive.ts b/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts index d683aca9b58..91d7b6f1478 100644 --- a/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/mask/mask.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/mask/mask.directive.spec.ts index 918bb0563d6..cd08b66bcd9 100644 --- a/projects/igniteui-angular/directives/src/directives/mask/mask.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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/src/input-group/input-group.component'; import { IgxInputDirective } from 'igniteui-angular/input-group'; +import { PlatformUtil } from 'igniteui-angular/core'; 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/directives/src/directives/mask/mask.directive.ts b/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts index 1ad1cfe4e28..b92a9cb15d3 100644 --- a/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts +++ b/projects/igniteui-angular/directives/src/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 'igniteui-angular/core'; @@ -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/directives/src/directives/ripple/ripple.directive.ts b/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts index 84ebeb95753..d7e0dc61fd8 100644 --- a/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/scroll-inertia/scroll_inertia.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/scroll-inertia/scroll_inertia.directive.spec.ts index 039af20a8c8..251e29ea7d8 100644 --- a/projects/igniteui-angular/directives/src/directives/scroll-inertia/scroll_inertia.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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, OnInit, ViewChild, ElementRef } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxScrollInertiaDirective } from './scroll_inertia.directive'; @@ -82,14 +75,21 @@ describe('Scroll Inertia Directive - Scrolling', () => { let scrollContainerMock; beforeEach(() => { - const mockZone = jasmine.createSpyObj('NgZone', ['runOutsideAngular']); 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; }); @@ -101,14 +101,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); @@ -117,14 +117,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); @@ -132,53 +132,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); @@ -192,7 +192,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -201,7 +201,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: -100 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -218,7 +218,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -227,7 +227,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: -100 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -241,7 +241,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -255,7 +255,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); evt = { @@ -263,7 +263,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: -10, pageY: -50 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -281,7 +281,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: 0, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; scrollInertiaDir.onTouchStart(evt); @@ -290,7 +290,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { pageX: -100, pageY: 0 }], - preventDefault: () => {} + preventDefault: () => { } }; tick(10); scrollInertiaDir.onTouchMove(evt); @@ -303,10 +303,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(); }); }); @@ -317,9 +317,6 @@ describe('Scroll Inertia Directive - Scrolling', () => { }) export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { - constructor(element: ElementRef, _zone: NgZone) { - super(element, _zone); - } public override onWheel(evt) { super.onWheel(evt); } @@ -331,7 +328,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) { @@ -365,7 +362,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/directives/src/directives/scroll-inertia/scroll_inertia.directive.ts b/projects/igniteui-angular/directives/src/directives/scroll-inertia/scroll_inertia.directive.ts index 474be997a01..867f72f585a 100644 --- a/projects/igniteui-angular/directives/src/directives/scroll-inertia/scroll_inertia.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/template-outlet/template_outlet.directive.ts b/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts index 780d9927cd8..7c300dc67dd 100644 --- a/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts +++ b/projects/igniteui-angular/directives/src/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 'igniteui-angular/core'; @@ -13,6 +10,10 @@ import { IBaseEventArgs } from 'igniteui-angular/core'; 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/directives/src/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.spec.ts index faa0a923117..98e10d64095 100644 --- a/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts index 50e9a0b62a8..d1c8f7d226b 100644 --- a/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/directives/src/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 'igniteui-angular/core'; @@ -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/directives/src/directives/text-selection/text-selection.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.spec.ts index 777675ef759..2446d1c1eb1 100644 --- a/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/text-selection/text-selection.directive.ts b/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts index c1cd541ebb8..06828898bb4 100644 --- a/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts +++ b/projects/igniteui-angular/directives/src/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/directives/src/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts index cf4f3cd509f..7db9cfdc34c 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/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 } 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'; @@ -716,12 +716,10 @@ export class IgxToggleServiceInjectComponent { imports: [IgxToggleDirective] }) export class IgxOverlayServiceComponent { + public overlay = inject(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/directives/src/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts index 286472fab6b..b49747cacd6 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts @@ -4,11 +4,10 @@ import { ElementRef, EventEmitter, HostListener, - Inject, + inject, Input, OnDestroy, OnInit, - Optional, Output, } from '@angular/core'; import { AbsoluteScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core'; @@ -46,6 +45,12 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc } }) 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. * @@ -202,18 +207,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. * @@ -427,6 +420,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 @@ -479,8 +475,6 @@ export class IgxToggleActionDirective implements OnInit { protected _overlayDefaults: OverlaySettings; protected _target: IToggleView | string; - constructor(private element: ElementRef, @Optional() private navigationService: IgxNavigationService) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts index 4eace9740ef..fb6d03c3b76 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts @@ -1,13 +1,12 @@ import { - Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener, - Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2, + Directive, OnInit, OnDestroy, Output, ViewContainerRef, HostListener, + Input, EventEmitter, booleanAttribute, inject, TemplateRef, ComponentRef, Renderer2, EnvironmentInjector, createComponent, AfterViewInit, } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { IgxNavigationService } from 'igniteui-angular/core'; import { IBaseEventArgs } from 'igniteui-angular/core'; import { PositionSettings } from 'igniteui-angular/core'; import { IgxToggleActionDirective } from '../toggle/toggle.directive'; @@ -47,6 +46,10 @@ export interface ITooltipHideEventArgs extends IBaseEventArgs { standalone: true }) export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, AfterViewInit, OnDestroy { + private _viewContainerRef = inject(ViewContainerRef); + private _renderer = inject(Renderer2); + private _envInjector = inject(EnvironmentInjector); + /** * Gets/sets the amount of milliseconds that should pass before showing the tooltip. * @@ -247,7 +250,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; } @@ -273,7 +276,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen * ``` */ public get nativeElement() { - return this._element.nativeElement; + return this.element.nativeElement; } /** @@ -332,16 +335,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen private _sticky = false; private _positionSettings: PositionSettings = TooltipPositionSettings; - constructor( - private _element: ElementRef, - @Optional() private _navigationService: IgxNavigationService, - private _viewContainerRef: ViewContainerRef, - private _renderer: Renderer2, - private _envInjector: EnvironmentInjector - ) { - super(_element, _navigationService); - } - /** * @hidden */ diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts index 01f891d0506..626dab2ad25 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts @@ -1,11 +1,10 @@ import { - Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject, + Directive, Input, HostBinding, OnDestroy, inject, DOCUMENT, HostListener, Renderer2, AfterViewInit, } from '@angular/core'; -import { IgxOverlayService, OverlaySettings, PlatformUtil } from 'igniteui-angular/core'; -import { IgxNavigationService } from 'igniteui-angular/core'; +import { OverlaySettings, PlatformUtil } from 'igniteui-angular/core'; import { IgxToggleDirective } from '../toggle/toggle.directive'; import { IgxTooltipTargetDirective } from './tooltip-target.directive'; import { Subject, takeUntil } from 'rxjs'; @@ -122,13 +121,8 @@ export class IgxTooltipDirective extends IgxToggleDirective implements AfterView private _platformUtil = inject(PlatformUtil); /** @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.opening.pipe(takeUntil(this._destroy$)).subscribe(() => { diff --git a/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts index 9c42bc0c5c9..5d61ef65741 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/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'; @@ -1061,7 +1061,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/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts index 019c2df9c8f..4388c106310 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/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'; @@ -75,6 +59,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 * @@ -216,14 +206,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/drop-down/src/drop-down/drop-down-item.base.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts index 8b2dd2d2a76..4d6d57664bb 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts +++ b/projects/igniteui-angular/drop-down/src/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 'igniteui-angular/core'; 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/drop-down/src/drop-down/drop-down-navigation.directive.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts index 1b8ca5874d0..88be5af2b87 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Optional, Self, Input, HostListener, Inject, HostBinding } from '@angular/core'; +import { Directive, Input, HostListener, inject, HostBinding } 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/drop-down/src/drop-down/drop-down.base.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts index b97de018122..6a65ef09274 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/drop-down/src/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 * @@ -189,11 +193,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/drop-down/src/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts index 3097686dc9b..cd854d289a5 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/drop-down/src/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/drop-down/src/drop-down/drop-down.component.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts index 25e9284c4a1..6b579877603 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts @@ -1,5 +1,4 @@ import { - ChangeDetectorRef, Component, ContentChildren, ElementRef, @@ -15,9 +14,7 @@ import { EventEmitter, SimpleChanges, booleanAttribute, - Inject, - DOCUMENT -} from '@angular/core'; + inject} from '@angular/core'; import { IgxToggleDirective, ToggleViewEventArgs } from 'igniteui-angular/directives'; import { IgxDropDownItemComponent } from './drop-down-item.component'; import { IgxDropDownBaseDirective } from './drop-down.base'; @@ -57,6 +54,8 @@ import { ConnectedPositioningStrategy } from 'igniteui-angular/core'; imports: [IgxToggleDirective] }) export class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy { + protected selection = inject(IgxSelectionAPIService); + /** * @hidden * @internal @@ -237,14 +236,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/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts index ddb01158e96..84902e18e43 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts +++ b/projects/igniteui-angular/expansion-panel/src/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/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts index 51e3db20803..2a89c02649a 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/expansion-panel/src/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 'igniteui-angular/icon'; @@ -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/expansion-panel/src/expansion-panel/expansion-panel.common.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts index c8210518974..ee08acffd3e 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts +++ b/projects/igniteui-angular/expansion-panel/src/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 'igniteui-angular/core'; @@ -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/expansion-panel/src/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts index c6cd61cb67f..cdd36288ff4 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts @@ -6,13 +6,11 @@ import { ElementRef, EventEmitter, HostBinding, - Inject, + inject, Input, Output, booleanAttribute } from '@angular/core'; -import { IgxAngularAnimationService } from 'igniteui-angular/core'; -import { AnimationService } from 'igniteui-angular/core'; import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; import { @@ -32,6 +30,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 +215,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/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts index 77db3af7cb4..f4905be4d77 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts +++ b/projects/igniteui-angular/expansion-panel/src/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 'igniteui-angular/core'; -import { AnimationService } from 'igniteui-angular/core'; import { ANIMATION_TYPE, ToggleAnimationPlayer } from './toggle-animation-component'; import { growVerIn, growVerOut } from 'igniteui-angular/animations'; 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/expansion-panel/src/expansion-panel/toggle-animation-component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts index 24a89b60007..32dfd401d97 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts +++ b/projects/igniteui-angular/expansion-panel/src/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/grids/core/src/api.service.ts b/projects/igniteui-angular/grids/core/src/api.service.ts index b7b096f5245..3260230d79f 100644 --- a/projects/igniteui-angular/grids/core/src/api.service.ts +++ b/projects/igniteui-angular/grids/core/src/api.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { cloneArray, @@ -27,14 +27,11 @@ import { IgxColumnMovingService } from './moving/moving.service'; @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/grids/core/src/cell.component.ts b/projects/igniteui-angular/grids/core/src/cell.component.ts index 0515c6545a0..db9ab8e82e5 100644 --- a/projects/igniteui-angular/grids/core/src/cell.component.ts +++ b/projects/igniteui-angular/grids/core/src/cell.component.ts @@ -14,11 +14,11 @@ import { 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'; @@ -39,7 +39,7 @@ import { import { IgxGridSelectionService } from './selection/selection.service'; import { HammerGesturesManager } from 'igniteui-angular/core'; import { GridSelectionMode } from './common/enums'; -import { CellType, GridType, IgxCellTemplateContext, IGX_GRID_BASE, RowType } from './common/grid.interface'; +import { CellType, IgxCellTemplateContext, IGX_GRID_BASE, RowType } from './common/grid.interface'; import { IgxRowDirective } from './row.directive'; import { ISearchInfo } from './common/events'; import { IgxGridCell } from './grid-public-cell'; @@ -108,6 +108,15 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; ] }) 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 @@ -834,16 +843,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/grids/core/src/column-actions/column-actions.component.ts b/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts index 7cd87e7f9b4..0c474bc8585 100644 --- a/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { GridType } from '../common/grid.interface'; import { IColumnToggledEventArgs } from '../common/events'; @@ -22,6 +22,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. @@ -160,7 +162,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); } @@ -389,8 +391,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[], @@ -418,8 +420,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/grids/core/src/column-actions/column-hiding.directive.ts b/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts index 75aee17151b..2492480ee71 100644 --- a/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts +++ b/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Inject } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxColumnActionsComponent } from './column-actions.component'; import { ColumnType } from 'igniteui-angular/core'; @@ -8,11 +8,13 @@ import { ColumnType } from 'igniteui-angular/core'; 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/grids/core/src/column-actions/column-pinning.directive.ts b/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts index a7724315f18..742b4d1b6ab 100644 --- a/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts +++ b/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Inject } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxColumnActionsComponent } from './column-actions.component'; import { ColumnType } from 'igniteui-angular/core'; @@ -8,11 +8,13 @@ import { ColumnType } from 'igniteui-angular/core'; 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/grids/core/src/columns/column.component.ts b/projects/igniteui-angular/grids/core/src/columns/column.component.ts index b3e30b15f3a..d4df6bfac52 100644 --- a/projects/igniteui-angular/grids/core/src/columns/column.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxRowDirective } from '../row.directive'; @@ -71,6 +54,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 @@ -120,7 +110,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy /** * @hidden @internal */ - public validators: Validator[] = []; + public validators: Validator[] = this._validators; /** * Sets/gets the `header` value. @@ -1961,16 +1951,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/grids/core/src/columns/templates.directive.ts b/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts index a13e22f9a12..bd48d8792b4 100644 --- a/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/common/pipes.ts b/projects/igniteui-angular/grids/core/src/common/pipes.ts index b82a8c4338a..9a7d14242fa 100644 --- a/projects/igniteui-angular/grids/core/src/common/pipes.ts +++ b/projects/igniteui-angular/grids/core/src/common/pipes.ts @@ -1,4 +1,4 @@ -import { Pipe, PipeTransform, Inject } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { GridType, IGX_GRID_BASE, RowType } from './grid.interface'; import { IgxAddRow } from './crud.service'; import { IgxSummaryOperand } from '../summaries/grid-summary'; @@ -98,9 +98,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, {}); } @@ -160,8 +162,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 = {}; @@ -233,8 +235,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) { @@ -303,8 +305,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) { @@ -397,8 +399,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/grids/core/src/common/types.ts b/projects/igniteui-angular/grids/core/src/common/types.ts index 891fe0160f6..8d566c654ac 100644 --- a/projects/igniteui-angular/grids/core/src/common/types.ts +++ b/projects/igniteui-angular/grids/core/src/common/types.ts @@ -1,4 +1,5 @@ import { InjectionToken } from '@angular/core'; +import { State, Transaction, TransactionService } from 'igniteui-angular/core'; /* 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/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index 9df13b65925..8de843ac1e9 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { Subject } from 'rxjs'; import { IActiveNode } from '../../grid-navigation.service'; import { GridType } from '../../common/grid.interface'; @@ -26,6 +24,9 @@ import { EntityType, FieldType, getCurrentResourceStrings, GridResourceStringsEN imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective] }) export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy { + public cdr = inject(ChangeDetectorRef); + protected platform = inject(PlatformUtil); + /** * @hidden @internal */ @@ -52,8 +53,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/grids/core/src/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-cell.component.ts index f6409d5a313..c99c34d3355 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxFilteringService } from '../grid-filtering.service'; import { ExpressionUI } from '../excel-style/common'; import { NgClass, NgTemplateOutlet } from '@angular/common'; @@ -38,6 +26,9 @@ import { ColumnType, IFilteringExpression, ɵSize } from 'igniteui-angular/core' ] }) export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck { + public cdr = inject(ChangeDetectorRef); + public filteringService = inject(IgxFilteringService); + @Input() public column: ColumnType; @@ -90,10 +81,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/grids/core/src/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts index b1699778d66..5343a747db8 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts @@ -15,8 +15,7 @@ import { OnDestroy, InjectionToken, inject, - OnInit -} from '@angular/core'; + OnInit} from '@angular/core'; import { IgxFilteringService } from '../grid-filtering.service'; import { Subject } from 'rxjs'; import { debounceTime, takeUntil } from 'rxjs/operators'; @@ -70,6 +69,11 @@ export const INPUT_DEBOUNCE_TIME = /*@__PURE__*/new InjectionToken('INPU ] }) export class IgxGridFilteringRowComponent implements OnInit, 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; @@ -214,13 +218,6 @@ export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDe private $destroyer = new Subject(); private readonly DEBOUNCE_TIME = inject(INPUT_DEBOUNCE_TIME); - constructor( - public filteringService: IgxFilteringService, - public ref: ElementRef, - public cdr: ChangeDetectorRef, - protected platform: PlatformUtil, - ) { } - public ngOnInit(): void { this.inputSubject.pipe( debounceTime(this.DEBOUNCE_TIME), diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts index 1aa00010eb7..df20c0571a0 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { ExpressionUI, FilterListItem } from './common'; import { IgxOverlayService, PlatformUtil } from 'igniteui-angular/core'; @@ -6,6 +6,10 @@ import { IgxOverlayService, PlatformUtil } from 'igniteui-angular/core'; @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 listDataLoaded: EventEmitter; public abstract filterCleared: 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/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts index 9042af7407e..d8bb213392e 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { BaseFilteringComponent } from './base-filtering.component'; import { NgClass } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -13,10 +13,9 @@ import { PlatformUtil } from 'igniteui-angular/core'; 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/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts index 945d701741a..5ed40340e94 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxExcelStyleCustomDialogComponent } from './excel-style-custom-dialog.component'; @@ -18,6 +18,9 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, Horiz imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent] }) export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { + public esf = inject(BaseFilteringComponent); + protected platform = inject(PlatformUtil); + /** * @hidden @internal */ @@ -48,10 +51,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/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts index aec7464580a..0abbe0633f2 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component'; import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component'; @@ -28,6 +18,11 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, FilteringLogi 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(); @@ -75,14 +70,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/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts index 71fb49cc960..391ee0f4f15 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { FormsModule } from '@angular/forms'; import { ExpressionUI } from './common'; import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataUtil, FilteringLogic, GridColumnDataType, IBaseEventArgs, IFilteringOperation, IgxOverlayOutletDirective, OverlaySettings, PlatformUtil } from 'igniteui-angular/core'; @@ -33,6 +25,9 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs { imports: [FormsModule, 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; @@ -96,8 +91,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/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts index 4812a3fcaf8..8d53de8b8e3 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts @@ -1,31 +1,28 @@ import { AfterViewInit, ChangeDetectionStrategy, - ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, - Host, HostBinding, - Inject, Input, OnDestroy, - Optional, Output, TemplateRef, ViewChild, ViewRef, - DOCUMENT + DOCUMENT, + inject } from '@angular/core'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; import { formatCurrency, formatDate, formatNumber, formatPercent, getLocaleCurrencyCode, NgClass } from '@angular/common'; import { BaseFilteringComponent } from './base-filtering.component'; import { ExpressionUI, FilterListItem, generateExpressionsList } from './common'; -import { IGX_GRID_BASE } from '../../common/grid.interface'; +import { GridType, IGX_GRID_BASE } from '../../common/grid.interface'; import { IgxExcelStyleSearchComponent } from './excel-style-search.component'; import { IgxExcelStyleConditionalFilterComponent } from './excel-style-conditional-filter.component'; import { IgxExcelStyleClearFiltersComponent } from './excel-style-clear-filters.component'; @@ -35,7 +32,7 @@ import { IgxExcelStylePinningComponent } from './excel-style-pinning.component'; import { IgxExcelStyleMovingComponent } from './excel-style-moving.component'; import { IgxExcelStyleSortingComponent } from './excel-style-sorting.component'; import { IgxExcelStyleHeaderComponent } from './excel-style-header.component'; -import { ColumnType, FilteringExpressionsTree, GridColumnDataType, GridTypeBase, IFilteringExpressionsTree, IgxFilterItem, IgxOverlayService, isTree, PlatformUtil, SortingDirection } from 'igniteui-angular/core'; +import { ColumnType, FilteringExpressionsTree, GridColumnDataType, GridTypeBase, IFilteringExpressionsTree, IgxFilterItem, IgxOverlayService, isTree, SortingDirection } from 'igniteui-angular/core'; @Directive({ selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]', @@ -68,6 +65,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 @@ -276,17 +276,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?: GridTypeBase, - ) { - super(cdr, element, platform); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts index 0c8a0e21df3..f01f0eee140 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { NgClass } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -13,6 +13,8 @@ import { IgxIconButtonDirective } from 'igniteui-angular/directives'; 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/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts index 444492805ff..5db40be03d4 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 'igniteui-angular/icon'; @@ -11,5 +11,5 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; imports: [IgxIconComponent] }) export class IgxExcelStyleHidingComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts index 59df5309b19..8eb6ff10f33 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { BaseFilteringComponent } from './base-filtering.component'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -14,14 +14,14 @@ import { ColumnPinningPosition, ColumnType } from 'igniteui-angular/core'; 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/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts index c7e0e534384..51aeaf963eb 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { NgClass } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -12,5 +12,5 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; imports: [NgClass, IgxIconComponent] }) export class IgxExcelStylePinningComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts index c8ec97955a5..54a59cb4783 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { Subject } from 'rxjs'; import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { takeUntil } from 'rxjs/operators'; @@ -30,11 +20,12 @@ import { Navigate } from 'igniteui-angular/drop-down'; 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; @@ -47,6 +38,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; /** @@ -195,7 +190,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/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts index 1075c8185d5..718ee62708c 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { NgClass } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -12,5 +12,5 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; imports: [NgClass, IgxIconComponent] }) export class IgxExcelStyleSelectingComponent { - constructor(public esf: BaseFilteringComponent) { } + public esf = inject(BaseFilteringComponent); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts index 56dd130b1a0..f42af3a270d 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { BaseFilteringComponent } from './base-filtering.component'; @@ -21,6 +15,9 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; 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/grids/core/src/filtering/grid-filtering.service.ts b/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts index a34d528c139..639798d6e51 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts @@ -1,7 +1,4 @@ -import { - Injectable, - OnDestroy, -} from '@angular/core'; +import { Injectable, OnDestroy, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, first } from 'rxjs/operators'; import { IColumnResizeEventArgs, IFilteringEventArgs } from '../common/events'; @@ -21,6 +18,9 @@ import { IForOfState } from 'igniteui-angular/directives'; */ @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; @@ -47,11 +47,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/grids/core/src/grid-actions/grid-actions-base.directive.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts index 2304d157fa7..c3bbb0b3e47 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxIconService } from 'igniteui-angular/icon'; import { IgxRowDirective } from '../row.directive'; import { IgxActionStripToken } from 'igniteui-angular/core'; @@ -14,6 +14,9 @@ import { IgxActionStripToken } from 'igniteui-angular/core'; 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/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts index fe8be438f0c..52e08f45b4f 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts @@ -17,6 +17,7 @@ import { IgxHierarchicalRowComponent } from 'igniteui-angular/grids/hierarchical import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IRowDataCancelableEventArgs } from '../common/events'; import { IgxColumnComponent } from '../columns/column.component'; +import { IgxGridNavigationService } from 'igniteui-angular'; describe('igxGridEditingActions #grid ', () => { let fixture; @@ -33,6 +34,9 @@ describe('igxGridEditingActions #grid ', () => { IgxActionStripEditMenuComponent, IgxActionStripOneRowComponent, IgxActionStripMenuOneRowComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts b/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts index 50e1df6d249..bc2ea569236 100644 --- a/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts +++ b/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { first, throttleTime } from 'rxjs/operators'; import { IgxForOfDirective } from 'igniteui-angular/directives'; import { GridType } from './common/grid.interface'; @@ -34,6 +34,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; @@ -48,7 +49,7 @@ export class IgxGridNavigationService { this._activeNode = value; } - constructor(protected platform: PlatformUtil) { + constructor() { this.keydownNotify.pipe( throttleTime(30, animationFrameScheduler), ) diff --git a/projects/igniteui-angular/grids/core/src/grid-public-cell.ts b/projects/igniteui-angular/grids/core/src/grid-public-cell.ts index 830bec008c1..d3eb8d61314 100644 --- a/projects/igniteui-angular/grids/core/src/grid-public-cell.ts +++ b/projects/igniteui-angular/grids/core/src/grid-public-cell.ts @@ -4,6 +4,8 @@ import { columnFieldPath, type ColumnType, resolveNestedPath } from 'igniteui-an export class IgxGridCell implements CellType { + + /** * Returns the grid containing the cell. * diff --git a/projects/igniteui-angular/grids/core/src/grid.directives.ts b/projects/igniteui-angular/grids/core/src/grid.directives.ts index 2221f657b10..04b402b3eb4 100644 --- a/projects/igniteui-angular/grids/core/src/grid.directives.ts +++ b/projects/igniteui-angular/grids/core/src/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 'igniteui-angular/directives'; import { IgxColumnMovingDragDirective } from './moving/moving.drag.directive'; import { IgxGroupByAreaDirective } from './grouping/group-by-area.directive'; @@ -19,13 +19,11 @@ import { ColumnType } from 'igniteui-angular/core'; 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/grids/core/src/grid.rowEdit.directive.ts b/projects/igniteui-angular/grids/core/src/grid.rowEdit.directive.ts index f5c63c7b497..a359a7c4c53 100644 --- a/projects/igniteui-angular/grids/core/src/grid.rowEdit.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/grouping/grid-group-by-area.component.ts b/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts index de56890dcd4..e7a59842b03 100644 --- a/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts +++ b/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts @@ -1,6 +1,5 @@ import { Component, - ElementRef, Input, } from '@angular/core'; import { IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; @@ -11,7 +10,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxDropDirective } from 'igniteui-angular/directives'; -import { IGroupingExpression, ISortingExpression, PlatformUtil } from 'igniteui-angular/core'; +import { IGroupingExpression, ISortingExpression } from 'igniteui-angular/core'; /** * An internal component representing the group-by drop area for the igx-grid component. @@ -32,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/grids/core/src/grouping/group-by-area.directive.ts b/projects/igniteui-angular/grids/core/src/grouping/group-by-area.directive.ts index b4c9bd0b29e..e2beae8f486 100644 --- a/projects/igniteui-angular/grids/core/src/grouping/group-by-area.directive.ts +++ b/projects/igniteui-angular/grids/core/src/grouping/group-by-area.directive.ts @@ -3,6 +3,7 @@ import { ElementRef, EventEmitter, HostBinding, + inject, Input, Output, Pipe, @@ -23,6 +24,9 @@ import { IGroupingExpression, PlatformUtil, SortingDirection } from 'igniteui-an */ @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. @@ -81,9 +85,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/grids/core/src/headers/grid-header-group.component.ts b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.ts index 9a5de67f9be..269708993f7 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.ts @@ -7,7 +7,7 @@ import { forwardRef, HostBinding, HostListener, - Inject, + inject, Input, QueryList, ViewChild, @@ -40,6 +40,14 @@ const Z_INDEX = 9999; }) 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 { return this.column.rowEnd; @@ -119,13 +127,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__drag-col-header') public get headerDragCss() { return this.isHeaderDragged; diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts index 6646a57fb4f..a8fef047e5b 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts @@ -10,7 +10,8 @@ import { TemplateRef, ViewChild, ViewChildren, - booleanAttribute + booleanAttribute, + inject } from '@angular/core'; import { GridType, IgxHeadSelectorTemplateContext } from '../common/grid.interface'; import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component'; @@ -40,6 +41,9 @@ import { ColumnType, flatten, trackByIdentity } from 'igniteui-angular/core'; imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderRowComponent implements DoCheck { + protected ref = inject>(ElementRef); + protected cdr = inject(ChangeDetectorRef); + /** The grid component containing this element. */ @Input() @@ -196,11 +200,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/grids/core/src/headers/grid-header.component.ts b/projects/igniteui-angular/grids/core/src/headers/grid-header.component.ts index 36c25a9418f..9a86798f681 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header.component.ts +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header.component.ts @@ -6,7 +6,7 @@ import { ElementRef, HostBinding, HostListener, - Inject, + inject, Input, OnDestroy, TemplateRef, @@ -31,6 +31,10 @@ import { ColumnType, ExpressionsTreeUtil, GridColumnDataType, SortingDirection } 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; @@ -238,13 +242,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/grids/core/src/moving/moving.drag.directive.ts b/projects/igniteui-angular/grids/core/src/moving/moving.drag.directive.ts index 24884a25a47..3be06517cb2 100644 --- a/projects/igniteui-angular/grids/core/src/moving/moving.drag.directive.ts +++ b/projects/igniteui-angular/grids/core/src/moving/moving.drag.directive.ts @@ -1,9 +1,9 @@ -import { Directive, OnDestroy, Input, ElementRef, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { Directive, OnDestroy, Input, inject } from '@angular/core'; import { Subscription, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IgxColumnMovingService } from './moving.service'; import { IgxDragDirective } from 'igniteui-angular/directives'; -import { ColumnType, PlatformUtil } from 'igniteui-angular/core'; +import { ColumnType } from 'igniteui-angular/core'; /** * @hidden @@ -14,6 +14,8 @@ import { ColumnType, PlatformUtil } from 'igniteui-angular/core'; standalone: true }) export class IgxColumnMovingDragDirective extends IgxDragDirective implements OnDestroy { + private cms = inject(IgxColumnMovingService); + @Input('igxColumnMovingDrag') public column: ColumnType; @@ -32,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/grids/core/src/moving/moving.drop.directive.ts b/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts index bdec44dbaa3..60354cd1e9b 100644 --- a/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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'; @@ -11,6 +11,8 @@ import { ColumnType } from 'igniteui-angular/core'; standalone: true }) export class IgxColumnMovingDropDirective extends IgxDropDirective implements OnDestroy { + private cms = inject(IgxColumnMovingService); + @Input('igxColumnMovingDrop') public override set data(val: ColumnType | IgxForOfDirective) { @@ -38,7 +40,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On } public get nativeElement() { - return this.ref.nativeElement; + return this.element.nativeElement; } private _dropPos: DropPosition; @@ -49,13 +51,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() { @@ -76,7 +73,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(); @@ -92,7 +89,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); } } } @@ -144,7 +141,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/grids/core/src/resizing/pivot-grid/pivot-resize-handle.directive.ts b/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resize-handle.directive.ts index c9c66fa90a1..9d429901246 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resize-handle.directive.ts +++ b/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resize-handle.directive.ts @@ -1,9 +1,7 @@ import { Directive, - ElementRef, - Input, - NgZone -} from '@angular/core'; + inject, + Input} from '@angular/core'; import { IgxPivotColumnResizingService } from './pivot-resizing.service' import { IgxResizeHandleDirective } from '../resize-handle.directive'; import { ColumnType } from 'igniteui-angular/core'; @@ -18,6 +16,8 @@ import { PivotRowHeaderGroupType } from '../../pivot-grid.interface'; standalone: true }) export class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective { + public override colResizingService = inject(IgxPivotColumnResizingService); + /** * @hidden @@ -37,12 +37,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/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts b/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts index 47347a1f00c..d4ca1f30f9e 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/resizing/resize-handle.directive.ts b/projects/igniteui-angular/grids/core/src/resizing/resize-handle.directive.ts index 826a6019718..4a2f4ecf3bf 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/resize-handle.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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, map, takeUntil } from 'rxjs/operators'; import { IgxColumnResizingService } from './resizing.service'; @@ -22,6 +14,10 @@ import { ColumnType } from 'igniteui-angular/core'; 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/grids/core/src/resizing/resizer.component.ts b/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts index 5987715f3a6..b2e760491f0 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/resizing/resizer.directive.ts b/projects/igniteui-angular/grids/core/src/resizing/resizer.directive.ts index 0695ae73d25..ce89d99711a 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/resizing/resizing.service.ts b/projects/igniteui-angular/grids/core/src/resizing/resizing.service.ts index 0073daab44f..4bb2cc39758 100644 --- a/projects/igniteui-angular/grids/core/src/resizing/resizing.service.ts +++ b/projects/igniteui-angular/grids/core/src/resizing/resizing.service.ts @@ -1,4 +1,4 @@ -import { Injectable, NgZone } from '@angular/core'; +import { inject, Injectable, NgZone } from '@angular/core'; import { ColumnType } from 'igniteui-angular/core'; /** @@ -7,6 +7,8 @@ import { ColumnType } from 'igniteui-angular/core'; */ @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/grids/core/src/row-drag.directive.ts b/projects/igniteui-angular/grids/core/src/row-drag.directive.ts index 085e2f5718a..7a31e8d12a3 100644 --- a/projects/igniteui-angular/grids/core/src/row-drag.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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 'igniteui-angular/directives'; 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/grids/core/src/row.directive.ts b/projects/igniteui-angular/grids/core/src/row.directive.ts index 48c88d0e47c..9bab2b6624f 100644 --- a/projects/igniteui-angular/grids/core/src/row.directive.ts +++ b/projects/igniteui-angular/grids/core/src/row.directive.ts @@ -9,7 +9,7 @@ import { forwardRef, HostBinding, HostListener, - Inject, + inject, Input, OnDestroy, Output, @@ -33,6 +33,11 @@ import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; 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 */ @@ -399,12 +404,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/grids/core/src/selection/drag-select.directive.ts b/projects/igniteui-angular/grids/core/src/selection/drag-select.directive.ts index 11ca40a9dfb..9aa941f4141 100644 --- a/projects/igniteui-angular/grids/core/src/selection/drag-select.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/selection/row-selectors.ts b/projects/igniteui-angular/grids/core/src/selection/row-selectors.ts index 2b24560ef71..81dac7d8be0 100644 --- a/projects/igniteui-angular/grids/core/src/selection/row-selectors.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/selection/selection.service.ts b/projects/igniteui-angular/grids/core/src/selection/selection.service.ts index 2dee6e3dfe1..db318ff7c91 100644 --- a/projects/igniteui-angular/grids/core/src/selection/selection.service.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IRowSelectionEventArgs } from '../common/events'; import { GridType } from '../common/grid.interface'; @@ -9,6 +9,9 @@ import { PivotUtil } from '../pivot-util'; @Injectable() export class IgxGridSelectionService { + private zone = inject(NgZone); + protected platform = inject(PlatformUtil); + public grid: GridType; public dragMode = false; public activeElement: ISelectionNode | null; @@ -69,7 +72,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/grids/core/src/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts index 2ae12e32df9..3c8425f531c 100644 --- a/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts @@ -18,7 +18,7 @@ import { IgxPivotGridTestBaseComponent } from '../../../../../test-utils/pivot-g import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; -import { IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; +import { IgxGridNavigationService, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; import { CSVWrapper } from './csv-verification-wrapper.spec'; @@ -520,6 +520,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/grids/core/src/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts index c38372085d1..45d15167a3d 100644 --- a/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts @@ -41,7 +41,7 @@ import { IgxPivotGridMultipleRowComponent, IgxPivotGridTestComplexHierarchyCompo import { IgxHierarchicalRowComponent } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; -import { IgxPivotNumericAggregate, PivotRowLayoutType } from 'igniteui-angular/grids/core'; +import { IgxGridNavigationService, IgxPivotNumericAggregate, PivotRowLayoutType } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { FileContentData } from './test-data.service.spec'; @@ -83,6 +83,9 @@ describe('Excel Exporter', () => { GridCustomSummaryWithUndefinedZeroAndValidNumberComponent, GridCustomSummaryWithUndefinedAndNullComponent, GridCustomSummaryWithDateComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -288,7 +291,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); @@ -305,13 +308,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); @@ -319,7 +322,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); @@ -523,7 +526,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(); @@ -544,7 +547,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(); @@ -704,7 +707,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; @@ -820,14 +823,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(); @@ -906,7 +909,7 @@ describe('Excel Exporter', () => { args.header === 'Tickets Sold' || args.header === 'Released') { args.cancel = true; - } + } }); fix.detectChanges(); @@ -920,8 +923,8 @@ describe('Excel Exporter', () => { args.owner?.key === "Songs" || args.owner?.key === "Tours" || args.owner?.key === "TourData") { - args.cancel = true; - } + args.cancel = true; + } }); fix.detectChanges(); @@ -1052,7 +1055,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(); @@ -1084,7 +1087,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); @@ -1111,7 +1114,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(); @@ -1460,11 +1463,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; @@ -1507,7 +1511,7 @@ describe('Excel Exporter', () => { memberName: 'All_Srep Codes', enabled: true, width: '150px', - childLevel: { + childLevel: { memberName: 'SREP_CODE', displayName: 'Srep Code', sortDirection: 1, @@ -1528,29 +1532,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); @@ -1579,7 +1583,7 @@ describe('Excel Exporter', () => { memberName: 'ProductCategory', memberFunction: (data) => data.ProductCategory, enabled: true, - childLevel:{ + childLevel: { memberName: 'Country', enabled: true, childLevel: { @@ -1588,7 +1592,7 @@ describe('Excel Exporter', () => { } } }], - fix.detectChanges(); + fix.detectChanges(); await wait(300); fix.detectChanges(); @@ -1608,29 +1612,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); diff --git a/projects/igniteui-angular/grids/core/src/state-base.directive.ts b/projects/igniteui-angular/grids/core/src/state-base.directive.ts index 0cba4f5798d..dc76a23ad2c 100644 --- a/projects/igniteui-angular/grids/core/src/state-base.directive.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxColumnComponent } from './columns/column.component'; import { IgxColumnGroupComponent } from './columns/column-group.component'; import { GridSelectionRange } from './common/types'; @@ -110,6 +110,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; @@ -488,15 +493,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/grids/core/src/state.directive.spec.ts b/projects/igniteui-angular/grids/core/src/state.directive.spec.ts index 2b2129b1ac1..a999f47eb9a 100644 --- a/projects/igniteui-angular/grids/core/src/state.directive.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.directive.spec.ts @@ -15,7 +15,7 @@ import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from '.. import { GridSelectionRange } from './common/types'; import { CustomFilter } from '../../../test-utils/grid-samples.spec'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; -import { IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridDetailTemplateDirective } from './public_api'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridDetailTemplateDirective, IgxGridMRLNavigationService } from './public_api'; import { IColumnState, IGridState } from './state-base.directive'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -27,6 +27,9 @@ describe('IgxGridState - input properties #grid', () => { IgxGridStateComponent, IgxGridStateWithOptionsComponent, IgxGridStateWithDetailsComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts index c942950a8c4..d103ac20d2e 100644 --- a/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts @@ -9,6 +9,7 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IColumnState, IGridState } from './state-base.directive'; import { FilteringExpressionsTree, FilteringLogic, IFilteringExpressionsTree, IGroupingExpression, IgxStringFilteringOperand, IPagingState, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxGridNavigationService } from './grid-navigation.service'; describe('IgxHierarchicalGridState - input properties #hGrid', () => { let fix; @@ -16,7 +17,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/grids/core/src/state.pivotgrid.spec.ts b/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts index 6faa79f516c..0d399eb6624 100644 --- a/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts @@ -8,13 +8,17 @@ import { IgxPivotNumericAggregate } from './pivot-grid-aggregate'; import { IPivotDimension, IPivotGridRecord } from './pivot-grid.interface'; import { IgxPivotRowDimensionHeaderComponent } from 'igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header.component'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; +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/grids/core/src/summaries/grid-root-summary.pipe.ts b/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts index ddb9dc99f2e..796b960c130 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts +++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/summary-cell.component.ts b/projects/igniteui-angular/grids/core/src/summaries/summary-cell.component.ts index 2d6e1e46b5b..beab0458b16 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 } from './grid-summary'; @@ -13,6 +13,8 @@ import { ColumnType, GridColumnDataType, IgxSummaryResult, trackByIdentity } fro imports: [NgTemplateOutlet] }) export class IgxSummaryCellComponent { + private element = inject(ElementRef); + @Input() public summaryResults: IgxSummaryResult[]; @@ -41,9 +43,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/grids/core/src/summaries/summary-row.component.ts b/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts index 3357855b7cd..963f721eb2b 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts +++ b/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts @@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, - Inject + inject } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; import { IgxSummaryCellComponent } from './summary-cell.component'; @@ -27,6 +27,10 @@ import { ColumnType, IgxSummaryResult, trackByIdentity } from 'igniteui-angular/ 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; @@ -69,10 +73,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/grids/core/src/toolbar/common.ts b/projects/igniteui-angular/grids/core/src/toolbar/common.ts index f1624f0c5e8..392cd6f2461 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/common.ts +++ b/projects/igniteui-angular/grids/core/src/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({ @@ -92,7 +92,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/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts index acc30498ba0..7de270b2214 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -29,6 +29,8 @@ import { IFilteringExpressionsTree, isTree, OverlaySettings } from 'igniteui-ang imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { + private toolbar = inject(IgxToolbarToken); + protected numberOfColumns: number; /** * Returns the grid containing this component. @@ -41,8 +43,6 @@ export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { @Input() public overlaySettings: OverlaySettings; - constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { } - /** * @hidden */ diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts index f52cf03c41b..910ac5054c9 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts @@ -1,9 +1,8 @@ -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, IgxPdfTextDirective } from './common'; import { GridType } from '../common/grid.interface'; -import { IgxToolbarToken } from './token'; import { IgxButtonDirective, IgxRippleDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { CsvFileTypes, IgxCsvExporterOptions } from '../services/csv/csv-exporter-options'; @@ -49,6 +48,9 @@ export interface IgxExporterEvent { imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective, IgxPdfTextDirective] }) export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { + private excelExporter = inject(IgxExcelExporterService); + private csvExporter = inject(IgxCsvExporterService); + private pdfExporter = inject(IgxPdfExporterService); /** * Show entry for CSV export. @@ -92,15 +94,6 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { */ protected isExporting = false; - constructor( - @Inject(IgxToolbarToken) toolbar: IgxToolbarToken, - private excelExporter: IgxExcelExporterService, - private csvExporter: IgxCsvExporterService, - private pdfExporter: IgxPdfExporterService, - ) { - super(toolbar); - } - protected exportClicked(type: 'excel' | 'csv' | 'pdf', toggleRef?: IgxToggleDirective) { toggleRef?.close(); this.export(type); diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts index 1eeeab32f8c..26963fa64e0 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/grids/core/src/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'; @@ -20,6 +20,8 @@ import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs */ @Directive() export abstract class BaseToolbarDirective implements OnDestroy { + protected toolbar = inject(IgxToolbarToken); + /** * Sets the height of the column list in the dropdown. */ @@ -106,8 +108,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/grids/core/src/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts index 5c8fabfc9f9..57ea58f5add 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/grids/core/src/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 { pinLeft, unpinLeft } from '@igniteui/material-icons-extended'; import { IgxGridToolbarActionsComponent } from './common'; @@ -41,6 +32,10 @@ import { IgxIconService } from 'igniteui-angular/icon'; 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', true); this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true); } diff --git a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts index 311a4aabfcd..46a12dbee2c 100644 --- a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts @@ -14,7 +14,7 @@ import { IgxTreeGridSelectionComponent } from '../../../test-utils/tree-grid-com import { IgxGridComponent } from './grid.component'; import { IgxHierarchicalRowComponent } from '../../hierarchical-grid/src/hierarchical-row.component'; import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; -import { GridCellMergeMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { GridCellMergeMode, IgxColumnComponent, IgxGridMRLNavigationService, IgxGridNavigationService } from 'igniteui-angular/grids/core'; describe('IgxGrid - Cell merging #grid', () => { let fix; @@ -28,6 +28,10 @@ describe('IgxGrid - Cell merging #grid', () => { imports: [ NoopAnimationsModule, DefaultCellMergeGridComponent, ColumnLayoutTestComponent, IgxHierarchicalGridTestBaseComponent, IgxTreeGridSelectionComponent + ], + providers: [ + IgxGridMRLNavigationService, + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts index 672fd112359..d14df770817 100644 --- a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts +++ b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts @@ -1,27 +1,22 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, ElementRef, - Inject, Input, - NgZone, OnInit, TemplateRef, ViewChild, - DOCUMENT + DOCUMENT, + inject } from '@angular/core'; import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; import { - GridType, - IGX_GRID_BASE, IgxColumnFormatterPipe, IgxGridCellComponent, IgxGridCellImageAltPipe, - IgxGridSelectionService, IgxStringReplacePipe } from 'igniteui-angular/grids/core'; -import { HammerGesturesManager, IgxOverlayService, PlatformUtil } from 'igniteui-angular/core'; +import { HammerGesturesManager } from 'igniteui-angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxDateTimeEditorDirective, IgxFocusDirective, IgxTextHighlightDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; @@ -39,6 +34,8 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; 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 */ @@ -63,18 +60,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/grids/grid/src/grid-add-row.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts index efd18044c55..bc3beb7bfeb 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts @@ -16,6 +16,7 @@ import { IgxGridRowComponent } from './grid-row.component'; import { takeUntil, first } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, TransactionType } from 'igniteui-angular/core'; +import { IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; const DEBOUNCETIME = 30; @@ -45,6 +46,9 @@ describe('IgxGrid - Row Adding #grid', () => { IgxGridRowEditingDefinedColumnsComponent, ColumnLayoutTestComponent, DefaultGridMasterDetailComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 28f3eca8d43..d3d3372bdb3 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/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 { areEqualArrays, @@ -134,6 +133,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. * @@ -3457,33 +3482,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/grids/grid/src/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts index 8a842c94980..0c8c636f9b1 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts @@ -17,7 +17,7 @@ import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { By } from '@angular/platform-browser'; import { IgxHGridRemoteOnDemandComponent, IgxHierarchicalGridMissingChildDataComponent } from '../../hierarchical-grid/src/hierarchical-grid.spec'; import { QueryBuilderFunctions } from '../../../query-builder/src/query-builder/query-builder-functions.spec'; -import { IFilteringEventArgs, IgxGridToolbarAdvancedFilteringComponent } from 'igniteui-angular/grids/core'; +import { IFilteringEventArgs, IgxGridNavigationService, IgxGridToolbarAdvancedFilteringComponent } from 'igniteui-angular/grids/core'; import { FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, IGridResourceStrings, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { QueryBuilderSelectors } from 'igniteui-angular/query-builder/src/query-builder/query-builder.common'; import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; @@ -38,6 +38,9 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridExportComponent, IgxHGridRemoteOnDemandComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts index dd8346c89c1..d7fb0c08c9e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts @@ -3407,6 +3407,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { expect(grid.pinnedColumns.length).toBe(1); expect(grid.pinnedColumns[0].field).toBe(columnToPin.field); + + tick(16); })); it('Should pin column when clicking buttons.', fakeAsync(() => { diff --git a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts index 4900e02fdfa..6514e85712d 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts @@ -10,7 +10,7 @@ import { ColumnGroupsNavigationTestComponent } from '../../../test-utils/grid-samples.spec'; import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; -import { GridSelectionMode, FilterMode } from 'igniteui-angular/grids/core'; +import { GridSelectionMode, FilterMode, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { IActiveNodeChangeEventArgs } from 'igniteui-angular/grids/core'; import { IgxGridHeaderRowComponent } from 'igniteui-angular/grids/core'; import { IgxStringFilteringOperand, ISortingStrategy, SortingDirection } from 'igniteui-angular/core'; @@ -26,6 +26,9 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { TestBed.configureTestingModule({ imports: [ SelectionWithScrollsComponent, NoopAnimationsModule + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); @@ -765,6 +768,9 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { TestBed.configureTestingModule({ imports: [ MRLTestComponent, NoopAnimationsModule + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts index 1a04faffc73..902c33ca6ff 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts @@ -8,7 +8,7 @@ import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-functions.spec'; -import { CellType, IGridCellEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { CellType, IGridCellEventArgs, IgxColumnComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; @@ -22,7 +22,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, ColumnLayoutTestComponent] + imports: [NoopAnimationsModule, ColumnLayoutTestComponent], + providers: [IgxGridMRLNavigationService] }).compileComponents(); })); @@ -1465,7 +1466,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(); @@ -1906,7 +1907,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'); @@ -2371,7 +2372,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/grids/grid/src/grid-row-pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts index e42dde9c637..cdbe0bf2861 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts @@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; -import { CellType, IgxColumnComponent, IgxGridDetailTemplateDirective, IPinningConfig, IPinRowEventArgs, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { CellType, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxGridMRLNavigationService, IPinningConfig, IPinRowEventArgs, RowPinningPosition } from 'igniteui-angular/grids/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; @@ -32,6 +32,9 @@ describe('Row Pinning #grid', () => { GridRowPinningWithMDVComponent, GridRowPinningWithTransactionsComponent, GridRowPinningWithInitialPinningComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 80778c11675..a5782e6034e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/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'; @@ -3228,6 +3225,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 = [ @@ -3241,8 +3240,6 @@ export class IgxGridTestComponent { public columnEventCount = 0; - constructor(public cdr: ChangeDetectorRef) { } - public columnCreated(column: IgxColumnComponent) { this.columnEventCount++; column.filterable = true; @@ -3618,10 +3615,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; } @@ -3661,13 +3660,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/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts index 69474e86d7c..64ceec9d441 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts @@ -1367,7 +1367,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, protected _setupNavigationService() { if (this.hasColumnLayouts) { - this.navigation = new IgxGridMRLNavigationService(this.platform); + this.navigation = this.injector.get(IgxGridMRLNavigationService); this.navigation.grid = this; } } diff --git a/projects/igniteui-angular/grids/grid/src/grid.details.pipe.ts b/projects/igniteui-angular/grids/grid/src/grid.details.pipe.ts index 80756207692..9271eb1b6ec 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.details.pipe.ts +++ b/projects/igniteui-angular/grids/grid/src/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 'igniteui-angular/grids/core'; /** @hidden */ @@ -7,8 +7,8 @@ import { GridType, IGX_GRID_BASE } from 'igniteui-angular/grids/core'; 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/grids/grid/src/grid.master-detail.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts index 5aa48048cca..3315c47d56c 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts @@ -8,7 +8,7 @@ import { IgxGridRowComponent } from './grid-row.component'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxGridExpandableCellComponent } from './expandable-cell.component'; -import { GridSummaryPosition, GridSelectionMode, CellType, IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-angular/grids/core'; +import { GridSummaryPosition, GridSelectionMode, CellType, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; import { GridSummaryCalculationMode, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; @@ -36,6 +36,9 @@ describe('IgxGrid Master Detail #grid', () => { DefaultGridMasterDetailComponent, AllExpandedGridMasterDetailComponent, MRLMasterDetailComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts index 382902b7c26..5295a492f6f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts @@ -4,7 +4,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { ViewChild, Component, DebugElement } from '@angular/core'; -import { IgxColumnLayoutComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxColumnLayoutComponent, IgxGridMRLNavigationService, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-functions.spec'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; @@ -35,6 +35,9 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { ColumnLayoutHidingTestComponent, ColumnLayoutGroupingTestComponent, ColumnLayoutResizingTestComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts index 98d06dc27fc..c3f0fe67f67 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts @@ -2,7 +2,7 @@ import { IgxGridComponent } from './grid.component'; import { Component, ViewChild } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; +import { IgxColumnLayoutComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { By } from '@angular/platform-browser'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { wait } from '../../../test-utils/ui-interactions.spec'; @@ -24,6 +24,9 @@ describe('IgxGrid - multi-row-layout #grid', () => { NoopAnimationsModule, ColumnLayoutTestComponent, ColumnLayoutAndGroupsTestComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })); @@ -677,7 +680,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/grids/grid/src/grid.pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts index de291a11ee9..889bf6ac4b3 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts @@ -1,7 +1,7 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { GridSelectionMode, IgxGridHeaderRowComponent, IPinningConfig } from 'igniteui-angular/grids/core'; +import { GridSelectionMode, IgxGridHeaderRowComponent, IgxGridMRLNavigationService, IPinningConfig } from 'igniteui-angular/grids/core'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { CELL_PINNED_CLASS, @@ -42,6 +42,9 @@ describe('IgxGrid - Column Pinning #grid', () => { MultiColumnHeadersWithGroupingComponent, GridPinningMRLComponent, PinOnBothSidesInitComponent + ], + providers: [ + IgxGridMRLNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/grids/grid/src/grid.pipes.ts b/projects/igniteui-angular/grids/grid/src/grid.pipes.ts index 607a3551125..c4766e872a7 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.pipes.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { inject, Pipe, PipeTransform } from '@angular/core'; import { IGridSortingStrategy, IGridGroupingStrategy, cloneArray, DataUtil, FilteringExpressionsTree, FilterUtil, IFilteringExpressionsTree, IFilteringStrategy, IGridMergeStrategy, IGroupByExpandState, IGroupingExpression, ISortingExpression, IGroupByResult, ColumnType, IMergeByResult } from 'igniteui-angular/core'; import { GridCellMergeMode, RowPinningPosition, GridType, IGX_GRID_BASE } from 'igniteui-angular/grids/core'; @@ -10,8 +10,7 @@ import { GridCellMergeMode, RowPinningPosition, GridType, IGX_GRID_BASE } from ' standalone: true }) export class IgxGridSortingPipe implements PipeTransform { - - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } + private grid = inject(IGX_GRID_BASE); public transform(collection: any[], sortExpressions: ISortingExpression[], groupExpressions: IGroupingExpression[], sorting: IGridSortingStrategy, id: string, pipeTrigger: number, pinned?): any[] { @@ -36,8 +35,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[], @@ -74,7 +73,7 @@ export class IgxGridGroupingPipe implements PipeTransform { }) export class IgxGridCellMergePipe implements PipeTransform { - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } + private grid = inject(IGX_GRID_BASE); public transform(collection: any, colsToMerge: ColumnType[], mergeMode: GridCellMergeMode, mergeStrategy: IGridMergeStrategy, _pipeTrigger: number) { if (colsToMerge.length === 0) { @@ -91,7 +90,7 @@ export class IgxGridCellMergePipe implements PipeTransform { }) export class IgxGridUnmergeActivePipe implements PipeTransform { - constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } + private grid = inject(IGX_GRID_BASE); public transform(collection: any, colsToMerge: ColumnType[], activeRowIndexes: number[], pinned: boolean, _pipeTrigger: number) { if (colsToMerge.length === 0) { @@ -165,8 +164,8 @@ export class IgxGridUnmergeActivePipe 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') { @@ -199,8 +198,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/grids/grid/src/grid.summary.pipe.ts b/projects/igniteui-angular/grids/grid/src/grid.summary.pipe.ts index 27466a13b9a..253b9a43976 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.summary.pipe.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.summary.pipe.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { GridSummaryPosition, GridType, IGX_GRID_BASE } from 'igniteui-angular/grids/core'; import { GridSummaryCalculationMode, IGroupByRecord, IGroupByResult, ISummaryRecord } from 'igniteui-angular/core'; @@ -11,8 +11,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/grids/grid/src/groupby-row.component.ts b/projects/igniteui-angular/grids/grid/src/groupby-row.component.ts index 20eee1d8601..825bea251bc 100644 --- a/projects/igniteui-angular/grids/grid/src/groupby-row.component.ts +++ b/projects/igniteui-angular/grids/grid/src/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'; import { Subject } from 'rxjs'; @@ -46,6 +34,12 @@ import { GridColumnDataType, IGroupByRecord } from 'igniteui-angular/core'; ] }) 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/grids/grid/src/row-drag.directive.spec.ts b/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts index 226ea57fab4..a1d179f31f4 100644 --- a/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts @@ -7,7 +7,7 @@ import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { DataParent, SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { IgxGridComponent } from './grid.component'; -import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxColumnComponent, IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { IgxDragIndicatorIconDirective, IgxRowDragDirective, IgxRowDragGhostDirective } from 'igniteui-angular/grids/core'; import { IRowDragStartEventArgs, IRowDragEndEventArgs } from 'igniteui-angular/grids/core'; import { IgxDropDirective } from 'igniteui-angular/directives'; @@ -952,6 +952,9 @@ describe('Row Drag Tests', () => { NoopAnimationsModule, IgxHierarchicalGridTestComponent, IgxHierarchicalGridCustomGhostTestComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-cell.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-cell.component.ts index 96563bd1272..82ac3c643d4 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-cell.component.ts @@ -1,12 +1,9 @@ -import { ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, Component, OnInit, NgZone, Inject } from '@angular/core'; -import { HammerGesturesManager, IgxOverlayService, PlatformUtil } from 'igniteui-angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { HammerGesturesManager } from 'igniteui-angular/core'; import { - GridType, - IGX_GRID_BASE, IgxColumnFormatterPipe, IgxGridCellComponent, IgxGridCellImageAltPipe, - IgxGridSelectionService, IgxStringReplacePipe } from 'igniteui-angular/grids/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -30,19 +27,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/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts index 536902e33b5..b1cc31bd3d0 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts @@ -5,6 +5,7 @@ import { IgxHierarchicalGridActionStripComponent } from '../../../test-utils/hie import { wait } from '../../../test-utils/ui-interactions.spec'; import { By } from '@angular/platform-browser'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; +import { IgxGridNavigationService } from 'igniteui-angular/grids/core'; 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/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts index 4278037a636..77c232cd8c9 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts @@ -1,38 +1,24 @@ 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 { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; import { IgxRowIslandComponent } from './row-island.component'; -import { IgxFilteringService, IgxGridValidationService } from 'igniteui-angular/grids/core'; import { IgxSummaryOperand } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service'; -import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; -import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; -import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; import { GridType, IGX_GRID_SERVICE_BASE } from 'igniteui-angular/grids/core'; import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { takeUntil } from 'rxjs/operators'; import { IgxGridTransaction } from 'igniteui-angular/grids/core'; -import { IgxFlatTransactionFactory, IgxOverlayService, IgxTransactionService, IPathSegment, PlatformUtil, State, Transaction, TransactionService } from 'igniteui-angular/core'; -import { IForOfState, IgxTextHighlightService } from 'igniteui-angular/directives'; +import { IgxTransactionService, IPathSegment } from 'igniteui-angular/core'; +import { IForOfState } from 'igniteui-angular/directives'; import { IgxGridBaseDirective } from 'igniteui-angular/grids/grid'; export const hierarchicalTransactionServiceFactory = () => new IgxTransactionService(); @@ -48,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. * @@ -146,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/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index 6c23986d6f6..11815766794 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -1,32 +1,9 @@ -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'; import { IgxRowIslandComponent } from './row-island.component'; -import { IgxFilteringService, IgxGridValidationService } from 'igniteui-angular/grids/core'; +import { IgxFilteringService, IgxGridNavigationService, IgxGridValidationService } from 'igniteui-angular/grids/core'; import { IgxColumnComponent, } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service'; import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; @@ -72,6 +49,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; @@ -179,11 +160,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 */ @@ -302,6 +278,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent }, IgxGridSummaryService, IgxFilteringService, + IgxGridNavigationService, IgxHierarchicalGridNavigationService, IgxColumnResizingService, IgxForOfSyncService, diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts index 0dc2959d226..cc973c6df89 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts @@ -3,7 +3,7 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; -import { IgxColumnMovingDragDirective } from 'igniteui-angular/grids/core'; +import { IgxColumnMovingDragDirective, IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { take } from 'rxjs/operators'; import { @@ -40,6 +40,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { IgxHierarchicalGridWithTransactionProviderComponent, IgxHierarchicalGridTestInputPaginatorComponent, IgxHierarchicalGridTestInputToolbarComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts index ac4b02dbb2e..e9b7ef3f5cc 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts @@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser'; import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; -import { IGridCellEventArgs, IgxColumnComponent, IgxGridCellComponent } from 'igniteui-angular/grids/core'; +import { IGridCellEventArgs, IgxColumnComponent, IgxGridCellComponent, IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { IPathSegment } from 'igniteui-angular/core'; const DEBOUNCE_TIME = 50; @@ -29,6 +29,9 @@ describe('IgxHierarchicalGrid Navigation', () => { IgxHierarchicalGridTestComplexComponent, IgxHierarchicalGridMultiLayoutComponent, IgxHierarchicalGridSmallerChildComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout * 2; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.pipes.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.pipes.ts index 553bd1ba77c..096d0bbc8ec 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.pipes.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.pipes.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 'igniteui-angular/grids/core'; import { cloneArray, columnFieldPath, DataUtil, resolveNestedPath } from 'igniteui-angular/core'; @@ -10,8 +10,7 @@ import { cloneArray, columnFieldPath, DataUtil, resolveNestedPath } from 'ignite 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, @@ -62,8 +61,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/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts index 39e0edeb28b..7291eab9e8c 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts @@ -12,7 +12,7 @@ import { IgxHierGridExternalAdvancedFilteringComponent } from '../../../test-utils/hierarchical-grid-components.spec'; import { GridSelectionFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec'; -import { CellType, GridSelectionMode } from 'igniteui-angular/grids/core'; +import { CellType, GridSelectionMode, IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { QueryList } from '@angular/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; @@ -35,6 +35,9 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { IgxHierarchicalGridCustomSelectorsComponent, IgxHierarchicalGridRowSelectionNoTransactionsComponent, IgxHierGridExternalAdvancedFilteringComponent, + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts index feb0af9e32a..0bfe2bcab69 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts @@ -1,12 +1,12 @@ import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -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'; import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { By } from '@angular/platform-browser'; -import { CellType, GridSelectionMode, IGridCellEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowEditActionsDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective } from 'igniteui-angular/grids/core'; +import { CellType, GridSelectionMode, IGridCellEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridNavigationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowEditActionsDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective } from 'igniteui-angular/grids/core'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxGridCellComponent } from 'igniteui-angular/grids/core'; import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from 'igniteui-angular/grids/core'; @@ -38,6 +38,9 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { IgxHierarchicalGridCustomFilteringTemplateComponent, IgxHierarchicalGridToggleRIAndColsComponent, IgxHierarchicalGridMCHComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })) @@ -54,9 +57,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; @@ -126,7 +129,7 @@ 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]; @@ -170,7 +173,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); @@ -194,7 +197,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]; @@ -388,7 +391,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); @@ -410,13 +413,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; @@ -424,20 +427,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; @@ -447,7 +450,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); @@ -483,7 +486,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); @@ -548,7 +551,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); @@ -563,8 +566,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; @@ -584,8 +587,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; @@ -622,7 +625,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; @@ -706,11 +709,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: [ @@ -755,7 +758,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'); }); @@ -771,7 +774,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 @@ -780,8 +783,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); }); @@ -824,7 +827,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 @@ -852,7 +855,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 @@ -900,7 +903,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; @@ -935,15 +938,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: [ @@ -972,7 +975,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); @@ -990,33 +993,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' + } ] } } @@ -1028,7 +1031,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); @@ -1052,7 +1055,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 @@ -1087,7 +1090,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(); @@ -1162,7 +1165,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; @@ -1184,7 +1187,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; @@ -1207,7 +1210,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; @@ -1230,7 +1233,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; @@ -1260,7 +1263,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; @@ -1388,7 +1391,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')); @@ -1403,7 +1406,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')); @@ -1418,7 +1421,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']; @@ -1444,14 +1447,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')); @@ -1492,14 +1495,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')); @@ -1542,7 +1545,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); @@ -1854,21 +1857,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'); } @@ -2001,18 +2004,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 = []; } } @@ -2059,6 +2063,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; @@ -2070,16 +2076,15 @@ export class IgxHGridRemoteOnDemandComponent { public data; - constructor(public cdr: ChangeDetectorRef) { } - public generateDataUneven(count: number, level: number, parendID: string = null) { const prods = []; const currLevel = level; 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; } @@ -2126,14 +2131,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 cols2 = ['ID', 'ProductName', 'Col1']; public parentCols = []; public islandCols1 = []; public islandCols2 = []; - constructor(public cdr: ChangeDetectorRef) { - super(); - } public ngAfterViewInit() { this.islandCols1 = this.cols1; @@ -2192,10 +2196,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({ @@ -2215,7 +2219,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; } @@ -2247,7 +2251,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: ` @@ -2308,7 +2312,7 @@ export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalG IgxHeaderCollapsedIndicatorDirective ] }) -export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} +export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` @@ -2336,15 +2340,14 @@ 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(); } - public hideColumn(col: ColumnType){ + public hideColumn(col: ColumnType) { col.hidden = true; } } @@ -2371,7 +2374,7 @@ export class IgxHierarchicalGridHidingPinningColumnsComponent extends IgxHierarc `, imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective] }) -export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarchicalGridTestBaseComponent{} +export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarchicalGridTestBaseComponent { } @Component({ template: ` @@ -2395,7 +2398,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/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts index a48ef6a721d..59dab92f738 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts @@ -13,6 +13,7 @@ import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { IgxHierarchicalGridDefaultComponent } from '../../../test-utils/hierarchical-grid-components.spec'; import { firstValueFrom } from 'rxjs'; import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxGridNavigationService } from 'igniteui-angular/grids/core'; describe('IgxHierarchicalGrid Virtualization #hGrid', () => { let fixture; @@ -24,6 +25,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridDefaultComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -444,6 +448,9 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridNoScrollTestComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts index 8b3bb356ebf..bcda1fed647 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts @@ -3,53 +3,38 @@ import { 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 + inject } from '@angular/core'; -import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; import { GridType, - IGX_GRID_SERVICE_BASE, IgxColumnComponent, - IgxColumnResizingService, IgxFilteringService, IgxGridPaginatorTemplateContext, IgxGridSelectionService, - IgxGridSummaryService, IgxGridToolbarDirective, IgxGridToolbarTemplateContext, - IgxGridValidationService, ISearchInfo } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive'; -import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service'; -import { IgxActionStripToken, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil } from 'igniteui-angular/core'; +import { IgxActionStripToken } from 'igniteui-angular/core'; import { first, filter, takeUntil, pluck } from 'rxjs/operators'; import { IgxRowIslandAPIService } from './row-island-api.service'; import { IGridCreatedEventArgs } from './events'; import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; -import { IForOfState, IgxTextHighlightService } from 'igniteui-angular/directives'; +import { IForOfState } from 'igniteui-angular/directives'; /* blazorCopyInheritedMembers */ /* blazorElement */ @@ -84,6 +69,8 @@ import { IForOfState, IgxTextHighlightService } from 'igniteui-angular/directive }) export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy { + public rowIslandAPI = inject(IgxRowIslandAPIService); + /* blazorSuppress */ /** @@ -372,52 +359,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/grids/pivot-grid/src/pivot-data-selector.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts index dd7983892be..a8a6307ea64 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/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 { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes"; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; @@ -63,6 +54,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 @@ -250,8 +244,6 @@ export class IgxPivotDataSelectorComponent { return this._grid?.pivotConfiguration.values || []; } - constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) { } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts index 5068aa65836..e5d1ac8f61b 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts @@ -9,6 +9,7 @@ import { IgxPivotGridTestBaseComponent } from "../../../test-utils/pivot-grid-sa import { UIInteractions, wait } from "../../../test-utils/ui-interactions.spec"; import { IgxPivotDataSelectorComponent } from "./pivot-data-selector.component"; import { + IgxGridNavigationService, IPivotDimension, IPivotValue, PivotDimensionType, @@ -46,6 +47,9 @@ describe("Pivot data selector integration", () => { imports: [ NoopAnimationsModule, IgxPivotGridTestBaseComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts index a3c3e9a4367..b3a85254b9b 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts @@ -8,7 +8,7 @@ import { IgxPivotGridComponent } from './pivot-grid.component'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; import { DebugElement } from '@angular/core'; import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; -import { PivotRowLayoutType } from 'igniteui-angular/grids/core'; +import { IgxGridNavigationService, PivotRowLayoutType } from 'igniteui-angular/grids/core'; const DEBOUNCE_TIME = 250; const PIVOT_TBODY_CSS_CLASS = '.igx-grid__tbody'; @@ -31,6 +31,9 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { imports: [ NoopAnimationsModule, IgxPivotGridMultipleRowComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); @@ -344,6 +347,9 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { imports: [ NoopAnimationsModule, IgxPivotGridTestBaseComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index c91fa2f1184..605f65c14d0 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -1,39 +1,8 @@ -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'; -import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core'; +import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core'; import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core'; import { IgxGridCRUDService } from 'igniteui-angular/grids/core'; @@ -43,7 +12,7 @@ import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { FilterMode, GridPagingMode, GridSummaryPosition } from 'igniteui-angular/grids/core'; import { WatchChanges } from 'igniteui-angular/grids/core'; -import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, PlatformUtil, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { IGridEditEventArgs, ICellPosition, @@ -64,9 +33,8 @@ import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from 'i import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core'; -import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from 'igniteui-angular/core'; +import { State, Transaction, TransactionService } from 'igniteui-angular/core'; import { IgxPivotFilteringService } from './pivot-filtering.service'; -import { IgxGridTransaction } from 'igniteui-angular/grids/core'; import { GridBaseAPIService } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; import { IgxPivotGridColumnResizerComponent } from 'igniteui-angular/grids/core'; @@ -82,7 +50,7 @@ import { IgxGridBodyDirective } from 'igniteui-angular/grids/core'; import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; -import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxTextHighlightService, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -140,6 +108,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; { provide: IGX_GRID_SERVICE_BASE, useClass: GridBaseAPIService }, { provide: IGX_GRID_BASE, useExisting: IgxPivotGridComponent }, { provide: IgxFilteringService, useClass: IgxPivotFilteringService }, + IgxGridNavigationService, IgxPivotGridNavigationService, IgxPivotColumnResizingService, IgxForOfSyncService, @@ -184,6 +153,9 @@ 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); + protected override colResizingService = inject(IgxPivotColumnResizingService); /** * Emitted when the dimension collection is changed via the grid chip area. @@ -999,53 +971,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/grids/pivot-grid/src/pivot-grid.directives.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.directives.ts index 35a854f298f..88d4367f4e9 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.directives.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.directives.ts @@ -1,4 +1,4 @@ -import { Directive, TemplateRef } from '@angular/core'; +import { Directive, TemplateRef, inject } from '@angular/core'; import { IgxColumnTemplateContext, IgxPivotGridValueTemplateContext } from 'igniteui-angular/grids/core'; /** * @hidden @@ -8,7 +8,8 @@ import { IgxColumnTemplateContext, IgxPivotGridValueTemplateContext } from 'igni 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; @@ -23,7 +24,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/grids/pivot-grid/src/pivot-grid.pipes.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.spec.ts index 282829abe18..31fda83a400 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.spec.ts @@ -1,8 +1,9 @@ -import { IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IPivotConfiguration, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; +import { IGX_GRID_BASE, IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IPivotConfiguration, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; import { IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotRowExpansionPipe, IgxPivotRowPipe } from './pivot-grid.pipes'; import { PivotGridFunctions } from '../../../test-utils/pivot-grid-functions.spec'; import { DATA } from 'src/app/shared/pivot-data'; import { DefaultDataCloneStrategy, IDataCloneStrategy } from 'igniteui-angular/core'; +import { TestBed } from '@angular/core/testing'; describe('Pivot pipes #pivotGrid', () => { let rowPipe: IgxPivotRowPipe; @@ -15,6 +16,8 @@ describe('Pivot pipes #pivotGrid', () => { let cloneStrategy: IDataCloneStrategy; beforeEach(() => { + + data = [ { ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', @@ -62,9 +65,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(); @@ -645,7 +656,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'); @@ -743,7 +754,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/grids/pivot-grid/src/pivot-grid.pipes.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.ts index 3cf7aa3af20..95c14a58183 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.pipes.ts @@ -1,4 +1,4 @@ -import { Inject, Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { DEFAULT_PIVOT_KEYS, DimensionValuesFilteringStrategy, @@ -32,8 +32,8 @@ import { DefaultPivotGridRecordSortingStrategy } from './pivot-sort-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, @@ -136,8 +136,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[], @@ -193,7 +193,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, @@ -246,7 +247,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, @@ -286,7 +288,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, @@ -400,7 +403,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, @@ -464,7 +468,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/grids/pivot-grid/src/pivot-grid.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts index 6382234e884..9202231dc96 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts @@ -5,7 +5,7 @@ import { FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxString import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { DefaultPivotSortingStrategy } from 'igniteui-angular/grids/pivot-grid'; -import { DimensionValuesFilteringStrategy, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; +import { DimensionValuesFilteringStrategy, IgxGridNavigationService, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; import { PivotGridFunctions } from '../../../test-utils/pivot-grid-functions.spec'; import { IgxPivotGridFlexContainerComponent, IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../../test-utils/pivot-grid-samples.spec'; @@ -35,6 +35,9 @@ describe('IgxPivotGrid #pivotGrid', () => { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxPivotGridFlexContainerComponent + ], + providers: [ + IgxGridNavigationService ] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-header-row.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-header-row.component.ts index 610e8ed5690..9794230d230 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-header-row.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-header-row.component.ts @@ -1,16 +1,14 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ElementRef, - Inject, OnChanges, QueryList, Renderer2, ViewChild, SimpleChanges, ViewChildren, - HostBinding + HostBinding, + inject } from '@angular/core'; import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; @@ -62,6 +60,9 @@ import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigati 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; @@ -154,15 +155,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem return super.activeDescendant; } - 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/grids/pivot-grid/src/pivot-row-dimension-content.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts index cac553b4df7..5abfa05e44b 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, createComponent, - ElementRef, EnvironmentInjector, HostBinding, - Inject, + inject, Injector, Input, OnChanges, @@ -49,6 +47,11 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; imports: [IgxPivotRowDimensionHeaderGroupComponent, NgClass, NgStyle, IgxIconComponent, 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}` : ""; @@ -110,17 +113,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/grids/pivot-grid/src/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.ts index 091e96e3d3e..fda18cb8240 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, NgZone, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, HostListener, inject, Input, NgZone, ViewChild } from '@angular/core'; import { NgClass, NgStyle } from '@angular/common'; import { @@ -6,7 +6,6 @@ import { IgxColumnComponent, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, - IgxFilteringService, IgxGridHeaderGroupComponent, IgxHeaderGroupStylePipe, IgxPivotColumnResizingService, @@ -18,7 +17,6 @@ import { } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { PlatformUtil } from 'igniteui-angular/core'; /** * @hidden @@ -30,6 +28,9 @@ import { PlatformUtil } from 'igniteui-angular/core'; 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 @@ -44,16 +45,6 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup return 'rowheader'; } - 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/grids/pivot-grid/src/pivot-row-dimension-header.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header.component.ts index c9c010939b1..89c27579e5a 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/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, PivotRowLayoutType, PivotUtil } from 'igniteui-angular/grids/core'; +import { PivotGridType, PivotRowLayoutType, PivotUtil } from 'igniteui-angular/grids/core'; import { IgxGridHeaderComponent } from 'igniteui-angular/grids/core'; import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core'; @@ -20,15 +20,13 @@ import { ISortingExpression, SortingDirection } from 'igniteui-angular/core'; 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 diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-mrl-row.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-mrl-row.component.ts index 41805922139..91ba907da94 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-mrl-row.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-mrl-row.component.ts @@ -1,11 +1,9 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ElementRef, EnvironmentInjector, HostBinding, - Inject, + inject, Injector, Input, QueryList, @@ -32,6 +30,11 @@ import { IgxPivotGridHorizontalRowCellMerging } from './pivot-grid.pipes'; 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); + @ViewChildren(IgxPivotRowDimensionContentComponent) public rowDimensionContentCollection: QueryList; @@ -75,17 +78,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/grids/pivot-grid/src/pivot-row-header-group.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-header-group.component.ts index f90ca10d982..5dfcef45b9f 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-header-group.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-header-group.component.ts @@ -1,10 +1,9 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, ViewChild } from '@angular/core'; import { NgClass, NgStyle } from '@angular/common'; import { IGX_GRID_BASE, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, - IgxFilteringService, IgxGridHeaderGroupComponent, IgxHeaderGroupStylePipe, IgxPivotColumnResizingService, @@ -15,7 +14,7 @@ import { } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { PlatformUtil, SortingDirection } from 'igniteui-angular/core'; +import { SortingDirection } from 'igniteui-angular/core'; /** * @hidden @@ -27,6 +26,8 @@ import { PlatformUtil, SortingDirection } from 'igniteui-angular/core'; 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 @@ -41,16 +42,6 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent return 'columnheader'; } - 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/grids/pivot-grid/src/pivot-row.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row.component.ts index 427f69d4634..71ca5a240a5 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row.component.ts @@ -1,10 +1,8 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ElementRef, forwardRef, - HostBinding, Inject, Input, ViewContainerRef + HostBinding, inject, Input, ViewContainerRef } from '@angular/core'; import { NgClass, NgStyle } from '@angular/common'; import { @@ -13,7 +11,6 @@ import { IgxGridCellComponent, IgxGridCellStylesPipe, IgxGridNotGroupedPipe, - IgxGridSelectionService, IgxGridTransactionStatePipe, IgxRowDirective, IPivotGridColumn, @@ -33,6 +30,9 @@ import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe] }) export class IgxPivotRowComponent extends IgxRowDirective { + public override grid = inject(IGX_GRID_BASE); + protected viewRef = inject(ViewContainerRef); + /** * @hidden */ @@ -49,16 +49,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/grids/tree-grid/src/tree-grid-group-by-area.component.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts index dcf5c231339..f7a9ea6a6de 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts @@ -1,13 +1,4 @@ -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, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; @@ -15,7 +6,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxDropDirective } from 'igniteui-angular/directives'; -import { IGroupingExpression, ISortingExpression, PlatformUtil } from 'igniteui-angular/core'; +import { IGroupingExpression, ISortingExpression } from 'igniteui-angular/core'; import { IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe } from 'igniteui-angular/grids/core'; /** @@ -30,6 +21,8 @@ import { IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe 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; @@ -47,10 +40,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/grids/tree-grid/src/tree-grid.component.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts index 2d1890a5e31..f286ead0214 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts @@ -1,36 +1,10 @@ -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'; import { IgxGridBaseDirective, IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid'; import { CellType, GridSelectionMode, - GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, @@ -67,12 +41,12 @@ import { import { first, takeUntil } from 'rxjs/operators'; import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'; import { IgxTreeGridSelectionService } from './tree-grid-selection.service'; -import { DefaultTreeGridMergeStrategy, HierarchicalState, HierarchicalTransaction, HierarchicalTransactionService, IGridMergeStrategy, IgxHierarchicalTransactionFactory, IgxOverlayOutletDirective, IgxOverlayService, ITreeGridRecord, mergeObjects, PlatformUtil, StateUpdateEvent, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy } from 'igniteui-angular/core'; +import { DefaultTreeGridMergeStrategy, HierarchicalState, HierarchicalTransaction, HierarchicalTransactionService, IGridMergeStrategy, IgxHierarchicalTransactionFactory, IgxOverlayOutletDirective, ITreeGridRecord, mergeObjects, StateUpdateEvent, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy } from 'igniteui-angular/core'; import { IgxTreeGridSummaryPipe } from './tree-grid.summary.pipe'; import { IgxTreeGridFilteringPipe } from './tree-grid.filtering.pipe'; import { IgxTreeGridHierarchizingPipe, IgxTreeGridFlatteningPipe, IgxTreeGridSortingPipe, IgxTreeGridPagingPipe, IgxTreeGridTransactionPipe, IgxTreeGridNormalizeRecordsPipe, IgxTreeGridAddRowPipe } from './tree-grid.pipes'; import { IgxTreeGridRowComponent } from './tree-grid-row.component'; -import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxTemplateOutletDirective, IgxTextHighlightService, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -171,6 +145,9 @@ 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, }); + protected override transactionFactory = inject(IgxHierarchicalTransactionFactory); + /** * Sets the child data key of the `IgxTreeGridComponent`. * ```html @@ -351,7 +328,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 @@ -365,7 +342,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 || []; @@ -446,56 +423,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/grids/tree-grid/src/tree-grid.directives.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.directives.ts index e66ffb45905..df9876f6e4a 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.directives.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/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/grids/tree-grid/src/tree-grid.filtering.pipe.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.filtering.pipe.ts index 7613f0a0751..dadfee31389 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.filtering.pipe.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.filtering.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 'igniteui-angular/grids/core'; import { FilteringExpressionsTree, IFilteringExpressionsTree, IFilteringState, IFilteringStrategy, ITreeGridRecord, TreeGridFilteringStrategy } from 'igniteui-angular/core'; @@ -8,8 +8,8 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree, IFilteringState, I 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/grids/tree-grid/src/tree-grid.pipes.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.pipes.ts index e29105a7c8b..5ecda9dff6f 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.pipes.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.pipes.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 'igniteui-angular/grids/core'; import { cloneArray, cloneHierarchicalArray, DataUtil, IGroupingExpression, ISortingExpression, TransactionType, IGridSortingStrategy, ITreeGridRecord } from 'igniteui-angular/core'; import { IgxAddRow } from 'igniteui-angular/grids/core'; @@ -11,8 +11,8 @@ import { IgxAddRow } from 'igniteui-angular/grids/core'; 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[] = []; @@ -142,8 +142,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[] { @@ -194,8 +194,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[], @@ -236,8 +236,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') { @@ -265,10 +265,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) { @@ -312,8 +311,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; @@ -335,8 +334,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/grids/tree-grid/src/tree-grid.summary.pipe.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.summary.pipe.ts index b315dd1b2e7..dd7e48de22e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.summary.pipe.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.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, GridSummaryPosition } from 'igniteui-angular/grids/core'; import { GridSummaryCalculationMode, ISummaryRecord, ITreeGridRecord } from 'igniteui-angular/core'; @@ -8,8 +8,8 @@ import { GridSummaryCalculationMode, ISummaryRecord, ITreeGridRecord } from 'ign 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/icon/src/icon/icon.component.ts b/projects/igniteui-angular/icon/src/icon/icon.component.ts index f6c3677d1a8..bc1ddca7ee6 100644 --- a/projects/igniteui-angular/icon/src/icon/icon.component.ts +++ b/projects/igniteui-angular/icon/src/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(); @@ -121,11 +115,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/icon/src/icon/icon.service.spec.ts b/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts index 4ba9117fd69..08ee0e27266 100644 --- a/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/icon/src/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/icon/src/icon/icon.service.ts b/projects/igniteui-angular/icon/src/icon/icon.service.ts index 4ec5b49f193..1371da2a988 100644 --- a/projects/igniteui-angular/icon/src/icon/icon.service.ts +++ b/projects/igniteui-angular/icon/src/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"; @@ -37,6 +37,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. @@ -58,14 +65,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/input-group/src/input-group/directives-input/input.directive.spec.ts b/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.spec.ts index 681a68bc540..7d82af8c502 100644 --- a/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.spec.ts +++ b/projects/igniteui-angular/input-group/src/input-group/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'; @@ -1188,6 +1188,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({ @@ -1200,8 +1202,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) { @@ -1274,7 +1274,9 @@ class InputReactiveFormComponent { fullName: [Validators.required] }; - constructor(fb: UntypedFormBuilder) { + constructor() { + const fb = inject(UntypedFormBuilder); + this.reactiveForm = fb.group({ fullName: new UntypedFormControl('', Validators.required) }); @@ -1339,7 +1341,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/input-group/src/input-group/directives-input/input.directive.ts b/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts index 7af7fb40501..cb846b104a6 100644 --- a/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts +++ b/projects/igniteui-angular/input-group/src/input-group/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, @@ -65,6 +51,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`. @@ -105,18 +98,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/input-group/src/input-group/input-group.component.spec.ts b/projects/igniteui-angular/input-group/src/input-group/input-group.component.spec.ts index 7064de1d16b..a190d14c8f5 100644 --- a/projects/igniteui-angular/input-group/src/input-group/input-group.component.spec.ts +++ b/projects/igniteui-angular/input-group/src/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'; @@ -251,13 +251,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/input-group/src/input-group/input-group.component.ts b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts index f65402854e6..29f4a17ee91 100644 --- a/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts +++ b/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts @@ -7,8 +7,8 @@ import { DestroyRef, ElementRef, HostBinding, - HostListener, Inject, Input, - Optional, QueryList, booleanAttribute, + HostListener, Input, + QueryList, booleanAttribute, inject, DOCUMENT, AfterContentChecked @@ -37,6 +37,13 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked { + 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. @@ -219,18 +226,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh 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/list/src/list/list-item.component.ts b/projects/igniteui-angular/list/src/list/list-item.component.ts index a7cfa7e0c59..2616f6c47b8 100644 --- a/projects/igniteui-angular/list/src/list/list-item.component.ts +++ b/projects/igniteui-angular/list/src/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/list/src/list/list.common.ts b/projects/igniteui-angular/list/src/list/list.common.ts index 4ca623f5cfe..e49d9305171 100644 --- a/projects/igniteui-angular/list/src/list/list.common.ts +++ b/projects/igniteui-angular/list/src/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/list/src/list/list.component.ts b/projects/igniteui-angular/list/src/list/list.component.ts index ed052db4f59..20a36bb0631 100644 --- a/projects/igniteui-angular/list/src/list/list.component.ts +++ b/projects/igniteui-angular/list/src/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/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts index 69b3ef118ff..6361e9eaa1e 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts @@ -1,9 +1,9 @@ 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, PlatformUtil } from 'igniteui-angular/core'; +import { HammerGesturesManager, IgxNavigationService } from 'igniteui-angular/core'; import { IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @@ -20,6 +20,12 @@ describe('Navigation Drawer', () => { TestComponentMiniComponent, TestComponent, TestComponentDIComponent + ], + providers: [ + IgxNavigationDrawerComponent, + { provide: ElementRef, useValue: null }, + Renderer2, + HammerGesturesManager ] }).compileComponents(); @@ -578,8 +584,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/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts index e8f3e19ab25..caab69a8c45 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/navigation-drawer/src/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 'igniteui-angular/core'; @@ -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/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts index cbfd05a8b12..373f15cb487 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts +++ b/projects/igniteui-angular/navigation-drawer/src/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/paginator/src/paginator/paginator-interfaces.ts b/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts index 3130db4b2ed..e3f63cad8c6 100644 --- a/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts +++ b/projects/igniteui-angular/paginator/src/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 'igniteui-angular/core'; 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/paginator/src/paginator/paginator.component.ts b/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts index 795d2c6ed96..99ba65cf416 100644 --- a/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts +++ b/projects/igniteui-angular/paginator/src/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, @@ -48,6 +48,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 @@ -261,8 +264,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 @@ -360,14 +361,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) { } } @@ -377,6 +378,8 @@ export class IgxPageSizeSelectorComponent { imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective] }) export class IgxPageNavigationComponent { + public paginator = inject(IgxPaginatorComponent, { host: true }); + /** * @internal * @hidden @@ -390,8 +393,4 @@ export class IgxPageNavigationComponent { @HostBinding('attr.role') @Input() public role = 'navigation'; - - constructor( - @Host() - public paginator: IgxPaginatorComponent) { } } diff --git a/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts b/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts index 3776d5a9eb9..cf7b1666a44 100644 --- a/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts +++ b/projects/igniteui-angular/progressbar/src/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/progressbar/src/progressbar/progressbar.component.ts b/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts index 4d6d5f9bfd0..18aad18850c 100644 --- a/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts +++ b/projects/igniteui-angular/progressbar/src/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/query-builder/src/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts index f6d6d0cb1e9..0785ee0018b 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/query-builder/src/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'; @@ -125,6 +119,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 */ @@ -560,11 +560,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/query-builder/src/query-builder/query-builder.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts index 3553d599000..d654e3008f1 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/query-builder/src/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'; @@ -35,6 +35,8 @@ import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.dir imports: [IgxQueryBuilderTreeComponent] }) export class IgxQueryBuilderComponent implements OnDestroy { + protected iconService = inject(IgxIconService); + /** * @hidden @internal */ @@ -216,7 +218,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/query-builder/src/query-builder/query-builder.directives.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts index c2cf0ea7ce9..4dd8201850c 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts +++ b/projects/igniteui-angular/query-builder/src/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/radio/src/radio/radio-group/radio-group.directive.spec.ts b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts index 8da1fda9ef5..9767c6ab702 100644 --- a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ComponentRef, OnInit, ViewChild, ViewContainerRef, 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'; @@ -817,6 +817,8 @@ class RadioGroupWithModelComponent { imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupReactiveFormsComponent { + private _formBuilder = inject(UntypedFormBuilder); + public seasons = [ 'Winter', 'Spring', @@ -828,7 +830,7 @@ class RadioGroupReactiveFormsComponent { public model: Person = { name: 'Kirk', favoriteSeason: this.seasons[1] }; public personForm: UntypedFormGroup; - constructor(private _formBuilder: UntypedFormBuilder) { + constructor() { this._createForm(); } @@ -871,6 +873,8 @@ class RadioGroupReactiveFormsComponent { imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupDeepProjectionComponent { + private _builder = inject(UntypedFormBuilder); + @ViewChild(IgxRadioGroupDirective, { static: true }) public radioGroup: IgxRadioGroupDirective; @@ -878,7 +882,7 @@ class RadioGroupDeepProjectionComponent { public choices = [0, 1, 2]; public group1: UntypedFormGroup; - constructor(private _builder: UntypedFormBuilder) { + constructor() { this._createForm(); } diff --git a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts index 3c034a3becb..1c85a6b50f8 100644 --- a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts +++ b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts @@ -7,13 +7,12 @@ import { HostListener, Input, OnDestroy, - Optional, Output, QueryList, - Self, booleanAttribute, effect, - signal + signal, + inject } from '@angular/core'; import { ControlValueAccessor, NgControl, Validators } from '@angular/forms'; import { fromEvent, noop, Subject, takeUntil } from 'rxjs'; @@ -60,6 +59,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 = signal([]); private _radioButtonsList = new QueryList(); @@ -480,11 +483,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/radio/src/radio/radio.component.spec.ts b/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts index d341eb73794..cd8447ce251 100644 --- a/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts +++ b/projects/igniteui-angular/radio/src/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/select/src/select/select-navigation.directive.ts b/projects/igniteui-angular/select/src/select/select-navigation.directive.ts index 38898ebb3c2..cb32883cdb1 100644 --- a/projects/igniteui-angular/select/src/select/select-navigation.directive.ts +++ b/projects/igniteui-angular/select/src/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/select/src/select/select.component.spec.ts b/projects/igniteui-angular/select/src/select/select.component.spec.ts index c1d5c89da81..d0ee4095bc1 100644 --- a/projects/igniteui-angular/select/src/select/select.component.spec.ts +++ b/projects/igniteui-angular/select/src/select/select.component.spec.ts @@ -1,15 +1,15 @@ -import { Component, ViewChild, DebugElement, OnInit, ElementRef } 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'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxDropDownItemComponent, ISelectionEventArgs } from '../../../drop-down/src/drop-down/public_api'; +import { IGX_DROPDOWN_BASE, IgxDropDownItemComponent, ISelectionEventArgs } from '../../../drop-down/src/drop-down/public_api'; import { IgxHintDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api'; import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective } from './select.component'; import { IgxSelectItemComponent } from './select-item.component'; -import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from 'igniteui-angular/core'; +import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, IgxSelectionAPIService } from 'igniteui-angular/core'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -2658,8 +2658,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); @@ -2678,7 +2692,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])); @@ -2943,7 +2957,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/select/src/select/select.component.ts b/projects/igniteui-angular/select/src/select/select.component.ts index a5c60e03c6a..ef1ea836949 100644 --- a/projects/igniteui-angular/select/src/select/select.component.ts +++ b/projects/igniteui-angular/select/src/select/select.component.ts @@ -1,30 +1,4 @@ -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'; @@ -32,7 +6,6 @@ import { takeUntil } from 'rxjs/operators'; import { EditorProvider, - IgxSelectionAPIService, IBaseCancelableBrowserEventArgs, IBaseEventArgs, AbsoluteScrollStrategy, @@ -104,6 +77,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; @@ -339,18 +316,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/simple-combo/src/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts index be0eeb1a611..1030bcc7ab5 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts @@ -1,10 +1,10 @@ import { AsyncPipe } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, DebugElement, OnDestroy, OnInit, ViewChild } 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'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxSelectionAPIService } from 'igniteui-angular/core'; +import { IgxSelectionAPIService, PlatformUtil } from 'igniteui-angular/core'; import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxInputState, IgxLabelDirective } from '../../../input-group/src/public_api'; @@ -12,7 +12,7 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrat import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from './public_api'; import { IGX_GRID_DIRECTIVES, IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IComboSelectionChangingEventArgs, IgxComboDropDownComponent, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective, IgxComboToggleIconDirective } from 'igniteui-angular/combo'; +import { IComboSelectionChangingEventArgs, IgxComboAPIService, IgxComboDropDownComponent, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective, IgxComboToggleIconDirective } from 'igniteui-angular/combo'; import { RemoteDataService } from 'igniteui-angular/combo/src/combo/combo.component.spec'; @@ -69,7 +69,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(() => { @@ -77,15 +102,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; @@ -107,15 +123,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; @@ -132,15 +139,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); @@ -149,17 +147,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(); @@ -191,15 +178,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(); @@ -237,17 +215,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; @@ -288,17 +255,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; @@ -331,17 +287,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; @@ -358,16 +303,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 { @@ -381,16 +316,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 { @@ -404,16 +329,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; @@ -449,16 +364,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) => { @@ -477,16 +382,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']); @@ -501,17 +396,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(); @@ -531,19 +415,9 @@ describe('IgxSimpleCombo', () => { it('should delete the selection on destroy', () => { jasmine.getEnv().allowRespy(true); - 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(); @@ -930,7 +804,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(); @@ -968,9 +842,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); @@ -2320,7 +2194,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(); @@ -2398,7 +2272,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(); @@ -2492,7 +2366,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 }, @@ -2654,7 +2528,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(); @@ -3084,7 +2958,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' }, ]; @@ -3155,10 +3029,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; } @@ -3246,6 +3122,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 }) @@ -3254,7 +3133,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), }); @@ -3303,7 +3184,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), }); @@ -3324,11 +3207,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/simple-combo/src/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts index b2ea98c3494..f1aa318af7d 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts @@ -1,18 +1,14 @@ 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'; -import { CancelableEventArgs, IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil, IgxSelectionAPIService } from 'igniteui-angular/core'; +import { CancelableEventArgs, IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxForOfDirective } from 'igniteui-angular/directives'; import { IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxTextSelectionDirective } from 'igniteui-angular/directives'; -import { IgxIconService } from 'igniteui-angular/icon'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IGX_COMBO_COMPONENT, IgxComboAddItemComponent, IgxComboAPIService, IgxComboBaseDirective, IgxComboDropDownComponent, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboItemComponent } from 'igniteui-angular/combo'; import { IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; @@ -61,6 +57,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; @@ -131,27 +130,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); } @@ -215,7 +195,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; } diff --git a/projects/igniteui-angular/slider/src/slider/label/thumb-label.component.ts b/projects/igniteui-angular/slider/src/slider/label/thumb-label.component.ts index 8a9c860dd07..10ac41aebfc 100644 --- a/projects/igniteui-angular/slider/src/slider/label/thumb-label.component.ts +++ b/projects/igniteui-angular/slider/src/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/slider/src/slider/slider.component.spec.ts b/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts index ca0d0bafdb6..4838a1e45ba 100644 --- a/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/slider/src/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/slider/src/slider/slider.component.ts b/projects/igniteui-angular/slider/src/slider/slider.component.ts index e3d8ff21280..9c742100f4a 100644 --- a/projects/igniteui-angular/slider/src/slider/slider.component.ts +++ b/projects/igniteui-angular/slider/src/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'; @@ -46,6 +43,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 */ @@ -752,11 +755,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/slider/src/slider/thumb/thumb-slider.component.ts b/projects/igniteui-angular/slider/src/slider/thumb/thumb-slider.component.ts index f2ac5cfe8a8..b744b5eb050 100644 --- a/projects/igniteui-angular/slider/src/slider/thumb/thumb-slider.component.ts +++ b/projects/igniteui-angular/slider/src/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 { ɵIgxDirectionality } from 'igniteui-angular/core'; 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/splitter/src/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts index eb8802bac6a..380065de59e 100644 --- a/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts +++ b/projects/igniteui-angular/splitter/src/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/splitter/src/splitter/splitter.component.ts b/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts index b4bc72084b3..374ec9cfeeb 100644 --- a/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts +++ b/projects/igniteui-angular/splitter/src/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 'igniteui-angular/directives'; 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/stepper/src/stepper/step/step.component.ts b/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts index e21d73923b3..a2c09f9f43d 100644 --- a/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts +++ b/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts @@ -1,22 +1,4 @@ -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 { IgxStep, IgxStepper, IgxStepperOrientation, IgxStepType, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT, HorizontalAnimationType } from '../stepper.common'; import { IgxStepContentDirective, IgxStepIndicatorDirective } from '../stepper.directive'; @@ -25,7 +7,7 @@ import { NgClass, NgTemplateOutlet } from '@angular/common'; import { IgxRippleDirective } from 'igniteui-angular/directives'; import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel'; import { CarouselAnimationDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel'; -import { AnimationService, IgxAngularAnimationService, ɵIgxDirectionality, PlatformUtil } from 'igniteui-angular/core'; +import { ɵIgxDirectionality, PlatformUtil } from 'igniteui-angular/core'; let NEXT_ID = 0; @@ -57,6 +39,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. @@ -380,19 +370,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/stepper/src/stepper/stepper.component.spec.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts index 287cec40635..5dfafc2feed 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/stepper/src/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 'igniteui-angular/icon'; import { IgxInputDirective, IgxInputGroupComponent } from '../../../input-group/src/public_api'; -import { ɵDirection } from 'igniteui-angular/core'; +import { IgxAngularAnimationService, PlatformUtil, ɵDirection } from 'igniteui-angular/core'; 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,7 @@ import { import { IgxStepperComponent } from './stepper.component'; import { IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective } from './stepper.directive'; import { IgxStepperService } from './stepper.service'; +import { IgxDirectionality } from 'igniteui-angular/core/src/services/direction/directionality'; const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; @@ -146,7 +148,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 +1012,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/stepper/src/stepper/stepper.component.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts index a9786a91abe..3763ed54010 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts @@ -1,15 +1,10 @@ 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 'igniteui-angular/carousel'; -import { IgxAngularAnimationService, AnimationService } from 'igniteui-angular/core'; import { IgxStepComponent } from './step/step.component'; import { IgxStepper, IgxStepperOrientation, IgxStepperTitlePosition, IgxStepType, @@ -75,6 +70,9 @@ import { ToggleAnimationSettings } from 'igniteui-angular/expansion-panel'; 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. @@ -330,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/stepper/src/stepper/stepper.directive.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts index 9e5e334272b..9d198e4b34c 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/stepper/src/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/switch/src/switch/switch.component.spec.ts b/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts index 56553b40bf1..f7776837d07 100644 --- a/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/switch/src/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/tabs/src/tabs/tab-content.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tab-content.directive.ts index ed6e302a4ac..f322fb1f8dc 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tab-content.directive.ts +++ b/projects/igniteui-angular/tabs/src/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/tabs/src/tabs/tab-header.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts index 40c86ce1516..4108e2530aa 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts +++ b/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts @@ -1,24 +1,24 @@ -import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core'; +import { Directive, ElementRef, HostBinding, HostListener, inject } from '@angular/core'; import { PlatformUtil } from 'igniteui-angular/core'; import { IgxTabItemDirective } from './tab-item.directive'; import { IgxTabHeaderBase, IgxTabsBase } from './tabs.base'; @Directive() export abstract class IgxTabHeaderDirective implements IgxTabHeaderBase { + /** @hidden */ + protected tabs = inject(IgxTabsBase); + /** @hidden */ + public tab = inject(IgxTabItemDirective); + /** @hidden */ + private elementRef = inject(ElementRef); + /** @hidden */ + protected platform = inject(PlatformUtil); /** @hidden */ @HostBinding('attr.role') public role = 'tab'; - /** @hidden */ - constructor( - protected tabs: IgxTabsBase, - public tab: IgxTabItemDirective, - private elementRef: ElementRef, - protected platform: PlatformUtil - ) { } - /** @hidden */ @HostBinding('attr.tabindex') public get tabIndex() { diff --git a/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts index ff6fdfb2705..9cb8ed85313 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts +++ b/projects/igniteui-angular/tabs/src/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 { IgxTabHeaderBase, IgxTabItemBase, IgxTabContentBase, IgxTabsBase } from './tabs.base'; import { CarouselAnimationDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel'; @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/tabs/src/tabs/tabs.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts index 9a44115c0ea..3d6e6e322dc 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts +++ b/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts @@ -1,10 +1,10 @@ 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 { IBaseEventArgs, IgxAngularAnimationService, AnimationService, ɵIgxDirectionality } from 'igniteui-angular/core'; +import { IBaseEventArgs, ɵIgxDirectionality } from 'igniteui-angular/core'; import { IgxTabItemDirective } from './tab-item.directive'; import { IgxTabContentBase, IgxTabsBase } from './tabs.base'; import { IgxCarouselComponentBase, CarouselAnimationDirection } from 'igniteui-angular/carousel'; @@ -26,6 +26,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. @@ -110,14 +112,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/tabs/src/tabs/tabs/tab-header.component.ts b/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts index 05906edba54..ec8944d7233 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts +++ b/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts @@ -1,9 +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, ɵIgxDirectionality, PlatformUtil } from 'igniteui-angular/core'; +import { getResizeObserver, ɵIgxDirectionality } from 'igniteui-angular/core'; @Component({ selector: 'igx-tab-header', @@ -12,6 +11,9 @@ import { getResizeObserver, ɵIgxDirectionality, PlatformUtil } from 'igniteui-a 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') @@ -31,18 +33,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/tabs/src/tabs/tabs/tabs.component.ts b/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts index 6209b97a490..edcf617b6e9 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts +++ b/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts @@ -1,10 +1,10 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, OnDestroy, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, HostBinding, inject, Input, NgZone, OnDestroy, ViewChild } from '@angular/core'; import { IgxTabsBase } from '../tabs.base'; import { IgxTabsDirective } from '../tabs.directive'; import { NgClass, NgTemplateOutlet } from '@angular/common'; import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { AnimationService, getResizeObserver, IgxAngularAnimationService, ɵIgxDirectionality, PlatformUtil } from 'igniteui-angular/core'; +import { getResizeObserver, PlatformUtil } from 'igniteui-angular/core'; export const IgxTabsAlignment = { start: 'start', @@ -63,6 +63,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`. @@ -130,17 +133,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/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/test-utils/grid-base-components.spec.ts index 3cf713e2531..0e718e53aae 100644 --- a/projects/igniteui-angular/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/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 { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -181,6 +181,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'; @@ -189,10 +191,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; } @@ -220,9 +218,6 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { public hasGroupColumns = false; public override data = SampleTestData.contactInfoDataFull(); - constructor(cdr: ChangeDetectorRef) { - super(cdr); - } } @Component({ @@ -238,6 +233,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'; @@ -245,10 +242,6 @@ export class ColumnPinningTestComponent extends GridWithSizeComponent implements public showInline = true; public hideFilter = false; - constructor(private cdr: ChangeDetectorRef) { - super(); - } - public ngOnInit() { this.data = SampleTestData.productInfoData(); } @@ -292,8 +285,4 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom }) export class ColumnGroupsPinningTestComponent extends ColumnPinningTestComponent { public override data = SampleTestData.contactInfoDataFull(); - - constructor(cdr: ChangeDetectorRef) { - super(cdr); - } } diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.common.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.common.ts index c52ecb57559..d724606ddc7 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.common.ts +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.common.ts @@ -1,8 +1,8 @@ -import { ElementRef } from '@angular/core'; +import { ElementRef, InjectionToken } from '@angular/core'; import { DatePartDeltas } from 'igniteui-angular/core'; /** @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/time-picker/src/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts index 976de5dddf1..40fc1dee34c 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/time-picker/src/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'; @@ -20,6 +20,7 @@ import { HammerOptions } from 'igniteui-angular/core'; 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'; @@ -192,8 +193,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; @@ -294,7 +308,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; @@ -309,7 +322,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; @@ -336,7 +348,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; @@ -352,7 +363,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; @@ -365,7 +375,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); @@ -386,7 +395,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; @@ -418,7 +426,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(); @@ -447,8 +454,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/time-picker/src/time-picker/time-picker.component.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts index c96544a5d30..e46c5538d7e 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts @@ -10,13 +10,12 @@ import { Output, ViewChild, ContentChild, - Inject, AfterViewInit, Injector, PipeTransform, ChangeDetectorRef, - LOCALE_ID, Optional, - HostListener, booleanAttribute + HostListener, booleanAttribute, + inject } from '@angular/core'; import { ControlValueAccessor, @@ -28,7 +27,7 @@ import { NG_VALIDATORS } from '@angular/forms'; -import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE, IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxReadOnlyInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxReadOnlyInputDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxItemListDirective, IgxTimeItemDirective @@ -93,6 +92,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 @@ -590,15 +593,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/time-picker/src/time-picker/time-picker.directives.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.directives.ts index 887de30c3d0..73261ad080d 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.directives.ts +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.directives.ts @@ -9,7 +9,7 @@ import { ElementRef, HostBinding, HostListener, - Inject, + inject, Input, OnDestroy, OnInit @@ -24,6 +24,10 @@ import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.comm 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; @@ -40,12 +44,6 @@ export class IgxItemListDirective implements OnInit, OnDestroy { */ private scrollAccumulator = 0; - 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; @@ -246,6 +244,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; @@ -357,10 +358,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/time-picker/src/time-picker/time-picker.pipes.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.pipes.ts index c784dd65f90..61a44fb3c33 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.pipes.ts +++ b/projects/igniteui-angular/time-picker/src/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, DateTimeUtil } from 'igniteui-angular/core'; @@ -10,7 +10,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'); @@ -24,7 +25,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/toast/src/toast/toast.component.ts b/projects/igniteui-angular/toast/src/toast/toast.component.ts index bc3185de05d..6f0ba09f023 100644 --- a/projects/igniteui-angular/toast/src/toast/toast.component.ts +++ b/projects/igniteui-angular/toast/src/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 'igniteui-angular/core'; 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/tree/src/tree/tree-navigation.service.ts b/projects/igniteui-angular/tree/src/tree/tree-navigation.service.ts index 66d69185cfd..8efc4e63cb6 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-navigation.service.ts +++ b/projects/igniteui-angular/tree/src/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 'igniteui-angular/core'; 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/tree/src/tree/tree-navigation.spec.ts b/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts index b1dee1b8076..88edbd5b540 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts +++ b/projects/igniteui-angular/tree/src/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() }); @@ -781,7 +807,7 @@ describe('IgxTree - Navigation #treeView', () => { spyOn(nav, 'update_visible_cache'); spyOn(nav, 'register'); const mockPlatform = jasmine.createSpyObj('platform', ['isBrowser', 'isServer']); - const tree = new IgxTreeComponent(nav, mockSelectionService, mockTreeService, mockElementRef, mockPlatform); + const tree = TestBed.inject(IgxTreeComponent, mockPlatform); tree.nodes = mockQuery; expect(nav.register).toHaveBeenCalledWith(tree); expect(nav.init_invisible_cache).not.toHaveBeenCalled(); diff --git a/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts b/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts index 4873e0add03..7e932997b65 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts +++ b/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts @@ -1,24 +1,4 @@ -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 { IgxTree, @@ -36,7 +16,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel'; -import { AnimationService, getCurrentResourceStrings, IgxAngularAnimationService, ITreeResourceStrings, TreeResourceStringsEN } from 'igniteui-angular/core'; +import { getCurrentResourceStrings, ITreeResourceStrings, TreeResourceStringsEN } from 'igniteui-angular/core'; // TODO: Implement aria functionality /** @@ -48,6 +28,10 @@ import { AnimationService, getCurrentResourceStrings, IgxAngularAnimationService 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'; @@ -89,13 +73,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 { @@ -154,6 +131,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. * @@ -381,19 +366,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/tree/src/tree/tree-samples.spec.ts b/projects/igniteui-angular/tree/src/tree/tree-samples.spec.ts index 9ec8e908b69..6d98bc70ed2 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-samples.spec.ts +++ b/projects/igniteui-angular/tree/src/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/tree/src/tree/tree-selection.spec.ts b/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts index ee93c332684..a7438f0c994 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts +++ b/projects/igniteui-angular/tree/src/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,12 +551,27 @@ describe('IgxTree - Selection #treeView', () => { let mockQuery: jasmine.SpyObj>; const selectionService = new IgxTreeSelectionService(); const treeService = new IgxTreeService(); - const navService = new IgxTreeNavigationService(treeService, selectionService); + const elementRef = { nativeElement: null }; const mockPlatform = jasmine.createSpyObj('platform', ['isBrowser', 'isServer']); mockPlatform.isBrowser = true; - const tree = new IgxTreeComponent(navService, selectionService, treeService, null, mockPlatform); + 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); @@ -566,6 +581,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(); @@ -587,26 +607,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; @@ -616,6 +657,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(); @@ -639,8 +685,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/tree/src/tree/tree.component.ts b/projects/igniteui-angular/tree/src/tree/tree.component.ts index d9be4047d0c..d3f13fd9cdc 100644 --- a/projects/igniteui-angular/tree/src/tree/tree.component.ts +++ b/projects/igniteui-angular/tree/src/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,12 @@ 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); + private platform = inject(PlatformUtil); + @HostBinding('class.igx-tree') public cssClass = 'igx-tree'; @@ -322,13 +312,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, - private platform: PlatformUtil - ) { + constructor() { this.selectionService.register(this); this.treeService.register(this); this.navService.register(this); diff --git a/projects/igniteui-angular/tree/src/tree/tree.spec.ts b/projects/igniteui-angular/tree/src/tree/tree.spec.ts index 85781331cf6..290c2e85944 100644 --- a/projects/igniteui-angular/tree/src/tree/tree.spec.ts +++ b/projects/igniteui-angular/tree/src/tree/tree.spec.ts @@ -4,13 +4,14 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { AnimationService } from 'igniteui-angular/core'; +import { AnimationService, IgxAngularAnimationService } from 'igniteui-angular/core'; import { TreeTestFunctions } from './tree-functions.spec'; import { IgxTreeNavigationService } from './tree-navigation.service'; 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 { IGX_TREE_COMPONENT } from './common'; const TREE_ROOT_CLASS = 'igx-tree__root'; const NODE_TAG = 'igx-tree-node'; @@ -45,10 +46,22 @@ describe('IgxTree #treeView', () => { mockElementRef = jasmine.createSpyObj('elementRef', [], { nativeElement: document.createElement('div') }); + + TestBed.configureTestingModule({ + providers: [ + { provide: IgxTreeNavigationService, useValue: mockNavService }, + { provide: IgxTreeService, useValue: mockTreeService }, + { provide: IgxTreeSelectionService, useValue: mockSelectionService }, + { provide: ElementRef, useValue: mockElementRef }, + IgxTreeComponent + ] + }); + const mockPlatform = jasmine.createSpyObj('platform', ['isBrowser', 'isServer']); mockPlatform.isBrowser = true; - tree?.ngOnDestroy(); - tree = new IgxTreeComponent(mockNavService, mockSelectionService, mockTreeService, mockElementRef, mockPlatform); + + tree = TestBed.inject(IgxTreeComponent); + mockNodes = jasmine.createSpyObj('mockList', ['toArray'], { changes: new Subject(), get first() { @@ -237,9 +250,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'], @@ -251,10 +266,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(); @@ -274,38 +323,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, @@ -317,13 +357,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(); @@ -335,8 +375,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); @@ -348,10 +388,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); @@ -361,24 +401,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/grid-cellMerging/grid-cellMerging.component.ts b/src/app/grid-cellMerging/grid-cellMerging.component.ts index 19c7ed681e1..f3c18dd222c 100644 --- a/src/app/grid-cellMerging/grid-cellMerging.component.ts +++ b/src/app/grid-cellMerging/grid-cellMerging.component.ts @@ -1,16 +1,14 @@ -import { Component, HostBinding, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DefaultTreeGridMergeStrategy, IgxActionStripComponent, - IgxButtonDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, - IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxHierarchicalGridComponent, @@ -25,7 +23,6 @@ import { } from 'igniteui-angular'; import { HIERARCHICAL_DATA } from '../shared/hierarchicalData'; -import { data, dataWithoutPK } from '../shared/data'; import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data'; import { ByLevelTreeGridMergeStrategy } from 'igniteui-angular'; import { INVOICE_DATA } from '../shared/invoiceData'; diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts index b4d4f7e6f6b..6f5f2ca40e0 100644 --- a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts +++ b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts @@ -1,5 +1,5 @@ import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core'; -import { ColumnPinningPosition, IColumnsAutoGeneratedEventArgs, IgxActionStripComponent, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular'; +import { ColumnPinningPosition, IgxActionStripComponent, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular'; @Component({ selector: 'app-hierarchical-grid-add-row-sample', 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 8ac8536d3a6..04c365fb92c 100644 --- a/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts +++ b/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts @@ -44,7 +44,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), )