Grid with transactions
This name is forbidden.
SOME PAGE CONTENT
`
+ SOME PAGE CONTENT
`,
+ standalone: true,
+ imports: [ IgxBannerComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxBannerActionsDirective, IgxAvatarComponent ]
})
export class IgxBannerCustomTemplateComponent {
@ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
@@ -584,7 +580,9 @@ export class IgxBannerCustomTemplateComponent {
SOME PAGE CONTENT
`
+ SOME PAGE CONTENT
`,
+ standalone: true,
+ imports: [ IgxBannerComponent ]
})
export class SimpleBannerEventsComponent {
@ViewChild(IgxBannerComponent, { read: IgxBannerComponent, static: true })
diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts
index eeb47c722d5..c3f30fa8fe6 100644
--- a/projects/igniteui-angular/src/lib/banner/banner.component.ts
+++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts
@@ -5,20 +5,20 @@ import {
EventEmitter,
HostBinding,
Input,
- NgModule,
Output,
ViewChild
} from '@angular/core';
-import { IgxExpansionPanelModule } from '../expansion-panel/expansion-panel.module';
-import { IgxExpansionPanelComponent } from '../expansion-panel/public_api';
-import { IgxIconModule, IgxIconComponent } from '../icon/public_api';
+
+import { IgxIconComponent } from '../icon/icon.component';
import { IToggleView } from '../core/navigation';
-import { IgxButtonModule } from '../directives/button/button.directive';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
import { IgxBannerActionsDirective } from './banner.directives';
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
+import { IgxExpansionPanelBodyComponent } from '../expansion-panel/expansion-panel-body.component';
+import { IgxExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
import { IBannerResourceStrings } from '../core/i18n/banner-resources';
import { CurrentResourceStrings } from '../core/i18n/resources';
@@ -52,7 +52,9 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
*/
@Component({
selector: 'igx-banner',
- templateUrl: 'banner.component.html'
+ templateUrl: 'banner.component.html',
+ standalone: true,
+ imports: [ IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, NgIf, IgxButtonDirective, IgxRippleDirective ]
})
export class IgxBannerComponent implements IToggleView {
/**
@@ -122,6 +124,18 @@ export class IgxBannerComponent implements IToggleView {
return !this._bannerActionTemplate;
}
+ /**
+ * Set the animation settings used by the banner open/close methods
+ * ```typescript
+ * import { slideInLeft, slideOutRight } from 'igniteui-angular';
+ * ...
+ * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
+ * ```
+ */
+ public set animationSettings(settings: ToggleAnimationSettings) {
+ this._animationSettings = settings;
+ }
+
/**
* Get the animation settings used by the banner open/close methods
* ```typescript
@@ -151,18 +165,6 @@ export class IgxBannerComponent implements IToggleView {
}
return this._resourceStrings;
}
-
- /**
- * Set the animation settings used by the banner open/close methods
- * ```typescript
- * import { slideInLeft, slideOutRight } from 'igniteui-angular';
- * ...
- * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
- * ```
- */
- public set animationSettings(settings: ToggleAnimationSettings) {
- this._animationSettings = settings;
- }
/**
* Gets whether banner is collapsed
*
@@ -301,9 +303,4 @@ export class IgxBannerComponent implements IToggleView {
/**
* @hidden
*/
-@NgModule({
- declarations: [IgxBannerComponent, IgxBannerActionsDirective],
- exports: [IgxBannerComponent, IgxBannerActionsDirective],
- imports: [CommonModule, IgxExpansionPanelModule, IgxIconModule, IgxButtonModule, IgxRippleModule]
-})
-export class IgxBannerModule { }
+
diff --git a/projects/igniteui-angular/src/lib/banner/banner.directives.ts b/projects/igniteui-angular/src/lib/banner/banner.directives.ts
index bc9ded96409..84e437b2970 100644
--- a/projects/igniteui-angular/src/lib/banner/banner.directives.ts
+++ b/projects/igniteui-angular/src/lib/banner/banner.directives.ts
@@ -1,5 +1,7 @@
import { Directive } from '@angular/core';
-/* eslint-disable @angular-eslint/directive-selector */
-@Directive({ selector: 'igx-banner-actions' })
+@Directive({
+ selector: 'igx-banner-actions',
+ standalone: true
+})
export class IgxBannerActionsDirective { }
diff --git a/projects/igniteui-angular/src/lib/banner/banner.module.ts b/projects/igniteui-angular/src/lib/banner/banner.module.ts
new file mode 100644
index 00000000000..6473a7f1814
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/banner/banner.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IGX_BANNER_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [...IGX_BANNER_DIRECTIVES],
+ exports: [...IGX_BANNER_DIRECTIVES]
+})
+export class IgxBannerModule { }
diff --git a/projects/igniteui-angular/src/lib/banner/public_api.ts b/projects/igniteui-angular/src/lib/banner/public_api.ts
index 5b503ca6eee..0433362fde6 100644
--- a/projects/igniteui-angular/src/lib/banner/public_api.ts
+++ b/projects/igniteui-angular/src/lib/banner/public_api.ts
@@ -1,2 +1,11 @@
+import { IgxBannerComponent } from './banner.component';
+import { IgxBannerActionsDirective } from './banner.directives';
+
export * from './banner.component';
export * from './banner.directives';
+
+/* Banner directives collection for ease-of-use import in standalone components scenario */
+export const IGX_BANNER_DIRECTIVES = [
+ IgxBannerComponent,
+ IgxBannerActionsDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
index 997b8ef5a50..42cd8c63eef 100644
--- a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
+++ b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgFor, NgIf } from '@angular/common';
import {
AfterContentInit,
AfterViewInit,
@@ -9,7 +9,6 @@ import {
HostBinding,
Inject,
Input,
- NgModule,
Output,
Optional,
QueryList,
@@ -18,13 +17,14 @@ import {
OnDestroy
} from '@angular/core';
import { Subject } from 'rxjs';
-import { IgxButtonDirective, IgxButtonModule } from '../directives/button/button.directive';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { IgxIconModule } from '../icon/public_api';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
+
import { takeUntil } from 'rxjs/operators';
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
import { IBaseEventArgs } from '../core/utils';
import { mkenum } from '../core/utils';
+import { IgxIconComponent } from '../icon/icon.component';
/**
* Determines the Button Group alignment
@@ -59,7 +59,9 @@ let NEXT_ID = 0;
*/
@Component({
selector: 'igx-buttongroup',
- templateUrl: 'buttongroup-content.component.html'
+ templateUrl: 'buttongroup-content.component.html',
+ standalone: true,
+ imports: [NgFor, IgxButtonDirective, IgxRippleDirective, NgIf, IgxIconComponent]
})
export class IgxButtonGroupComponent extends DisplayDensityBase implements AfterContentInit, AfterViewInit, OnDestroy {
/**
@@ -460,9 +462,4 @@ export interface IButtonGroupEventArgs extends IBaseEventArgs {
/**
* @hidden
*/
-@NgModule({
- declarations: [IgxButtonGroupComponent],
- exports: [IgxButtonGroupComponent],
- imports: [IgxButtonModule, CommonModule, IgxRippleModule, IgxIconModule]
-})
-export class IgxButtonGroupModule {}
+
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
index d8bfff948c1..b8c433e711a 100644
--- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -1,10 +1,10 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { TestBed, waitForAsync } from '@angular/core/testing';
-import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonGroupModule } from './buttonGroup.component';
-import { IgxButtonModule } from '../directives/button/button.directive';
+import { ButtonGroupAlignment, IgxButtonGroupComponent } from './buttonGroup.component';
import { configureTestSuite } from '../test-utils/configure-suite';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { IgxButtonDirective } from '../directives/button/button.directive';
interface IButton {
type?: string;
@@ -47,19 +47,14 @@ describe('IgxButtonGroup', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
InitButtonGroupComponent,
InitButtonGroupWithValuesComponent,
TemplatedButtonGroupComponent,
TemplatedButtonGroupDesplayDensityComponent
- ],
- imports: [
- IgxButtonGroupModule,
- IgxButtonModule,
- NoopAnimationsModule
]
- })
- .compileComponents();
+ }).compileComponents();
}));
it('should initialize buttonGroup with default values', () => {
@@ -273,7 +268,11 @@ describe('IgxButtonGroup', () => {
});
-@Component({ template: `Slide3
Slide4
Slide3
Slide4
Slide3
Slide4
{{slide.text}}
{{label}}
-
-
-
-State: {{display[key]}}
-Region: {{display.region}}
-This is a header
-
+
+
+ State: {{display[key]}}
+ Region: {{display.region}}
+ This is a header
+
-
->
-
-
-`
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxComboComponent]
})
class IgxComboInContainerTestComponent {
@ViewChild('combo', { read: IgxComboComponent, static: true })
@@ -3453,8 +3435,8 @@ class IgxComboInContainerTestComponent {
'Padua',
'Palermo',
'Palma de Mallorca'];
-
}
+
@Injectable()
export class RemoteDataService {
public records: Observable
-
-
-
` })
+ template: `
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class AlertComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
public isModal = false;
}
@Component({
- template: `
-
-
-
` })
+ template: `
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class DialogComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
}
@Component({
- template: `
-
-
-
` })
+ template: `
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class DialogTwoWayDataBindingComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
public myDialog = false;
}
@Component({
- template: `
-
-
-
` })
+ template: `
+
-
- Custom Sample
-
+
+
+
`,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class DialogSampleComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
}
@Component({
- template: `
+
+ Custom Sample
+
-
-
-
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective]
})
export class VerticalVirtualComponent extends VirtualComponent {
public override width = '450px';
@@ -1515,7 +1475,9 @@ export class VerticalVirtualComponent extends VirtualComponent {
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective, NgIf]
})
export class VerticalVirtualDestroyComponent extends VerticalVirtualComponent {
public exists = true;
@@ -1551,7 +1513,9 @@ export class VerticalVirtualDestroyComponent extends VerticalVirtualComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxForOfDirective, NgIf]
})
export class VerticalVirtualCreateComponent extends VerticalVirtualComponent {
@ViewChild('scrollContainer2', { read: IgxForOfDirective, static: false })
@@ -1580,7 +1544,9 @@ export class VerticalVirtualCreateComponent extends VerticalVirtualComponent {
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective, NgFor]
})
export class HorizontalVirtualComponent extends VirtualComponent {
public override width = '800px';
@@ -1592,7 +1558,7 @@ export class HorizontalVirtualComponent extends VirtualComponent {
/** Only vertically virtualized component */
@Component({
template: `
-
-
-
- ` })
+ template: `
+
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective]
})
export class VirtualComponent {
@ViewChild('container', { read: ViewContainerRef, static: true })
@@ -1483,7 +1441,9 @@ export class VirtualComponent {
+
+
+
- Header
- Item 1
- Item 2
- Item 3
-
- `
+ template: `
+
+ Header
+ Item 1
+ Item 2
+ Item 3
+
+ `,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent, IgxFilterDirective]
})
class DeclarativeListTestComponent {
@ViewChild(IgxListComponent, { static: true }) public list: IgxListComponent;
@@ -211,11 +213,14 @@ class DeclarativeListTestComponent {
}
@Component({
- template: `
-
- {{item.text}}
-
- `
+ template: `
+
+
+ {{item.text}}
+
+ `,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent, IgxFilterPipe, NgFor]
})
class DynamicListTestComponent {
@ViewChild(IgxListComponent, { static: true }) public list: IgxListComponent;
diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.ts
index 1081e0f45c4..411b9357ef4 100644
--- a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.ts
@@ -1,10 +1,7 @@
-import { CommonModule } from '@angular/common';
import {
Directive,
- ElementRef,
EventEmitter,
Input,
- NgModule,
OnChanges,
Output,
Pipe,
@@ -77,7 +74,8 @@ export class IgxFilterOptions {
@Directive({
- selector: '[igxFilter]'
+ selector: '[igxFilter]',
+ standalone: true
})
export class IgxFilterDirective implements OnChanges {
@Output() public filtering = new EventEmitter(false); // synchronous event emitter
@@ -85,7 +83,7 @@ export class IgxFilterDirective implements OnChanges {
@Input('igxFilter') public filterOptions: IgxFilterOptions;
- constructor(private element: ElementRef) {
+ constructor() {
}
public ngOnChanges(changes: SimpleChanges) {
@@ -120,9 +118,9 @@ export class IgxFilterDirective implements OnChanges {
@Pipe({
name: 'igxFilter',
- pure: false
+ pure: false,
+ standalone: true
})
-
export class IgxFilterPipe implements PipeTransform {
private findMatchByKey(item: any, options: IgxFilterOptions, key: string) {
const match = options.matchFn(options.formatter(options.get_value(item, key)), options.inputValue);
@@ -171,14 +169,3 @@ export class IgxFilterPipe implements PipeTransform {
return result;
}
}
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [IgxFilterDirective, IgxFilterPipe],
- exports: [IgxFilterDirective, IgxFilterPipe],
- imports: [CommonModule]
-})
-export class IgxFilterModule {
-}
diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.module.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.module.ts
new file mode 100644
index 00000000000..920781dad9a
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/filter/filter.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IgxFilterDirective, IgxFilterPipe } from './filter.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxFilterDirective, IgxFilterPipe],
+ exports: [IgxFilterDirective, IgxFilterPipe]
+})
+export class IgxFilterModule {
+}
diff --git a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts
index 17577d62b82..afcfda78989 100644
--- a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts
@@ -1,22 +1,18 @@
import { Component } from '@angular/core';
import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { IgxFocusTrapDirective, IgxFocusTrapModule } from './focus-trap.directive';
+import { IgxFocusTrapDirective } from './focus-trap.directive';
import { configureTestSuite } from '../../test-utils/configure-suite';
-import { IgxCheckboxModule } from '../../checkbox/checkbox.component';
-import { IgxDatePickerModule } from '../../date-picker/public_api';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
+import { NgIf } from '@angular/common';
describe('igxFocusTrap', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- TrapFocusTestComponent
- ],
- imports: [IgxFocusTrapModule, IgxCheckboxModule, IgxDatePickerModule, NoopAnimationsModule]
+ imports: [NoopAnimationsModule, TrapFocusTestComponent]
}).compileComponents();
}));
@@ -172,13 +168,17 @@ describe('igxFocusTrap', () => {
@Component({
- template: ` extends IgxForOfDirective {
public scrStepArray = [];
public scrTopArray = [];
@@ -1385,7 +1339,9 @@ export class TestIgxForOfDirective extends IgxForOfDirective {
+
+
+ `,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class CustomDialogComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
}
@Component({
- template: `
-
-
-
- ` })
+ template: `
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class NestedDialogsComponent {
@ViewChild('child', { static: true }) public child: IgxDialogComponent;
@ViewChild('main', { static: true }) public main: IgxDialogComponent;
}
@Component({
- template: `
-
-
-
-
- ` })
+ template: `
+
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective]
+})
class CustomTemplates1DialogComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
}
@Component({
- template: `
- ` })
+ template: `
+
+ `,
+ standalone: true,
+ imports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective]
+})
class CustomTemplates2DialogComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
}
@Component({
- template: `
- ` })
+ `,
+ standalone: true,
+ imports: [IgxDialogComponent]
+})
class PositionSettingsDialogComponent {
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts
index 05c73d24ad6..8cc1ff97f28 100644
--- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts
+++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts
@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
import {
Component,
ElementRef,
EventEmitter,
HostBinding,
Input,
- NgModule,
OnDestroy,
OnInit,
Optional,
@@ -16,14 +15,13 @@ import {
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IgxNavigationService, IToggleView } from '../core/navigation';
-import { IgxButtonModule, IgxButtonType } from '../directives/button/button.directive';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';
-import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive';
+import { IgxButtonType, IgxButtonDirective } from '../directives/button/button.directive';
+import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
+import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api';
import {fadeIn, fadeOut} from '../animations/fade/index';
-import { IgxFocusModule } from '../directives/focus/focus.directive';
-import { IgxFocusTrapModule } from '../directives/focus-trap/focus-trap.directive';
+import { IgxFocusDirective } from '../directives/focus/focus.directive';
+import { IgxFocusTrapDirective } from '../directives/focus-trap/focus-trap.directive';
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
let DIALOG_ID = 0;
@@ -56,7 +54,9 @@ let DIALOG_ID = 0;
*/
@Component({
selector: 'igx-dialog',
- templateUrl: 'dialog-content.component.html'
+ templateUrl: 'dialog-content.component.html',
+ standalone: true,
+ imports: [IgxToggleDirective, IgxFocusTrapDirective, NgIf, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective]
})
export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit {
private static NEXT_ID = 1;
@@ -623,15 +623,3 @@ export interface IDialogEventArgs extends IBaseEventArgs {
}
export interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs { }
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],
- exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],
- imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule]
-})
-export class IgxDialogModule { }
-
-export * from './dialog.directives';
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.directives.ts b/projects/igniteui-angular/src/lib/dialog/dialog.directives.ts
index 79377603ab9..0df18988c47 100644
--- a/projects/igniteui-angular/src/lib/dialog/dialog.directives.ts
+++ b/projects/igniteui-angular/src/lib/dialog/dialog.directives.ts
@@ -4,7 +4,8 @@ import { Directive, HostBinding } from '@angular/core';
* @hidden
*/
@Directive({
- selector: 'igx-dialog-title,[igxDialogTitle]'
+ selector: 'igx-dialog-title,[igxDialogTitle]',
+ standalone: true
})
export class IgxDialogTitleDirective {
@@ -16,7 +17,8 @@ export class IgxDialogTitleDirective {
* @hidden
*/
@Directive({
- selector: 'igx-dialog-actions,[igxDialogActions]'
+ selector: 'igx-dialog-actions,[igxDialogActions]',
+ standalone: true
})
export class IgxDialogActionsDirective {
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.module.ts b/projects/igniteui-angular/src/lib/dialog/dialog.module.ts
new file mode 100644
index 00000000000..e5e6dccb86c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/dialog/dialog.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IGX_DIALOG_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [
+ ...IGX_DIALOG_DIRECTIVES
+ ],
+ exports: [
+ ...IGX_DIALOG_DIRECTIVES
+ ]
+})
+export class IgxDialogModule { }
diff --git a/projects/igniteui-angular/src/lib/dialog/public_api.ts b/projects/igniteui-angular/src/lib/dialog/public_api.ts
new file mode 100644
index 00000000000..9842d637b6c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/dialog/public_api.ts
@@ -0,0 +1,12 @@
+import { IgxDialogComponent } from './dialog.component';
+import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';
+
+export * from './dialog.component';
+export * from './dialog.directives';
+
+/* NOTE: Dialog directives collection for ease-of-use import in standalone components scenario */
+export const IGX_DIALOG_DIRECTIVES = [
+ IgxDialogComponent,
+ IgxDialogTitleDirective,
+ IgxDialogActionsDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
index 449f00c0f4e..9aa2f62e865 100644
--- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
@@ -2,15 +2,17 @@ import { Component, ViewChild, Pipe, PipeTransform, ElementRef } from '@angular/
import { TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxAutocompleteModule, IgxAutocompleteDirective, AutocompleteOverlaySettings } from './autocomplete.directive';
+import { IgxAutocompleteDirective, AutocompleteOverlaySettings } from './autocomplete.directive';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
import { IgxInputDirective } from '../input/input.directive';
-import { IgxInputGroupModule, IgxInputGroupComponent } from '../../input-group/public_api';
-import { IgxDropDownModule, IgxDropDownComponent, IgxDropDownItemNavigationDirective } from '../../drop-down/public_api';
+import { IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../input-group/public_api';
+import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from '../../drop-down/public_api';
import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
-import { IgxIconModule } from '../../icon/public_api';
import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } from '../../services/public_api';
+import { NgFor } from '@angular/common';
+import { IgxRippleDirective } from '../ripple/ripple.directive';
+import { IgxIconComponent } from '../../icon/icon.component';
const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list';
const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll';
@@ -28,23 +30,13 @@ describe('IgxAutocomplete', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- AutocompleteComponent,
- AutocompleteInputComponent,
- AutocompleteFormComponent,
- IgxAutocompletePipeStartsWith
- ],
imports: [
- IgxInputGroupModule,
- IgxDropDownModule,
- IgxAutocompleteModule,
- FormsModule,
- ReactiveFormsModule,
NoopAnimationsModule,
- IgxIconModule
+ AutocompleteComponent,
+ AutocompleteInputComponent,
+ AutocompleteFormComponent
]
- })
- .compileComponents();
+ }).compileComponents();
}));
describe('General tests: ', () => {
beforeEach(waitForAsync(() => {
@@ -933,8 +925,22 @@ describe('IgxAutocomplete', () => {
});
});
+@Pipe({
+ name: 'startsWith',
+ standalone: true
+})
+export class IgxAutocompletePipeStartsWith implements PipeTransform {
+ public transform(collection: any[], term = '', key?: string) {
+ return collection.filter(item => {
+ const currItem = key ? item[key] : item;
+ return currItem.toString().toLowerCase().startsWith(term.toString().toLowerCase());
+ });
+ }
+}
+
@Component({
- template: `
+ template: `
+
home
{{town}}
- `
+ `,
+ standalone: true,
+ imports: [
+ FormsModule,
+ IgxInputGroupComponent,
+ IgxPrefixDirective,
+ IgxSuffixDirective,
+ IgxInputDirective,
+ IgxDropDownComponent,
+ IgxDropDownItemComponent,
+ IgxIconComponent,
+ IgxAutocompleteDirective,
+ IgxAutocompletePipeStartsWith,
+ NgFor
+ ]
})
class AutocompleteComponent {
@ViewChild(IgxAutocompleteDirective, { static: true }) public autocomplete: IgxAutocompleteDirective;
@@ -982,7 +1002,17 @@ class AutocompleteComponent {
{{town}}
- `
+ `,
+ standalone: true,
+ imports: [
+ FormsModule,
+ IgxAutocompleteDirective,
+ IgxLabelDirective,
+ IgxDropDownComponent,
+ IgxDropDownItemComponent,
+ IgxAutocompletePipeStartsWith,
+ NgFor
+ ]
})
class AutocompleteInputComponent extends AutocompleteComponent {
@ViewChild('plainInput', { static: true }) public plainInput: ElementRef;
@@ -991,24 +1021,39 @@ class AutocompleteInputComponent extends AutocompleteComponent {
@Component({
template: `
-
-`
+
+ `,
+ standalone: true,
+ imports: [
+ ReactiveFormsModule,
+ IgxInputGroupComponent,
+ IgxInputDirective,
+ IgxLabelDirective,
+ IgxPrefixDirective,
+ IgxRippleDirective,
+ IgxDropDownComponent,
+ IgxDropDownItemComponent,
+ IgxIconComponent,
+ IgxAutocompleteDirective,
+ IgxAutocompletePipeStartsWith,
+ NgFor
+ ]
})
class AutocompleteFormComponent {
@@ -1034,13 +1079,3 @@ class AutocompleteFormComponent {
}
public onSubmitReactive() { }
}
-
-@Pipe({ name: 'startsWith' })
-export class IgxAutocompletePipeStartsWith implements PipeTransform {
- public transform(collection: any[], term = '', key?: string) {
- return collection.filter(item => {
- const currItem = key ? item[key] : item;
- return currItem.toString().toLowerCase().startsWith(term.toString().toLowerCase());
- });
- }
-}
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
index 6a3577a5e0b..a7fa92d517e 100644
--- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -7,7 +7,6 @@ import {
HostListener,
Inject,
Input,
- NgModule,
OnDestroy,
Optional,
Output,
@@ -16,7 +15,6 @@ import {
OnInit
} from '@angular/core';
import { NgModel, FormControlName } from '@angular/forms';
-import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CancelableEventArgs, IBaseEventArgs } from '../../core/utils';
@@ -28,13 +26,12 @@ import {
OverlaySettings
} from '../../services/public_api';
import {
- IgxDropDownComponent,
- IgxDropDownItemNavigationDirective,
- IgxDropDownModule,
- ISelectionEventArgs
-} from '../../drop-down/public_api';
+ IgxDropDownComponent
+} from '../../drop-down/drop-down.component';
+import { IgxDropDownItemNavigationDirective } from '../../drop-down/drop-down-navigation.directive';
import { IgxInputGroupComponent } from '../../input-group/public_api';
import { IgxOverlayOutletDirective } from '../toggle/toggle.directive';
+import { ISelectionEventArgs } from '../../drop-down/drop-down.common';
/**
* Interface that encapsulates onItemSelection event arguments - new value and cancel selection.
@@ -76,7 +73,8 @@ export interface AutocompleteOverlaySettings {
*/
@Directive({
selector: '[igxAutocomplete]',
- exportAs: 'igxAutocomplete'
+ exportAs: 'igxAutocomplete',
+ standalone: true
})
export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit {
/**
@@ -386,7 +384,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
} else {
this.nativeElement.value = newValue;
}
- };
+ }
private highlightFirstItem() {
if (this.target.focusedItem) {
@@ -395,13 +393,5 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
}
this.target.navigateFirst();
this.cdr.detectChanges();
- };
+ }
}
-
-/** @hidden */
-@NgModule({
- imports: [IgxDropDownModule, CommonModule],
- declarations: [IgxAutocompleteDirective],
- exports: [IgxAutocompleteDirective]
-})
-export class IgxAutocompleteModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.module.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.module.ts
new file mode 100644
index 00000000000..346ba28d6b4
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxAutocompleteDirective } from './autocomplete.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxAutocompleteDirective],
+ exports: [IgxAutocompleteDirective]
+})
+export class IgxAutocompleteModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts
index 4cf8946b8cd..e93de981a47 100644
--- a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts
@@ -4,8 +4,10 @@ import { By } from '@angular/platform-browser';
import { IgxButtonDirective } from './button.directive';
import { configureTestSuite } from '../../test-utils/configure-suite';
-import { IgxIconComponent, IgxIconService } from '../../icon/public_api';
import { DisplayDensity } from '../../core/density';
+import { IgxRippleDirective } from '../ripple/ripple.directive';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
const BUTTON_COMFORTABLE = 'igx-button';
const BUTTON_COSY = 'igx-button--cosy';
@@ -25,16 +27,13 @@ describe('IgxButton', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
InitButtonComponent,
ButtonWithAttribsComponent,
- ButtonsWithDisplayDensityComponent,
- IgxButtonDirective,
- IgxIconComponent
- ],
- providers: [IgxIconService]
- })
- .compileComponents();
+ ButtonsWithDisplayDensityComponent
+ ]
+ }).compileComponents();
}));
it('Initializes a button', () => {
@@ -151,10 +150,11 @@ describe('IgxButton', () => {
});
@Component({
- template:
- `
+ template: `
add
- `
+ `,
+ standalone: true,
+ imports: [IgxButtonDirective, IgxRippleDirective]
})
class InitButtonComponent {
@ViewChild(IgxButtonDirective, { read: IgxButtonDirective, static: true })
@@ -162,11 +162,12 @@ class InitButtonComponent {
}
@Component({
- template:
- `Test`
+ [disabled]="disabled">Test`,
+ standalone: true,
+ imports: [IgxButtonDirective]
})
class ButtonWithAttribsComponent {
public disabled = true;
@@ -175,8 +176,7 @@ class ButtonWithAttribsComponent {
}
@Component({
- template:
- `
+ template: `
@@ -186,7 +186,9 @@ class ButtonWithAttribsComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxButtonDirective, IgxIconComponent]
})
class ButtonsWithDisplayDensityComponent {
@ViewChild('flat', { read: IgxButtonDirective, static: true })
diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts
index 5794aa353ec..3a049b91c56 100644
--- a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts
@@ -5,7 +5,6 @@ import {
HostBinding,
Input,
Output,
- NgModule,
Renderer2,
HostListener,
Optional,
@@ -48,7 +47,8 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
* ```
*/
@Directive({
- selector: '[igxButton]'
+ selector: '[igxButton]',
+ standalone: true
})
export class IgxButtonDirective extends DisplayDensityBase {
private static ngAcceptInputType_type: IgxButtonType | '';
@@ -352,8 +352,4 @@ export interface IButtonEventArgs extends IBaseEventArgs {
*
* @hidden
*/
-@NgModule({
- declarations: [IgxButtonDirective],
- exports: [IgxButtonDirective]
-})
-export class IgxButtonModule {}
+
diff --git a/projects/igniteui-angular/src/lib/directives/button/button.module.ts b/projects/igniteui-angular/src/lib/directives/button/button.module.ts
new file mode 100644
index 00000000000..d4904d1ada3
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/button/button.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxButtonDirective } from './button.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxButtonDirective],
+ exports: [IgxButtonDirective]
+})
+export class IgxButtonModule {}
diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
index 0832f5aaee0..265917974f3 100644
--- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts
@@ -1,4 +1,4 @@
-import { IgxDateTimeEditorDirective, IgxDateTimeEditorModule } from './date-time-editor.directive';
+import { IgxDateTimeEditorDirective } from './date-time-editor.directive';
import { DatePart } from './date-time-editor.common';
import { DOCUMENT, formatDate } from '@angular/common';
import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, SimpleChanges } from '@angular/core';
@@ -6,7 +6,7 @@ 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';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxInputGroupModule, IgxInputGroupComponent, IgxInputDirective } from '../../input-group/public_api';
+import { IgxInputGroupComponent, IgxInputDirective } from '../../input-group/public_api';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { ControlsFunction } from '../../test-utils/controls-functions.spec';
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
@@ -19,11 +19,6 @@ describe('IgxDateTimeEditor', () => {
['parseMask', 'restoreValueFromMask', 'parseMaskValue', 'applyMask', 'parseValueFromMask']);
const renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute']);
const locale = 'en';
- const _ngModel = {
- control: { touched: false, dirty: false, validator: null, setValue: () => { } },
- valid: false,
- statusChanges: new EventEmitter(),
- };
let elementRef = { nativeElement: null };
let inputFormat: string;
let inputDate: string;
@@ -369,14 +364,13 @@ describe('IgxDateTimeEditor', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
IgxDateTimeEditorSampleComponent,
IgxDateTimeEditorBaseTestComponent,
IgxDateTimeEditorShadowDomComponent
- ],
- imports: [IgxInputGroupModule, IgxDateTimeEditorModule, FormsModule, NoopAnimationsModule]
- })
- .compileComponents();
+ ]
+ }).compileComponents();
}));
beforeEach(async () => {
fixture = TestBed.createComponent(IgxDateTimeEditorSampleComponent);
@@ -1117,15 +1111,9 @@ describe('IgxDateTimeEditor', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- IgxDateTimeEditorFormComponent
- ],
imports: [
- IgxInputGroupModule,
- IgxDateTimeEditorModule,
NoopAnimationsModule,
- ReactiveFormsModule,
- FormsModule
+ IgxDateTimeEditorFormComponent
]
}).compileComponents();
}));
@@ -1211,7 +1199,9 @@ describe('IgxDateTimeEditor', () => {
- `
+ `,
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective]
})
export class IgxDateTimeEditorBaseTestComponent {
@ViewChild(IgxDateTimeEditorDirective)
@@ -1221,14 +1211,16 @@ export class IgxDateTimeEditorBaseTestComponent {
@Component({
template: `
-
+
-`
+`,
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, FormsModule]
})
export class IgxDateTimeEditorSampleComponent {
@ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent;
@@ -1251,7 +1243,9 @@ export class IgxDateTimeEditorSampleComponent {
igxInput [igxDateTimeEditor]="dateTimeFormat" [minValue]="minDate" [maxValue]="maxDate"/>
-`
+`,
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, ReactiveFormsModule]
})
class IgxDateTimeEditorFormComponent {
@ViewChild('dateEditor', { read: IgxInputDirective, static: true })
@@ -1279,10 +1273,12 @@ class IgxDateTimeEditorFormComponent {
@Component({
template: `
-
-
+
+
`,
- encapsulation: ViewEncapsulation.ShadowDom
+ encapsulation: ViewEncapsulation.ShadowDom,
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective]
})
export class IgxDateTimeEditorShadowDomComponent {
public dateTimeFormat = 'dd/MM/yyyy hh:mm:ss';
diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts
index 3f45f40fd31..a4a12e24f2c 100644
--- a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts
@@ -1,7 +1,7 @@
/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
import {
Directive, Input, ElementRef,
- Renderer2, NgModule, Output, EventEmitter, Inject,
+ Renderer2, Output, EventEmitter, Inject,
LOCALE_ID, OnChanges, SimpleChanges, HostListener, OnInit
} from '@angular/core';
import {
@@ -46,12 +46,13 @@ import { DateTimeUtil } from '../../date-common/util/date-time.util';
* ```
*/
@Directive({
- selector: '[igxDateTimeEditor]',
- exportAs: 'igxDateTimeEditor',
- providers: [
- { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateTimeEditorDirective, multi: true },
- { provide: NG_VALIDATORS, useExisting: IgxDateTimeEditorDirective, multi: true }
- ]
+ selector: '[igxDateTimeEditor]',
+ exportAs: 'igxDateTimeEditor',
+ providers: [
+ { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateTimeEditorDirective, multi: true },
+ { provide: NG_VALIDATORS, useExisting: IgxDateTimeEditorDirective, multi: true }
+ ],
+ standalone: true
})
export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, OnInit, Validator, ControlValueAccessor {
/**
@@ -764,8 +765,4 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
}
}
-@NgModule({
- declarations: [IgxDateTimeEditorDirective],
- exports: [IgxDateTimeEditorDirective]
-})
-export class IgxDateTimeEditorModule { }
+
diff --git a/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.module.ts b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.module.ts
new file mode 100644
index 00000000000..5a79033aaf0
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxDateTimeEditorDirective } from './date-time-editor.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxDateTimeEditorDirective],
+ exports: [IgxDateTimeEditorDirective]
+})
+export class IgxDateTimeEditorModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts
index 27c35e15ba5..c86728ef2d4 100644
--- a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, HostBinding, NgModule, Input } from '@angular/core';
+import { Directive, HostBinding, Input } from '@angular/core';
import { mkenum } from '../../core/utils';
export const IgxDividerType = mkenum({
@@ -11,7 +11,8 @@ let NEXT_ID = 0;
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
- selector: 'igx-divider'
+ selector: 'igx-divider',
+ standalone: true
})
export class IgxDividerDirective {
/**
@@ -132,8 +133,4 @@ export class IgxDividerDirective {
}
}
-@NgModule({
- declarations: [IgxDividerDirective],
- exports: [IgxDividerDirective]
-})
-export class IgxDividerModule { }
+
diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts
new file mode 100644
index 00000000000..d27b919c126
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/divider/divider.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxDividerDirective } from './divider.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxDividerDirective],
+ exports: [IgxDividerDirective]
+})
+export class IgxDividerModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts
index bd078fb2528..c252036a36c 100644
--- a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts
@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { configureTestSuite } from '../../test-utils/configure-suite';
-import { IgxDividerModule, IgxDividerType } from './divider.directive';
+import { IgxDividerDirective, IgxDividerType } from './divider.directive';
describe('Divider', () => {
configureTestSuite();
@@ -19,8 +19,7 @@ describe('Divider', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [TestDividerComponent],
- imports: [IgxDividerModule]
+ imports: [TestDividerComponent]
}).compileComponents();
}));
@@ -126,7 +125,9 @@ describe('Divider', () => {
[middle]="middle"
[inset]="inset"
[role]="role">
- `
+ `,
+ standalone: true,
+ imports: [IgxDividerDirective]
})
class TestDividerComponent {
public type: string;
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts
index aaf3b71fa21..069a7dce823 100644
--- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts
@@ -5,7 +5,6 @@ import {
HostBinding,
HostListener,
Input,
- NgModule,
NgZone,
OnDestroy,
OnInit,
@@ -151,7 +150,8 @@ export class IgxDragLocation {
}
@Directive({
- selector: '[igxDragHandle]'
+ selector: '[igxDragHandle]',
+ standalone: true
})
export class IgxDragHandleDirective {
@@ -162,7 +162,8 @@ export class IgxDragHandleDirective {
}
@Directive({
- selector: '[igxDragIgnore]'
+ selector: '[igxDragIgnore]',
+ standalone: true
})
export class IgxDragIgnoreDirective {
@@ -174,7 +175,8 @@ export class IgxDragIgnoreDirective {
@Directive({
exportAs: 'drag',
- selector: '[igxDrag]'
+ selector: '[igxDrag]',
+ standalone: true
})
export class IgxDragDirective implements AfterContentInit, OnDestroy {
/**
@@ -1278,7 +1280,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
let targetElements = [];
// Check for shadowRoot instance and use it if present
for (const elFromPoint of elementsFromPoint) {
- if (!!elFromPoint?.shadowRoot) {
+ if (elFromPoint?.shadowRoot) {
targetElements = targetElements.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));
} else if (targetElements.indexOf(elFromPoint) === -1) {
targetElements.push(elFromPoint);
@@ -1523,7 +1525,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
@Directive({
exportAs: 'drop',
- selector: '[igxDrop]'
+ selector: '[igxDrop]',
+ standalone: true
})
export class IgxDropDirective implements OnInit, OnDestroy {
/**
@@ -1900,12 +1903,3 @@ export class IgxDropDirective implements OnInit, OnDestroy {
}
}
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective],
- exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective]
-})
-export class IgxDragDropModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.module.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.module.ts
new file mode 100644
index 00000000000..a020fd48834
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxDragDirective, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDropDirective } from './drag-drop.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective],
+ exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective]
+})
+export class IgxDragDropModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts
index 3caf31abc21..c3e3aa1303d 100644
--- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts
@@ -1,18 +1,18 @@
import { Component, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, Renderer2 } from '@angular/core';
import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
import { UIInteractions, wait} from '../../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { first } from 'rxjs/operators';
import { IgxInsertDropStrategy, IgxAppendDropStrategy, IgxPrependDropStrategy } from './drag-drop.strategy';
import {
- IgxDragDropModule,
IgxDragDirective,
IgxDropDirective,
IgxDragLocation,
IDropDroppedEventArgs,
- DragDirection
+ DragDirection,
+ IgxDragHandleDirective,
+ IgxDragIgnoreDirective
} from './drag-drop.directive';
describe('General igxDrag/igxDrop', () => {
@@ -24,13 +24,7 @@ describe('General igxDrag/igxDrop', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- TestDragDropComponent
- ],
- imports: [
- FormsModule,
- IgxDragDropModule
- ]
+ imports: [TestDragDropComponent]
})
.compileComponents();
}));
@@ -1356,14 +1350,10 @@ describe('Linked igxDrag/igxDrop ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
TestDragDropLinkedSingleComponent,
TestDragDropLinkedMixedComponent,
TestDragDropStrategiesComponent
- ],
- imports: [
- FormsModule,
- IgxDragDropModule
]
})
.compileComponents();
@@ -1917,7 +1907,9 @@ const generalStyles = [`
- `
+ `,
+ standalone: true,
+ imports: [IgxDragDirective, IgxDropDirective]
})
class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent { }
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts
new file mode 100644
index 00000000000..c32397aaf7e
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts
@@ -0,0 +1,12 @@
+import { IgxDragDirective, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDropDirective } from './drag-drop.directive';
+
+export * from './drag-drop.strategy';
+export * from './drag-drop.directive';
+
+/* NOTE: Drag and drop directives collection for ease-of-use import in standalone components scenario */
+export const IGX_DRAG_DROP_DIRECTIVES = [
+ IgxDragDirective,
+ IgxDropDirective,
+ IgxDragHandleDirective,
+ IgxDragIgnoreDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
index 028f86013bb..2cf74aa4f90 100644
--- a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts
@@ -1,22 +1,21 @@
import { Component, ViewChild } from '@angular/core';
import { ComponentFixtureAutoDetect, TestBed, waitForAsync } from '@angular/core/testing';
import { IgxListItemComponent } from '../../list/list-item.component';
-import { IgxListComponent, IgxListModule } from '../../list/list.component';
-import { IgxFilterModule, IgxFilterOptions } from './filter.directive';
+import { IgxListComponent } from '../../list/list.component';
+import { IgxFilterDirective, IgxFilterOptions, IgxFilterPipe } from './filter.directive';
import { configureTestSuite } from '../../test-utils/configure-suite';
+import { NgFor } from '@angular/common';
describe('Filter', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [DeclarativeListTestComponent, DynamicListTestComponent],
- imports: [IgxFilterModule, IgxListModule],
+ imports: [DeclarativeListTestComponent, DynamicListTestComponent],
providers: [
{ provide: ComponentFixtureAutoDetect, useValue: true }
]
- })
- .compileComponents();
+ }).compileComponents();
}));
it('should filter declaratively created list', () => {
@@ -173,13 +172,16 @@ describe('Filter', () => {
});
@Component({
- template: `TITLE 1
- BUTTONS 1
- TITLE 1
+ BUTTONS 1
+ TITLE 2
- BUTTONS 2
- TITLE 2
+ BUTTONS 2
+ Drop area:
- ` + `, + standalone: true, + imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective] }) class TestDragDropComponent { @ViewChildren(IgxDragDirective) @@ -1950,7 +1942,9 @@ class TestDragDropComponent {Drop area:
- ` + `, + standalone: true, + imports: [IgxDragDirective, IgxDropDirective] }) class TestDragDropLinkedSingleComponent extends TestDragDropComponent { } @@ -1969,7 +1963,9 @@ class TestDragDropLinkedSingleComponent extends TestDragDropComponent { }Drop area:
- ` + `, + standalone: true, + imports: [IgxDragDirective, IgxDropDirective] }) class TestDragDropLinkedMixedComponent extends TestDragDropComponent { } @@ -1989,6 +1985,8 @@ class TestDragDropLinkedMixedComponent extends TestDragDropComponent { }Drag 2
Drag 3
-
-
-
-
- -
` })
+ template: `
+ -
-
-
- -
+
+
+
+
+ +
`,
+ standalone: true,
+ imports: [IgxFocusTrapDirective, NgIf]
+})
class TrapFocusTestComponent {
public showInput = true;
public showButton = true;
diff --git a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts
index b3c7dfbeac0..192284a8625 100644
--- a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts
@@ -1,10 +1,11 @@
-import { AfterViewInit, Directive, ElementRef, Input, NgModule, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { PlatformUtil } from '../../core/utils';
@Directive({
- selector: '[igxFocusTrap]'
+ selector: '[igxFocusTrap]',
+ standalone: true
})
export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy {
/** @hidden */
@@ -100,12 +101,3 @@ export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy {
return activeElement;
}
}
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [IgxFocusTrapDirective],
- exports: [IgxFocusTrapDirective]
-})
-export class IgxFocusTrapModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.module.ts b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.module.ts
new file mode 100644
index 00000000000..2aa5afcf7dd
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { IgxFocusTrapDirective } from './focus-trap.directive';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [IgxFocusTrapDirective],
+ exports: [IgxFocusTrapDirective]
+})
+export class IgxFocusTrapModule { }
diff --git a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts
index 704b24e2ab2..7366f89dffe 100644
--- a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts
@@ -1,27 +1,27 @@
import { Component, DebugElement, ViewChild } from '@angular/core';
import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { IgxFocusDirective, IgxFocusModule } from './focus.directive';
+import { IgxFocusDirective } from './focus.directive';
+
import { configureTestSuite } from '../../test-utils/configure-suite';
import { EditorProvider } from '../../core/edit-provider';
-import { IgxCheckboxModule, IgxCheckboxComponent } from '../../checkbox/checkbox.component';
-import { IgxDatePickerModule, IgxDatePickerComponent } from '../../date-picker/public_api';
+import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
+import { IgxDatePickerComponent } from '../../date-picker/public_api';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxRadioComponent } from '../../radio/radio.component';
-import { IgxRadioModule } from '../radio/radio-group.directive';
-import { IgxSwitchComponent, IgxSwitchModule } from '../../switch/switch.component';
+import { IgxSwitchComponent } from '../../switch/switch.component';
describe('igxFocus', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
SetFocusComponent,
NoFocusComponent,
TriggerFocusOnClickComponent,
CheckboxPickerComponent
- ],
- imports: [ IgxFocusModule, IgxCheckboxModule, IgxRadioModule, IgxSwitchModule, IgxDatePickerModule, NoopAnimationsModule ]
+ ]
}).compileComponents();
}));
@@ -96,28 +96,32 @@ describe('igxFocus', () => {
});
@Component({
- template:
- `
+ template: `
- `
+ `,
+ standalone: true,
+ imports: [IgxFocusDirective]
})
class SetFocusComponent { }
@Component({
- template: ``
+ template: ``,
+ standalone: true,
+ imports: [IgxFocusDirective]
})
class NoFocusComponent { }
@Component({
- template:
- `
+ template: `
+
+
+
+ +
First
Second
Third
- `
+ `,
+ standalone: true,
+ imports: [IgxFocusDirective]
})
class TriggerFocusOnClickComponent {
@ViewChild(IgxFocusDirective, { static: true }) public focusRef: IgxFocusDirective;
@@ -129,13 +133,14 @@ class TriggerFocusOnClickComponent {
}
@Component({
- template:
- `
+ template: `
+
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective]
})
export class VirtualVariableSizeComponent {
@ViewChild('container', { static: true })
@@ -1636,7 +1604,9 @@ export class VirtualVariableSizeComponent {
- `
+ `,
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective]
})
export class VerticalVirtualNoDataComponent extends VerticalVirtualComponent {
}
@@ -1684,7 +1654,7 @@ export class LocalService {
/** Vertically virtualized component with remote virtualization */
@Component({
template: `
-
+
`,
- providers: [LocalService]
+ providers: [LocalService],
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective, AsyncPipe]
})
export class RemoteVirtualizationComponent implements OnInit, AfterViewInit {
@ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true })
@@ -1728,7 +1700,7 @@ export class RemoteVirtualizationComponent implements OnInit, AfterViewInit {
@Component({
template: `
-
`,
+ standalone: true,
+ imports: [IgxForOfDirective, NgClass]
})
export class LocalVariablesComponent {
public data = [];
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
index c2ab529c141..0ae89ba1d85 100644
--- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -1,5 +1,5 @@
/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
-import { CommonModule, DOCUMENT, NgForOfContext } from '@angular/common';
+import { DOCUMENT, NgForOfContext } from '@angular/common';
import {
ChangeDetectorRef,
ComponentRef,
@@ -11,7 +11,6 @@ import {
IterableChanges,
IterableDiffer,
IterableDiffers,
- NgModule,
NgZone,
OnChanges,
OnDestroy,
@@ -28,7 +27,7 @@ import {
import { DisplayContainerComponent } from './display.container';
import { HVirtualHelperComponent } from './horizontal.virtual.helper.component';
import { VirtualHelperComponent } from './virtual.helper.component';
-import { IgxScrollInertiaModule } from './../scroll-inertia/scroll_inertia.directive';
+
import { IgxForOfSyncService, IgxForOfScrollSyncService } from './for_of.sync.service';
import { Subject } from 'rxjs';
import { takeUntil, filter, throttleTime, first } from 'rxjs/operators';
@@ -80,7 +79,8 @@ export class IgxForOfContext
+
`,
- providers: [LocalService]
+ providers: [LocalService],
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective, AsyncPipe]
})
export class RemoteVirtCountComponent implements OnInit, AfterViewInit {
@ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true })
@@ -1794,7 +1768,9 @@ export class RemoteVirtCountComponent implements OnInit, AfterViewInit {
}`, `.forOfElement {
flex: 0 0 60px;
border-right: 1px solid #888;
- }`]
+ }`],
+ standalone: true,
+ imports: [TestIgxForOfDirective, IgxForOfDirective]
})
export class NoWidthAndHeightComponent {
@@ -1819,7 +1795,6 @@ export class NoWidthAndHeightComponent {
+ }">
{{rowIndex}} : {{item.text}}
+ template: `
+
+ `,
+ standalone: true,
+ imports: [IgxTextHighlightDirective]
})
class HighlightLoremIpsumComponent {
- @ViewChild(forwardRef(() => IgxTextHighlightDirective), { read: IgxTextHighlightDirective, static: true })
+ @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
public highlight: IgxTextHighlightDirective;
public highlightClass = 'igx-highlight';
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
index 67645c6068a..10740b8e373 100644
--- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
@@ -4,7 +4,6 @@ import {
ElementRef,
EventEmitter,
Input,
- NgModule,
OnChanges,
OnDestroy,
Renderer2,
@@ -46,7 +45,8 @@ export interface IActiveHighlightInfo {
}
@Directive({
- selector: '[igxTextHighlight]'
+ selector: '[igxTextHighlight]',
+ standalone: true
})
export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges {
public static highlightGroupsMap = new Map
{{html}}
-
`
+
Some content
- `
+ `,
+ standalone: true,
+ imports: [IgxToggleActionDirective, IgxToggleDirective]
})
export class IgxToggleServiceInjectComponent {
@ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective;
@@ -687,7 +694,9 @@ export class IgxToggleServiceInjectComponent {
Some more content
`,
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [IgxToggleDirective]
})
export class IgxOverlayServiceComponent {
@ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective;
@@ -705,7 +714,9 @@ export class IgxOverlayServiceComponent {
Some content
`,
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [IgxToggleActionDirective, IgxToggleDirective]
})
export class TestWithOnPushComponent {
@ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective;
@@ -733,7 +744,9 @@ export class TestWithOnPushComponent {
Toggle 3
- `
+ `,
+ standalone: true,
+ imports: [IgxToggleActionDirective, IgxToggleDirective]
})
export class TestWithThreeToggleActionsComponent implements OnInit {
@ViewChild('button1', { static: true }) public button1: ElementRef;
diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
index 647cb5ec696..1be9a71a4a5 100644
--- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
@@ -7,7 +7,6 @@ import {
HostListener,
Inject,
Input,
- NgModule,
OnDestroy,
OnInit,
Optional,
@@ -33,7 +32,8 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc
@Directive({
exportAs: 'toggle',
- selector: '[igxToggle]'
+ selector: '[igxToggle]',
+ standalone: true
})
export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
/**
@@ -393,7 +393,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
@Directive({
exportAs: 'toggle-action',
- selector: '[igxToggleAction]'
+ selector: '[igxToggleAction]',
+ standalone: true
})
export class IgxToggleActionDirective implements OnInit {
/**
@@ -505,7 +506,8 @@ export class IgxToggleActionDirective implements OnInit {
*/
@Directive({
exportAs: 'overlay-outlet',
- selector: '[igxOverlayOutlet]'
+ selector: '[igxOverlayOutlet]',
+ standalone: true
})
export class IgxOverlayOutletDirective {
constructor(public element: ElementRef
+ igxToggle
+ (appended)="onToggleContentAppended($event)"
+ (opening)="onToggleOpening($event)" (opened)="onToggleOpened()"
+ (closing)="onToggleClosing($event)" (closed)="onToggleClosed()">
-
- Example Title
- Example Description
-
-
-
-
-
- Example body
-
-
-`
+
+
+ Example Title
+ Example Description
+
+
+
+
+
+ Example body
+
+
+ `,
+ standalone: true,
+ imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, NgIf]
})
export class IgxExpansionPanelSampleComponent {
@ViewChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent })
@@ -1404,19 +1401,21 @@ export class IgxExpansionPanelSampleComponent {
@Component({
template: `
-
-
- Frogs
- Frog description
-
-
-
-
-`
+
+
+ Frogs
+ Frog description
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective]
})
export class IgxExpansionPanelImageComponent {
@ViewChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent, static: true })
@@ -1444,7 +1443,9 @@ export class IgxExpansionPanelImageComponent {
Example Body
-`
+ `,
+ standalone: true,
+ imports: [IGX_EXPANSION_PANEL_DIRECTIVES]
})
export class IgxExpansionPanelTooltipComponent {
public titleTooltip = '';
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts b/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts
index 98d18c16815..4ded0e546e7 100644
--- a/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts
+++ b/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts
@@ -1,3 +1,8 @@
+import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
+import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
+import { IgxExpansionPanelComponent } from './expansion-panel.component';
+import { IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from './expansion-panel.directives';
+
export { IExpansionPanelEventArgs } from './expansion-panel.common';
export { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
export { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
@@ -8,4 +13,13 @@ export {
IgxExpansionPanelTitleDirective
} from './expansion-panel.directives';
export { ExpansionPanelHeaderIconPosition } from './expansion-panel-header.component';
-export * from './expansion-panel.module';
+
+/* NOTE: Expansion panel directives collection for ease-of-use import in standalone components scenario */
+export const IGX_EXPANSION_PANEL_DIRECTIVES = [
+ IgxExpansionPanelComponent,
+ IgxExpansionPanelHeaderComponent,
+ IgxExpansionPanelBodyComponent,
+ IgxExpansionPanelDescriptionDirective,
+ IgxExpansionPanelTitleDirective,
+ IgxExpansionPanelIconDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index 5684c2f296b..6cb430c0c84 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -18,25 +18,39 @@
QueryList,
AfterViewInit
} from '@angular/core';
-import { formatPercent } from '@angular/common';
+import { formatPercent, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+import { first, takeUntil, takeWhile } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
import { formatCurrency, formatDate, PlatformUtil } from '../core/utils';
import { IgxGridSelectionService } from './selection/selection.service';
import { HammerGesturesManager } from '../core/touch';
import { GridSelectionMode } from './common/enums';
import { CellType, ColumnType, GridType, IgxCellTemplateContext, IGX_GRID_BASE, RowType } from './common/grid.interface';
-import { getCurrencySymbol, getLocaleCurrencyCode } from '@angular/common';
import { GridColumnDataType } from '../data-operations/data-util';
import { IgxRowDirective } from './row.directive';
import { ISearchInfo } from './common/events';
import { IgxGridCell } from './grid-public-cell';
import { ISelectionNode } from './common/types';
-import { IgxTooltipDirective } from '../directives/tooltip';
import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService } from '../services/public_api';
import { IgxIconComponent } from '../icon/icon.component';
-import { first, takeUntil, takeWhile } from 'rxjs/operators';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
+import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from './common/pipes';
+import { IgxTooltipDirective } from '../directives/tooltip/tooltip.directive';
+import { IgxTooltipTargetDirective } from '../directives/tooltip/tooltip-target.directive';
+import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
+import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
+import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/date-time-editor.directive';
+import { IgxTimePickerComponent } from '../time-picker/time-picker.component';
+import { IgxDatePickerComponent } from '../date-picker/date-picker.component';
+import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
+import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive';
+import { IgxFocusDirective } from '../directives/focus/focus.directive';
+import { IgxInputDirective } from '../directives/input/input.directive';
+import { IgxInputGroupComponent } from '../input-group/input-group.component';
+import { IgxChipComponent } from '../chips/chip.component';
/**
* Providing reference to `IgxGridCellComponent`:
@@ -55,7 +69,36 @@ import { Subject } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-cell',
templateUrl: './cell.component.html',
- providers: [HammerGesturesManager]
+ providers: [HammerGesturesManager],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgClass,
+ NgTemplateOutlet,
+ DecimalPipe,
+ PercentPipe,
+ CurrencyPipe,
+ DatePipe,
+ ReactiveFormsModule,
+ IgxChipComponent,
+ IgxTextHighlightDirective,
+ IgxIconComponent,
+ IgxInputGroupComponent,
+ IgxInputDirective,
+ IgxFocusDirective,
+ IgxTextSelectionDirective,
+ IgxCheckboxComponent,
+ IgxDatePickerComponent,
+ IgxTimePickerComponent,
+ IgxDateTimeEditorDirective,
+ IgxPrefixDirective,
+ IgxSuffixDirective,
+ IgxTooltipTargetDirective,
+ IgxTooltipDirective,
+ IgxGridCellImageAltPipe,
+ IgxStringReplacePipe,
+ IgxColumnFormatterPipe
+ ]
})
export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellType, AfterViewInit {
private _destroy$ = new Subject();
@@ -1033,7 +1076,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
public activate(event: FocusEvent | KeyboardEvent) {
const node = this.selectionNode;
let shouldEmitSelection = !this.selectionService.isActiveNode(node);
-
+
if (this.selectionService.primaryButton) {
const currentActive = this.selectionService.activeElement;
if (this.cellSelectionMode === GridSelectionMode.single && (event as any)?.ctrlKey && this.selected) {
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts
index b7c6ce1e762..9649d544988 100644
--- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts
@@ -1,23 +1,15 @@
-import {
- Component,
- DoCheck,
- EventEmitter,
- HostBinding,
- Inject,
- Input,
- IterableDiffer,
- IterableDiffers,
- Output,
- Pipe,
- PipeTransform,
- QueryList,
- ViewChildren
-} from '@angular/core';
+import { Component, DoCheck, EventEmitter, HostBinding, Inject, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, forwardRef } from '@angular/core';
import { ColumnDisplayOrder } from '../common/enums';
import { ColumnType, GridType } from '../common/grid.interface';
import { IColumnToggledEventArgs } from '../common/events';
import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
+import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
+import { IgxButtonDirective } from '../../directives/button/button.directive';
+import { IgxInputDirective } from '../../directives/input/input.directive';
+import { FormsModule } from '@angular/forms';
+import { IgxInputGroupComponent } from '../../input-group/input-group.component';
+import { NgIf, NgFor } from '@angular/common';
let NEXT_ID = 0;
/**
@@ -28,7 +20,9 @@ let NEXT_ID = 0;
*/
@Component({
selector: 'igx-column-actions',
- templateUrl: './column-actions.component.html'
+ templateUrl: './column-actions.component.html',
+ standalone: true,
+ imports: [NgIf, IgxInputGroupComponent, FormsModule, IgxInputDirective, NgFor, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)]
})
export class IgxColumnActionsComponent implements DoCheck {
@@ -393,7 +387,10 @@ export class IgxColumnActionsComponent implements DoCheck {
}
}
-@Pipe({ name: 'columnActionEnabled' })
+@Pipe({
+ name: 'columnActionEnabled',
+ standalone: true
+})
export class IgxColumnActionEnabledPipe implements PipeTransform {
constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { }
@@ -419,7 +416,10 @@ export class IgxColumnActionEnabledPipe implements PipeTransform {
}
}
-@Pipe({ name: 'filterActionColumns' })
+@Pipe({
+ name: 'filterActionColumns',
+ standalone: true
+})
export class IgxFilterActionColumnsPipe implements PipeTransform {
constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { }
@@ -446,7 +446,10 @@ export class IgxFilterActionColumnsPipe implements PipeTransform {
}
}
-@Pipe({ name: 'sortActionColumns' })
+@Pipe({
+ name: 'sortActionColumns',
+ standalone: true
+})
export class IgxSortActionColumnsPipe implements PipeTransform {
public transform(collection: ColumnType[], displayOrder: ColumnDisplayOrder, _pipeTrigger: number): ColumnType[] {
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts
deleted file mode 100644
index b0657be02bf..00000000000
--- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IgxGridSharedModules } from '../common/shared.module';
-import { IgxColumnHidingDirective } from './column-hiding.directive';
-import { IgxColumnPinningDirective } from './column-pinning.directive';
-import {
- IgxColumnActionEnabledPipe,
- IgxColumnActionsComponent,
- IgxFilterActionColumnsPipe,
- IgxSortActionColumnsPipe
-} from './column-actions.component';
-import { IgxGridPipesModule } from '../common/grid-pipes.module';
-export * from './column-actions.component';
-export * from './column-hiding.directive';
-export * from './column-pinning.directive';
-
-@NgModule({
- declarations: [
- IgxColumnHidingDirective,
- IgxColumnPinningDirective,
- IgxColumnActionsComponent,
- IgxColumnActionEnabledPipe,
- IgxFilterActionColumnsPipe,
- IgxSortActionColumnsPipe
- ],
- imports: [
- IgxGridSharedModules,
- IgxGridPipesModule
- ],
- exports: [
- IgxColumnHidingDirective,
- IgxColumnPinningDirective,
- IgxColumnActionsComponent,
- IgxColumnActionEnabledPipe,
- IgxFilterActionColumnsPipe,
- IgxSortActionColumnsPipe
- ]
-})
-export class IgxColumnActionsModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts
index 5878211756f..54ba5a48904 100644
--- a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts
@@ -3,7 +3,10 @@ import { ColumnType } from '../common/grid.interface';
import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
import { IgxColumnActionsComponent } from './column-actions.component';
-@Directive({ selector: '[igxColumnHiding]' })
+@Directive({
+ selector: '[igxColumnHiding]',
+ standalone: true
+})
export class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective {
constructor(
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts
index 3915354113a..9f43fbe2527 100644
--- a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts
@@ -3,7 +3,10 @@ import { ColumnType } from '../common/grid.interface';
import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
import { IgxColumnActionsComponent } from './column-actions.component';
-@Directive({ selector: '[igxColumnPinning]' })
+@Directive({
+ selector: '[igxColumnPinning]',
+ standalone: true
+})
export class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective {
constructor(
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/public_api.ts b/projects/igniteui-angular/src/lib/grids/column-actions/public_api.ts
new file mode 100644
index 00000000000..e8c505b1210
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/column-actions/public_api.ts
@@ -0,0 +1,14 @@
+import { IgxColumnActionsComponent } from './column-actions.component';
+import { IgxColumnHidingDirective } from './column-hiding.directive';
+import { IgxColumnPinningDirective } from './column-pinning.directive';
+
+export { IgxColumnActionsComponent } from './column-actions.component';
+export { IgxColumnHidingDirective } from './column-hiding.directive';
+export { IgxColumnPinningDirective } from './column-pinning.directive';
+
+/* NOTE: Grid column actions directives collection for ease-of-use import in standalone components scenario */
+export const IGX_GRID_COLUMN_ACTIONS_DIRECTIVES = [
+ IgxColumnActionsComponent,
+ IgxColumnHidingDirective,
+ IgxColumnPinningDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
index beb82f938cc..58e0fb25303 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
@@ -19,7 +19,8 @@ import { CellType, IgxColumnTemplateContext } from '../common/grid.interface';
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnGroupComponent) }],
selector: 'igx-column-group',
- template: ``
+ template: ``,
+ standalone: true
})
export class IgxColumnGroupComponent extends IgxColumnComponent implements AfterContentInit {
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
index 0aeb2b70e0f..7b93109f410 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
@@ -13,7 +13,8 @@ import { IgxColumnGroupComponent } from './column-group.component';
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnLayoutComponent) }],
selector: 'igx-column-layout',
- template: ``
+ template: ``,
+ standalone: true
})
export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements AfterContentInit {
public childrenVisibleIndexes = [];
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
index 0d5ba16e900..4c908f00172 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -29,7 +29,7 @@ import {
IgxTimeFilteringOperand
} from '../../data-operations/filtering-condition';
import { ISortingStrategy, DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
-import { DisplayDensity } from '../../core/displayDensity';
+import { DisplayDensity } from '../../core/density';
import { IgxRowDirective } from '../row.directive';
import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
import { CellType, ColumnType, GridType, IgxCellTemplateContext, IgxColumnTemplateContext, IgxSummaryTemplateContext, IGX_GRID_BASE } from '../common/grid.interface';
@@ -72,7 +72,8 @@ const DEFAULT_DIGITS_INFO = '1.0-3';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-column',
- template: ``
+ template: ``,
+ standalone: true
})
export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnType {
/**
@@ -473,8 +474,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
return this.widthSetByUser ? this._width : this.defaultWidth;
}
- public autoSize: number;
-
/**
* Sets the `width` of the column.
* ```html
@@ -509,6 +508,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
}
}
+ public autoSize: number;
+
/**
* Sets/gets the maximum `width` of the column.
* ```typescript
@@ -1393,6 +1394,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
}
const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup);
const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup);
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
let col = this;
let vIndex = -1;
@@ -1419,6 +1421,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
this._vIndex = vIndex;
return vIndex;
}
+
/**
* Returns a boolean indicating if the column is a `ColumnGroup`.
* ```typescript
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.module.ts b/projects/igniteui-angular/src/lib/grids/columns/column.module.ts
index c62a7ac9e95..c6e56af5325 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column.module.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column.module.ts
@@ -1,63 +1,18 @@
import { NgModule } from '@angular/core';
-import { IgxColumnComponent } from './column.component';
-import { IgxColumnGroupComponent } from './column-group.component';
-import { IgxColumnLayoutComponent } from './column-layout.component';
-import {
- IgxCellEditorTemplateDirective,
- IgxCellFooterTemplateDirective,
- IgxCellHeaderTemplateDirective,
- IgxCellTemplateDirective,
- IgxCellValidationErrorDirective,
- IgxCollapsibleIndicatorTemplateDirective,
- IgxFilterCellTemplateDirective,
- IgxSummaryTemplateDirective
-} from './templates.directive';
-import {
- IgxColumMaxLengthValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMaxValidatorDirective,
- IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective,
- IgxColumPatternValidatorDirective
-} from './validators.directive';
+import { IGX_GRID_COLUMN_DIRECTIVES, IGX_GRID_VALIDATION_DIRECTIVES } from './public_api';
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
@NgModule({
- declarations: [
- IgxColumnRequiredValidatorDirective,
- IgxColumnMinValidatorDirective,
- IgxColumnMaxValidatorDirective,
- IgxColumnMinLengthValidatorDirective,
- IgxColumMaxLengthValidatorDirective,
- IgxColumnEmailValidatorDirective,
- IgxColumPatternValidatorDirective,
- IgxFilterCellTemplateDirective,
- IgxSummaryTemplateDirective,
- IgxCellTemplateDirective,
- IgxCellValidationErrorDirective,
- IgxCellHeaderTemplateDirective,
- IgxCellFooterTemplateDirective,
- IgxCellEditorTemplateDirective,
- IgxCollapsibleIndicatorTemplateDirective,
- IgxColumnComponent,
- IgxColumnGroupComponent,
- IgxColumnLayoutComponent
+ imports: [
+ ...IGX_GRID_VALIDATION_DIRECTIVES,
+ ...IGX_GRID_COLUMN_DIRECTIVES
],
exports: [
- IgxColumnRequiredValidatorDirective,
- IgxColumnMinValidatorDirective,
- IgxColumnMaxValidatorDirective,
- IgxColumnMinLengthValidatorDirective,
- IgxColumMaxLengthValidatorDirective,
- IgxColumnEmailValidatorDirective,
- IgxColumPatternValidatorDirective,
- IgxFilterCellTemplateDirective,
- IgxSummaryTemplateDirective,
- IgxCellTemplateDirective,
- IgxCellValidationErrorDirective,
- IgxCellHeaderTemplateDirective,
- IgxCellFooterTemplateDirective,
- IgxCellEditorTemplateDirective,
- IgxCollapsibleIndicatorTemplateDirective,
- IgxColumnComponent,
- IgxColumnGroupComponent,
- IgxColumnLayoutComponent
+ ...IGX_GRID_VALIDATION_DIRECTIVES,
+ ...IGX_GRID_COLUMN_DIRECTIVES
]
})
export class IgxGridColumnModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts
index 13b81894089..e4fd5c7ee42 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts
@@ -47,9 +47,7 @@ export interface IFieldPipeArgs {
weekStart?: WEEKDAYS | number;
}
-export interface IColumnPipeArgs extends IFieldPipeArgs {
-
-}
+export type IColumnPipeArgs = IFieldPipeArgs
export interface ISortingOptions {
mode: 'single' | 'multiple';
diff --git a/projects/igniteui-angular/src/lib/grids/columns/public_api.ts b/projects/igniteui-angular/src/lib/grids/columns/public_api.ts
new file mode 100644
index 00000000000..9f50cb970e6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/columns/public_api.ts
@@ -0,0 +1,55 @@
+import { IgxColumnGroupComponent } from './column-group.component';
+import { IgxColumnLayoutComponent } from './column-layout.component';
+import { IgxColumnComponent } from './column.component';
+import {
+ IgxCellEditorTemplateDirective,
+ IgxCellFooterTemplateDirective,
+ IgxCellHeaderTemplateDirective,
+ IgxCellTemplateDirective,
+ IgxCellValidationErrorDirective,
+ IgxCollapsibleIndicatorTemplateDirective,
+ IgxFilterCellTemplateDirective,
+ IgxSummaryTemplateDirective
+} from './templates.directive';
+import {
+ IgxColumnMaxLengthValidatorDirective,
+ IgxColumnEmailValidatorDirective,
+ IgxColumnMaxValidatorDirective,
+ IgxColumnMinLengthValidatorDirective,
+ IgxColumnMinValidatorDirective,
+ IgxColumnRequiredValidatorDirective,
+ IgxColumPatternValidatorDirective
+} from './validators.directive';
+
+export * from './column.component';
+export * from './column-group.component';
+export * from './column-layout.component';
+export * from './templates.directive';
+export * from './validators.directive';
+export * from './interfaces';
+
+/* NOTE: Grid column validation directives collection for ease-of-use import in standalone components scenario */
+export const IGX_GRID_VALIDATION_DIRECTIVES = [
+ IgxColumnRequiredValidatorDirective,
+ IgxColumnMinValidatorDirective,
+ IgxColumnMaxValidatorDirective,
+ IgxColumnEmailValidatorDirective,
+ IgxColumnMinLengthValidatorDirective,
+ IgxColumnMaxLengthValidatorDirective,
+ IgxColumPatternValidatorDirective
+] as const;
+
+/* NOTE: Grid column validation directives collection for ease-of-use import in standalone components scenario */
+export const IGX_GRID_COLUMN_DIRECTIVES = [
+ IgxFilterCellTemplateDirective,
+ IgxSummaryTemplateDirective,
+ IgxCellTemplateDirective,
+ IgxCellValidationErrorDirective,
+ IgxCellHeaderTemplateDirective,
+ IgxCellFooterTemplateDirective,
+ IgxCellEditorTemplateDirective,
+ IgxCollapsibleIndicatorTemplateDirective,
+ IgxColumnComponent,
+ IgxColumnGroupComponent,
+ IgxColumnLayoutComponent
+] as const;
diff --git a/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts b/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts
index c2136966d58..a13e22f9a12 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts
@@ -1,9 +1,9 @@
import { Directive, TemplateRef } from '@angular/core';
import { IgxCellTemplateContext, IgxColumnTemplateContext, IgxSummaryTemplateContext } from '../common/grid.interface';
-
@Directive({
- selector: '[igxFilterCellTemplate]'
+ selector: '[igxFilterCellTemplate]',
+ standalone: true
})
export class IgxFilterCellTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -11,11 +11,12 @@ export class IgxFilterCellTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxFilterCellTemplateDirective,
context: unknown): context is IgxColumnTemplateContext {
return true;
- };
+ }
}
@Directive({
- selector: '[igxCell]'
+ selector: '[igxCell]',
+ standalone: true
})
export class IgxCellTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -23,11 +24,12 @@ export class IgxCellTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxCellTemplateDirective,
context: unknown): context is IgxCellTemplateContext {
return true;
- };
+ }
}
@Directive({
- selector: '[igxCellValidationError]'
+ selector: '[igxCellValidationError]',
+ standalone: true
})
export class IgxCellValidationErrorDirective {
constructor(public template: TemplateRef) { }
@@ -35,11 +37,12 @@ export class IgxCellValidationErrorDirective {
public static ngTemplateContextGuard(_directive: IgxCellValidationErrorDirective,
context: unknown): context is IgxCellTemplateContext {
return true;
- };
+ }
}
@Directive({
- selector: '[igxHeader]'
+ selector: '[igxHeader]',
+ standalone: true
})
export class IgxCellHeaderTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -47,21 +50,23 @@ export class IgxCellHeaderTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxCellHeaderTemplateDirective,
context: unknown): context is IgxColumnTemplateContext {
return true;
- };
+ }
}
/**
* @hidden
*/
@Directive({
- selector: '[igxFooter]'
+ selector: '[igxFooter]',
+ standalone: true
})
export class IgxCellFooterTemplateDirective {
constructor(public template: TemplateRef) { }
}
@Directive({
- selector: '[igxCellEditor]'
+ selector: '[igxCellEditor]',
+ standalone: true
})
export class IgxCellEditorTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -69,11 +74,12 @@ export class IgxCellEditorTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxCellEditorTemplateDirective,
context: unknown): context is IgxCellTemplateContext {
return true;
- };
+ }
}
@Directive({
- selector: '[igxCollapsibleIndicator]'
+ selector: '[igxCollapsibleIndicator]',
+ standalone: true
})
export class IgxCollapsibleIndicatorTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -81,11 +87,12 @@ export class IgxCollapsibleIndicatorTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxCollapsibleIndicatorTemplateDirective,
context: unknown): context is IgxColumnTemplateContext {
return true;
- };
+ }
}
@Directive({
- selector: '[igxSummary]'
+ selector: '[igxSummary]',
+ standalone: true
})
export class IgxSummaryTemplateDirective {
constructor(public template: TemplateRef) { }
@@ -93,5 +100,5 @@ export class IgxSummaryTemplateDirective {
public static ngTemplateContextGuard(_directive: IgxSummaryTemplateDirective,
context: unknown): context is IgxSummaryTemplateContext {
return true;
- };
+ }
}
diff --git a/projects/igniteui-angular/src/lib/grids/columns/validators.directive.ts b/projects/igniteui-angular/src/lib/grids/columns/validators.directive.ts
index 59a6731e5fa..564ec4b2aef 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/validators.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/validators.directive.ts
@@ -1,15 +1,15 @@
import { Directive } from '@angular/core';
import { RequiredValidator, NG_VALIDATORS, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms';
-
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[required]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumnRequiredValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnRequiredValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumnRequiredValidatorDirective extends RequiredValidator {
}
@@ -18,10 +18,11 @@ export class IgxColumnRequiredValidatorDirective extends RequiredValidator {
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[min]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumnMinValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnMinValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumnMinValidatorDirective extends MinValidator { }
@@ -30,10 +31,11 @@ export class IgxColumnMinValidatorDirective extends MinValidator { }
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[max]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumnMaxValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnMaxValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumnMaxValidatorDirective extends MaxValidator { }
@@ -42,10 +44,11 @@ export class IgxColumnMaxValidatorDirective extends MaxValidator { }
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[email]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumnEmailValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnEmailValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumnEmailValidatorDirective extends EmailValidator { }
@@ -54,10 +57,11 @@ export class IgxColumnEmailValidatorDirective extends EmailValidator { }
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[minlength]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumnMinLengthValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnMinLengthValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumnMinLengthValidatorDirective extends MinLengthValidator { }
@@ -65,22 +69,24 @@ export class IgxColumnMinLengthValidatorDirective extends MinLengthValidator { }
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[maxlength]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumMaxLengthValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumnMaxLengthValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
-export class IgxColumMaxLengthValidatorDirective extends MaxLengthValidator {
+export class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
}
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-column[pattern]',
providers: [{
- provide: NG_VALIDATORS,
- useExisting: IgxColumPatternValidatorDirective,
- multi: true
- }]
+ provide: NG_VALIDATORS,
+ useExisting: IgxColumPatternValidatorDirective,
+ multi: true
+ }],
+ standalone: true
})
export class IgxColumPatternValidatorDirective extends PatternValidator {
}
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts b/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts
deleted file mode 100644
index f119380ff91..00000000000
--- a/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
- IgxGridFilterConditionPipe,
- IgxGridTransactionPipe,
- IgxGridNotGroupedPipe,
- IgxGridTopLevelColumns,
- IgxGridCellStylesPipe,
- IgxGridCellStyleClassesPipe,
- IgxGridPaginatorOptionsPipe,
- IgxHasVisibleColumnsPipe,
- IgxGridRowPinningPipe,
- IgxGridDataMapperPipe,
- IgxStringReplacePipe,
- IgxGridTransactionStatePipe,
- IgxColumnFormatterPipe,
- IgxSummaryFormatterPipe,
- IgxGridAddRowPipe,
- IgxGridRowClassesPipe,
- IgxGridRowStylesPipe,
- IgxGridCellImageAltPipe,
-} from './pipes';
-export * from './pipes';
-
-@NgModule({
- declarations: [
- IgxGridFilterConditionPipe,
- IgxGridTransactionPipe,
- IgxGridNotGroupedPipe,
- IgxGridTopLevelColumns,
- IgxGridCellStylesPipe,
- IgxGridCellStyleClassesPipe,
- IgxGridCellImageAltPipe,
- IgxGridPaginatorOptionsPipe,
- IgxHasVisibleColumnsPipe,
- IgxGridRowPinningPipe,
- IgxGridDataMapperPipe,
- IgxStringReplacePipe,
- IgxGridTransactionStatePipe,
- IgxGridAddRowPipe,
- IgxColumnFormatterPipe,
- IgxSummaryFormatterPipe,
- IgxGridRowClassesPipe,
- IgxGridRowStylesPipe
- ],
- exports: [
- IgxGridFilterConditionPipe,
- IgxGridTransactionPipe,
- IgxGridNotGroupedPipe,
- IgxGridTopLevelColumns,
- IgxGridCellStylesPipe,
- IgxGridCellStyleClassesPipe,
- IgxGridCellImageAltPipe,
- IgxGridPaginatorOptionsPipe,
- IgxHasVisibleColumnsPipe,
- IgxGridRowPinningPipe,
- IgxGridDataMapperPipe,
- IgxStringReplacePipe,
- IgxGridTransactionStatePipe,
- IgxGridAddRowPipe,
- IgxColumnFormatterPipe,
- IgxSummaryFormatterPipe,
- IgxGridRowClassesPipe,
- IgxGridRowStylesPipe
- ],
- imports: [
- CommonModule
- ]
- })
-export class IgxGridPipesModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index f07aecdff62..1888857d285 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -1,4 +1,4 @@
-import { FilterMode, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GridValidationTrigger } from './enums';
+import { ColumnPinningPosition, FilterMode, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GridValidationTrigger, RowPinningPosition } from './enums';
import {
ISearchInfo, IGridCellEventArgs, IRowSelectionEventArgs, IColumnSelectionEventArgs, IGridEditEventArgs,
IPinColumnCancellableEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs,
@@ -8,7 +8,7 @@ import {
IActiveNodeChangeEventArgs,
ICellPosition, IFilteringEventArgs, IColumnResizeEventArgs, IRowToggleEventArgs, IGridToolbarExportEventArgs, IPinRowEventArgs
} from '../common/events';
-import { DisplayDensity, IDensityChangedEventArgs } from '../../core/displayDensity';
+import { DisplayDensity, IDensityChangedEventArgs } from '../../core/density';
import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
import { IGridResourceStrings } from '../../core/i18n/grid-resources';
@@ -33,7 +33,6 @@ import { ISortingExpression, ISortingStrategy, SortingDirection } from '../../da
import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
import { OverlaySettings } from '../../services/overlay/utilities';
-import { IPinningConfig } from '../grid.common';
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
@@ -70,6 +69,7 @@ export interface CellType {
title?: any;
width: string;
visibleColumnIndex?: number;
+ defaultErrorTemplate?: TemplateRef;
update: (value: any) => void;
setEditMode?(value: boolean): void;
calculateSizeToFit?(range: any): number;
@@ -652,7 +652,6 @@ export interface GridType extends IGridDataBindable {
toggleAll?(): void;
generateRowPath?(rowId: any): any[];
preventHeaderScroll?(args: any): void;
-
}
/**
@@ -816,3 +815,11 @@ export interface IgxHeadSelectorTemplateContext {
export interface IgxSummaryTemplateContext {
$implicit: IgxSummaryResult[]
}
+
+/**
+ * An interface describing settings for row/column pinning position.
+ */
+export interface IPinningConfig {
+ columns?: ColumnPinningPosition;
+ rows?: RowPinningPosition;
+}
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
index 2614bd5418b..a7253da47e7 100644
--- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -14,7 +14,10 @@ interface GridStyleCSSProperty {
* @hidden
* @internal
*/
-@Pipe({ name: 'igxCellStyleClasses' })
+@Pipe({
+ name: 'igxCellStyleClasses',
+ standalone: true
+})
export class IgxGridCellStyleClassesPipe implements PipeTransform {
public transform(cssClasses: GridStyleCSSProperty, _: any, data: any, field: string, index: number, __: number): string {
@@ -42,7 +45,8 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform {
* @internal
*/
@Pipe({
- name: 'igxCellStyles'
+ name: 'igxCellStyles',
+ standalone: true
})
export class IgxGridCellStylesPipe implements PipeTransform {
@@ -67,7 +71,8 @@ export class IgxGridCellStylesPipe implements PipeTransform {
* @internal
*/
@Pipe({
- name: 'igxCellImageAlt'
+ name: 'igxCellImageAlt',
+ standalone: true
})
export class IgxGridCellImageAltPipe implements PipeTransform {
@@ -86,7 +91,10 @@ export class IgxGridCellImageAltPipe implements PipeTransform {
* @hidden
* @internal
*/
-@Pipe({ name: 'igxGridRowClasses' })
+@Pipe({
+ name: 'igxGridRowClasses',
+ standalone: true
+})
export class IgxGridRowClassesPipe implements PipeTransform {
public row: RowType;
@@ -143,7 +151,10 @@ export class IgxGridRowClassesPipe implements PipeTransform {
* @hidden
* @internal
*/
-@Pipe({ name: 'igxGridRowStyles' })
+@Pipe({
+ name: 'igxGridRowStyles',
+ standalone: true
+})
export class IgxGridRowStylesPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -168,7 +179,8 @@ export class IgxGridRowStylesPipe implements PipeTransform {
* @internal
*/
@Pipe({
- name: 'igxNotGrouped'
+ name: 'igxNotGrouped',
+ standalone: true
})
export class IgxGridNotGroupedPipe implements PipeTransform {
@@ -182,7 +194,8 @@ export class IgxGridNotGroupedPipe implements PipeTransform {
* @internal
*/
@Pipe({
- name: 'igxTopLevel'
+ name: 'igxTopLevel',
+ standalone: true
})
export class IgxGridTopLevelColumns implements PipeTransform {
@@ -197,7 +210,8 @@ export class IgxGridTopLevelColumns implements PipeTransform {
*/
@Pipe({
name: 'filterCondition',
- pure: true
+ pure: true,
+ standalone: true
})
export class IgxGridFilterConditionPipe implements PipeTransform {
@@ -210,7 +224,10 @@ export class IgxGridFilterConditionPipe implements PipeTransform {
* @hidden
* @internal
*/
-@Pipe({ name: 'gridTransaction' })
+@Pipe({
+ name: 'gridTransaction',
+ standalone: true
+})
export class IgxGridTransactionPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -233,7 +250,10 @@ export class IgxGridTransactionPipe implements PipeTransform {
* @hidden
* @internal
*/
-@Pipe({ name: 'paginatorOptions' })
+@Pipe({
+ name: 'paginatorOptions',
+ standalone: true
+})
export class IgxGridPaginatorOptionsPipe implements PipeTransform {
public transform(values: Array) {
return Array.from(new Set([...values])).sort((a, b) => a - b);
@@ -244,7 +264,10 @@ export class IgxGridPaginatorOptionsPipe implements PipeTransform {
* @hidden
* @internal
*/
-@Pipe({ name: 'visibleColumns' })
+@Pipe({
+ name: 'visibleColumns',
+ standalone: true
+})
export class IgxHasVisibleColumnsPipe implements PipeTransform {
public transform(values: any[], hasVisibleColumns) {
if (!(values && values.length)) {
@@ -271,7 +294,10 @@ function buildDataView(): MethodDecorator {
/**
* @hidden
*/
-@Pipe({ name: 'gridRowPinning' })
+@Pipe({
+ name: 'gridRowPinning',
+ standalone: true
+})
export class IgxGridRowPinningPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -296,7 +322,10 @@ export class IgxGridRowPinningPipe implements PipeTransform {
}
}
-@Pipe({ name: 'dataMapper' })
+@Pipe({
+ name: 'dataMapper',
+ standalone: true
+})
export class IgxGridDataMapperPipe implements PipeTransform {
public transform(data: any[], field: string, _: number, val: any, isNestedPath: boolean) {
@@ -304,7 +333,10 @@ export class IgxGridDataMapperPipe implements PipeTransform {
}
}
-@Pipe({ name: 'igxStringReplace' })
+@Pipe({
+ name: 'igxStringReplace',
+ standalone: true
+})
export class IgxStringReplacePipe implements PipeTransform {
public transform(value: string, search: string | RegExp, replacement: string): string {
@@ -312,7 +344,10 @@ export class IgxStringReplacePipe implements PipeTransform {
}
}
-@Pipe({ name: 'transactionState' })
+@Pipe({
+ name: 'transactionState',
+ standalone: true
+})
export class IgxGridTransactionStatePipe implements PipeTransform {
public transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any, ___: any) {
@@ -330,7 +365,10 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
}
}
-@Pipe({ name: 'columnFormatter' })
+@Pipe({
+ name: 'columnFormatter',
+ standalone: true
+})
export class IgxColumnFormatterPipe implements PipeTransform {
public transform(value: any, formatter: (v: any, data: any, columnData? :any) => any, rowData: any, columnData? : any) {
@@ -338,7 +376,10 @@ export class IgxColumnFormatterPipe implements PipeTransform {
}
}
-@Pipe({ name: 'summaryFormatter' })
+@Pipe({
+ name: 'summaryFormatter',
+ standalone: true
+})
export class IgxSummaryFormatterPipe implements PipeTransform {
public transform(summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand,
@@ -347,7 +388,10 @@ export class IgxSummaryFormatterPipe implements PipeTransform {
}
}
-@Pipe({ name: 'gridAddRow' })
+@Pipe({
+ name: 'gridAddRow',
+ standalone: true
+})
export class IgxGridAddRowPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
diff --git a/projects/igniteui-angular/src/lib/grids/common/public_api.ts b/projects/igniteui-angular/src/lib/grids/common/public_api.ts
new file mode 100644
index 00000000000..e3062818a56
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/common/public_api.ts
@@ -0,0 +1,5 @@
+export * from './enums';
+export * from './events';
+export * from './grid.interface';
+export * from './strategy';
+export * from './types';
diff --git a/projects/igniteui-angular/src/lib/grids/common/shared.module.ts b/projects/igniteui-angular/src/lib/grids/common/shared.module.ts
deleted file mode 100644
index d1befe6c238..00000000000
--- a/projects/igniteui-angular/src/lib/grids/common/shared.module.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { IgxButtonModule } from '../../directives/button/button.directive';
-import { IgxIconModule } from '../../icon/public_api';
-import { IgxRippleModule } from '../../directives/ripple/ripple.directive';
-import { IgxInputGroupModule } from '../../input-group/public_api';
-import { IgxFocusModule } from '../../directives/focus/focus.directive';
-import { IgxToggleModule } from '../../directives/toggle/toggle.directive';
-import { IgxForOfModule } from '../../directives/for-of/for_of.directive';
-import { IgxTemplateOutletModule } from '../../directives/template-outlet/template_outlet.directive';
-import { IgxTextHighlightModule } from '../../directives/text-highlight/text-highlight.directive';
-import { IgxTextSelectionModule } from '../../directives/text-selection/text-selection.directive';
-import { IgxCheckboxModule } from '../../checkbox/checkbox.component';
-import { IgxBadgeModule } from '../../badge/badge.component';
-import { IgxChipsModule } from '../../chips/chips.module';
-import { IgxDragDropModule } from '../../directives/drag-drop/drag-drop.directive';
-import { IgxButtonGroupModule } from '../../buttonGroup/buttonGroup.component';
-import { IgxProgressBarModule } from '../../progressbar/progressbar.component';
-import { IgxSelectModule } from '../../select/select.module';
-import { IgxDropDownModule } from '../../drop-down/public_api';
-import { IgxGridStateModule } from '../state.directive';
-import { IgxSnackbarModule } from '../../snackbar/snackbar.component';
-import { IgxDatePickerModule } from '../../date-picker/date-picker.module';
-import { IgxTimePickerModule } from '../../time-picker/time-picker.component';
-import { IgxDateTimeEditorModule } from '../../directives/date-time-editor/date-time-editor.directive';
-
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- IgxButtonModule,
- IgxDatePickerModule,
- IgxIconModule,
- IgxRippleModule,
- IgxInputGroupModule,
- IgxFocusModule,
- IgxToggleModule,
- IgxForOfModule,
- IgxTemplateOutletModule,
- IgxTextHighlightModule,
- IgxTextSelectionModule,
- IgxCheckboxModule,
- IgxBadgeModule,
- IgxChipsModule,
- IgxDragDropModule,
- IgxDropDownModule,
- IgxButtonGroupModule,
- IgxProgressBarModule,
- IgxSelectModule,
- IgxGridStateModule,
- IgxSnackbarModule,
- IgxTimePickerModule,
- IgxDateTimeEditorModule
- ],
- exports: [
- CommonModule,
- FormsModule,
- IgxButtonModule,
- IgxDatePickerModule,
- IgxIconModule,
- IgxRippleModule,
- IgxInputGroupModule,
- IgxFocusModule,
- IgxToggleModule,
- IgxForOfModule,
- IgxTemplateOutletModule,
- IgxTextHighlightModule,
- IgxGridStateModule,
- IgxTextSelectionModule,
- IgxCheckboxModule,
- IgxBadgeModule,
- IgxChipsModule,
- IgxDragDropModule,
- IgxDropDownModule,
- IgxButtonGroupModule,
- IgxProgressBarModule,
- IgxSelectModule,
- IgxSnackbarModule,
- IgxTimePickerModule,
- IgxDateTimeEditorModule
- ]
-})
-export class IgxGridSharedModules {}
diff --git a/projects/igniteui-angular/src/lib/grids/common/strategy.ts b/projects/igniteui-angular/src/lib/grids/common/strategy.ts
index e4b7582dbee..28dfa9185cb 100644
--- a/projects/igniteui-angular/src/lib/grids/common/strategy.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/strategy.ts
@@ -95,7 +95,7 @@ export class IgxSorting implements IGridSortingStrategy {
return result;
}
- protected getFieldValue(obj: T, key: string, isDate: boolean = false, isTime: boolean = false) {
+ protected getFieldValue(obj: T, key: string, isDate = false, isTime = false) {
let resolvedValue = resolveNestedPath(obj, key);
const date = parseDate(resolvedValue);
if (date && isDate && isTime) {
@@ -112,8 +112,8 @@ export class IgxSorting implements IGridSortingStrategy {
data: T[],
index: number,
expression: IGroupingExpression,
- isDate: boolean = false,
- isTime: boolean = false,
+ isDate = false,
+ isTime = false,
isString: boolean,
groupingComparer?: (a: any, b: any, currRec: any, groupRec: any) => number
): T[] {
@@ -145,7 +145,7 @@ export class IgxSorting implements IGridSortingStrategy {
private sortDataRecursive(
data: T[],
expressions: ISortingExpression[],
- expressionIndex: number = 0,
+ expressionIndex = 0,
grid: GridType
): T[] {
let i: number;
@@ -215,7 +215,7 @@ export class NoopSortingStrategy implements IGridSortingStrategy {
export class IgxDataRecordSorting extends IgxSorting {
- protected override getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
+ protected override getFieldValue(obj: any, key: string, isDate = false, isTime = false): any {
return super.getFieldValue(obj.data, key, isDate, isTime);
}
}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts
index 15ff1a33cd5..10c0308883e 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts
@@ -2,16 +2,19 @@ import {
Component, Input, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding
} from '@angular/core';
import { IgxOverlayService } from '../../../services/overlay/overlay';
-import { IDragStartEventArgs } from '../../../directives/drag-drop/drag-drop.directive';
+import { IDragStartEventArgs, IgxDragDirective, IgxDragHandleDirective } from '../../../directives/drag-drop/drag-drop.directive';
import { Subject } from 'rxjs';
import { IActiveNode } from '../../grid-navigation.service';
import { PlatformUtil } from '../../../core/utils';
import { FieldType, GridType } from '../../common/grid.interface';
-import { DisplayDensity } from '../../../core/displayDensity';
+import { DisplayDensity } from '../../../core/density';
import { IgxQueryBuilderComponent } from '../../../query-builder/query-builder.component';
import { CurrentResourceStrings } from '../../../core/i18n/resources';
import { GridResourceStringsEN } from '../../../core/i18n/grid-resources';
import { IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxQueryBuilderHeaderComponent } from '../../../query-builder/query-builder-header.component';
+import { NgIf, NgClass } from '@angular/common';
/**
* A component used for presenting advanced filtering UI for a Grid.
@@ -26,7 +29,9 @@ import { IFilteringExpressionsTree } from '../../../data-operations/filtering-ex
*/
@Component({
selector: 'igx-advanced-filtering-dialog',
- templateUrl: './advanced-filtering-dialog.component.html'
+ templateUrl: './advanced-filtering-dialog.component.html',
+ standalone: true,
+ imports: [NgIf, IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective]
})
export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts
deleted file mode 100644
index 492f18fd1d2..00000000000
--- a/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IgxGridFilteringCellComponent } from './grid-filtering-cell.component';
-import { IgxGridFilteringRowComponent } from './grid-filtering-row.component';
-import { IgxGridSharedModules } from '../../common/shared.module';
-import { IgxGridPipesModule } from '../../common/grid-pipes.module';
-
-
-export { IgxGridFilteringCellComponent as θIgxGridFilteringCellComponent } from './grid-filtering-cell.component';
-export { IgxGridFilteringRowComponent as θIgxGridFilteringRowComponent } from './grid-filtering-row.component';
-
-@NgModule({
- declarations: [
- IgxGridFilteringCellComponent,
- IgxGridFilteringRowComponent
- ],
- imports: [
- IgxGridSharedModules,
- IgxGridPipesModule
- ],
- exports: [
- IgxGridFilteringCellComponent,
- IgxGridFilteringRowComponent
- ]
-})
-export class IgxGridFilteringModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts
index e2ea3906696..8e7c85f0916 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts
@@ -13,11 +13,15 @@ import {
} from '@angular/core';
import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
import { IgxFilteringService } from '../grid-filtering.service';
-import { DisplayDensity } from '../../../core/displayDensity';
+import { DisplayDensity } from '../../../core/density';
import { ExpressionUI } from '../excel-style/common';
import { IgxChipsAreaComponent } from '../../../chips/chips-area.component';
import { IBaseChipEventArgs, IgxChipComponent } from '../../../chips/chip.component';
import { ColumnType } from '../../common/grid.interface';
+import { IgxBadgeComponent } from '../../../badge/badge.component';
+import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
+import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
+import { IgxIconComponent } from '../../../icon/icon.component';
/**
* @hidden
@@ -25,7 +29,9 @@ import { ColumnType } from '../../common/grid.interface';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-filtering-cell',
- templateUrl: './grid-filtering-cell.component.html'
+ templateUrl: './grid-filtering-cell.component.html',
+ standalone: true,
+ imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgFor, NgIf, NgClass, IgxBadgeComponent, NgTemplateOutlet]
})
export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck {
@Input()
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
index ae22b004a5d..e59ce558cc8 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
@@ -15,16 +15,16 @@ import {
OnDestroy
} from '@angular/core';
import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util';
-import { IgxDropDownComponent, ISelectionEventArgs } from '../../../drop-down/public_api';
+import { IgxDropDownComponent } from '../../../drop-down/drop-down.component';
import { IFilteringOperation } from '../../../data-operations/filtering-condition';
import { FilteringLogic, IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
import { HorizontalAlignment, VerticalAlignment, OverlaySettings } from '../../../services/overlay/utilities';
import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy';
-import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../../chips/public_api';
import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component';
+import { ISelectionEventArgs } from '../../../drop-down/drop-down.common';
import { IgxFilteringService } from '../grid-filtering.service';
import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll';
-import { DisplayDensity } from '../../../core/displayDensity';
+import { DisplayDensity } from '../../../core/density';
import { IgxDatePickerComponent } from '../../../date-picker/date-picker.component';
import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component';
import { isEqual, PlatformUtil } from '../../../core/utils';
@@ -32,6 +32,19 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ExpressionUI } from '../excel-style/common';
import { ColumnType } from '../../common/grid.interface';
+import { IgxRippleDirective } from '../../../directives/ripple/ripple.directive';
+import { IgxChipComponent, IBaseChipEventArgs } from '../../../chips/chip.component';
+import { IgxChipsAreaComponent } from '../../../chips/chips-area.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxDateTimeEditorDirective } from '../../../directives/date-time-editor/date-time-editor.directive';
+import { IgxPickerToggleComponent, IgxPickerClearComponent } from '../../../date-common/picker-icons.common';
+import { IgxSuffixDirective } from '../../../directives/suffix/suffix.directive';
+import { IgxInputDirective } from '../../../directives/input/input.directive';
+import { IgxDropDownItemNavigationDirective } from '../../../drop-down/drop-down-navigation.directive';
+import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
+import { IgxInputGroupComponent } from '../../../input-group/input-group.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgFor, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
/**
* @hidden
@@ -39,7 +52,9 @@ import { ColumnType } from '../../common/grid.interface';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-filtering-row',
- templateUrl: './grid-filtering-row.component.html'
+ templateUrl: './grid-filtering-row.component.html',
+ standalone: true,
+ imports: [NgFor, IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective]
})
export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
@Input()
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
index 3cdf3c2966a..bf8d12a7406 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectorRef, Directive, ElementRef, EventEmitter } from '@angular/core';
-import { DisplayDensity } from '../../../core/displayDensity';
+import { DisplayDensity } from '../../../core/density';
import { PlatformUtil } from '../../../core/utils';
import { IgxOverlayService } from '../../../services/overlay/overlay';
import { ExpressionUI, FilterListItem } from './common';
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts
index b1231dd424b..09856c6aed6 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts
@@ -1,13 +1,17 @@
import { Component } from '@angular/core';
import { PlatformUtil } from '../../../core/utils';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgIf, NgClass } from '@angular/common';
/**
* A component used for presenting Excel style clear filters UI.
*/
@Component({
selector: 'igx-excel-style-clear-filters',
- templateUrl: './excel-style-clear-filters.component.html'
+ templateUrl: './excel-style-clear-filters.component.html',
+ standalone: true,
+ imports: [NgIf, NgClass, IgxIconComponent]
})
export class IgxExcelStyleClearFiltersComponent {
constructor(public esf: BaseFilteringComponent, protected platform: PlatformUtil) { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts
index 0a36ffa74ee..0ec7e25b1f3 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts
@@ -4,13 +4,18 @@ import { takeUntil } from 'rxjs/operators';
import { GridColumnDataType } from '../../../data-operations/data-util';
import { IFilteringOperation } from '../../../data-operations/filtering-condition';
import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
-import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down/public_api';
import { IgxExcelStyleCustomDialogComponent } from './excel-style-custom-dialog.component';
import { PlatformUtil } from '../../../core/utils';
import { BaseFilteringComponent } from './base-filtering.component';
import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy';
import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy';
import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../../services/overlay/utilities';
+import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component';
+import { IgxDropDownComponent } from '../../../drop-down/drop-down.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxDropDownItemNavigationDirective } from '../../../drop-down/drop-down-navigation.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { ISelectionEventArgs } from '../../../drop-down/drop-down.common';
/**
@@ -18,7 +23,9 @@ import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../.
*/
@Component({
selector: 'igx-excel-style-conditional-filter',
- templateUrl: './excel-style-conditional-filter.component.html'
+ templateUrl: './excel-style-conditional-filter.component.html',
+ standalone: true,
+ imports: [NgIf, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent]
})
export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts
index 2c51cc11584..34c513069eb 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts
@@ -31,13 +31,18 @@ import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignme
import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy';
import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy';
import { IgxOverlayService } from '../../../services/overlay/overlay';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { NgClass, NgIf, NgFor } from '@angular/common';
/**
* @hidden
*/
@Component({
selector: 'igx-excel-style-custom-dialog',
- templateUrl: './excel-style-custom-dialog.component.html'
+ templateUrl: './excel-style-custom-dialog.component.html',
+ standalone: true,
+ imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent]
})
export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
@Input()
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts
index 82b2396f28e..bc494d1dde1 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts
@@ -1,16 +1,29 @@
import { Component, ViewChild } from '@angular/core';
import { IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component';
import { IgxInputDirective } from '../../../directives/input/input.directive';
-import { IgxDatePickerComponent } from '../../../date-picker/public_api';
import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component';
-import { getLocaleFirstDayOfWeek } from "@angular/common";
+import { getLocaleFirstDayOfWeek, NgIf, NgFor } from "@angular/common";
+import { IgxOverlayOutletDirective } from '../../../directives/toggle/toggle.directive';
+import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxDateTimeEditorDirective } from '../../../directives/date-time-editor/date-time-editor.directive';
+import { FormsModule } from '@angular/forms';
+import { IgxInputGroupComponent } from '../../../input-group/input-group.component';
+import { IgxPickerToggleComponent, IgxPickerClearComponent } from '../../../date-common/picker-icons.common';
+import { IgxDatePickerComponent } from '../../../date-picker/date-picker.component';
+import { IgxSelectItemComponent } from '../../../select/select-item.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
+import { IgxSelectComponent } from '../../../select/select.component';
/**
* @hidden
*/
@Component({
selector: 'igx-excel-style-date-expression',
- templateUrl: './excel-style-date-expression.component.html'
+ templateUrl: './excel-style-date-expression.component.html',
+ standalone: true,
+ imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective]
})
export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent {
@ViewChild('input', { read: IgxInputDirective, static: false })
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts
index 9053be5d1dc..72d5a2b67ea 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts
@@ -15,12 +15,18 @@ import { FilteringLogic } from '../../../data-operations/filtering-expression.in
import { DisplayDensity } from '../../../core/density';
import { IgxSelectComponent } from '../../../select/select.component';
import { IgxOverlayOutletDirective } from '../../../directives/toggle/toggle.directive';
-import { IgxInputDirective } from '../../../input-group/public_api';
import { ExpressionUI } from './common';
import { ColumnType } from '../../common/grid.interface';
import { OverlaySettings } from '../../../services/overlay/utilities';
import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy';
import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxInputDirective } from '../../../directives/input/input.directive';
+import { IgxInputGroupComponent } from '../../../input-group/input-group.component';
+import { IgxSelectItemComponent } from '../../../select/select-item.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgIf, NgFor } from '@angular/common';
+import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
/**
* @hidden
@@ -35,7 +41,9 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs {
*/
@Component({
selector: 'igx-excel-style-default-expression',
- templateUrl: './excel-style-default-expression.component.html'
+ templateUrl: './excel-style-default-expression.component.html',
+ standalone: true,
+ imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective]
})
export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
@Input()
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.html
similarity index 100%
rename from projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html
rename to projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.html
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts
similarity index 93%
rename from projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
rename to projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts
index b1ad376952a..50d2a0b6cff 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts
@@ -25,20 +25,31 @@ import { Subscription } from 'rxjs';
import { DisplayDensity } from '../../../core/density';
import { GridSelectionMode } from '../../common/enums';
import { IgxFilterItem } from '../../../data-operations/filtering-strategy';
-import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common';
+import { formatNumber, formatPercent, getLocaleCurrencyCode, NgIf, NgClass } from '@angular/common';
import { BaseFilteringComponent } from './base-filtering.component';
import { ExpressionUI, FilterListItem, generateExpressionsList } from './common';
import { ColumnType, GridType, IGX_GRID_BASE } from '../../common/grid.interface';
import { IgxOverlayService } from '../../../services/overlay/overlay';
import { SortingDirection } from '../../../data-operations/sorting-strategy';
+import { IgxExcelStyleSearchComponent } from './excel-style-search.component';
+import { IgxExcelStyleConditionalFilterComponent } from './excel-style-conditional-filter.component';
+import { IgxExcelStyleClearFiltersComponent } from './excel-style-clear-filters.component';
+import { IgxExcelStyleSelectingComponent } from './excel-style-selecting.component';
+import { IgxExcelStyleHidingComponent } from './excel-style-hiding.component';
+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';
@Directive({
- selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]'
+ selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]',
+ standalone: true
})
export class IgxExcelStyleColumnOperationsTemplateDirective { }
@Directive({
- selector: 'igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]'
+ selector: 'igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]',
+ standalone: true
})
export class IgxExcelStyleFilterOperationsTemplateDirective { }
@@ -55,9 +66,11 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { }
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
- providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent)}],
+ providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }],
selector: 'igx-grid-excel-style-filtering',
- templateUrl: './grid.excel-style-filtering.component.html'
+ templateUrl: './excel-style-filtering.component.html',
+ standalone: true,
+ imports: [IgxExcelStyleHeaderComponent, NgIf, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass]
})
export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements OnDestroy {
@@ -484,7 +497,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
this.generateListData();
}
- private generateFilterValues(isDateColumn: boolean = false) {
+ private generateFilterValues(isDateColumn = false) {
let filterValues;
if (isDateColumn) {
@@ -603,7 +616,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
}
private generateFilterListItems(values: IgxFilterItem[], shouldUpdateSelection: boolean, parent?: FilterListItem) {
- let filterListItems = [];
+ const filterListItems = [];
values?.forEach(element => {
const value = element.value;
const hasValue = value !== undefined && value !== null && value !== '';
@@ -679,7 +692,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
return blanks;
}
- private getFilterItemLabel(value: any, applyFormatter: boolean = true, data?: any) {
+ private getFilterItemLabel(value: any, applyFormatter = true, data?: any) {
if (this.column.formatter) {
if (applyFormatter) {
return this.column.formatter(value, data);
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts
index 608e6990c95..596ba1f9664 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts
@@ -1,12 +1,17 @@
import { Component, Input } from '@angular/core';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { NgIf, NgClass } from '@angular/common';
/**
* A component used for presenting Excel style header UI.
*/
@Component({
selector: 'igx-excel-style-header',
- templateUrl: './excel-style-header.component.html'
+ templateUrl: './excel-style-header.component.html',
+ standalone: true,
+ imports: [NgIf, IgxButtonDirective, NgClass, IgxIconComponent]
})
export class IgxExcelStyleHeaderComponent {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts
index ec4d85d1cd7..b790dec8499 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts
@@ -1,12 +1,16 @@
import { Component } from '@angular/core';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgIf } from '@angular/common';
/**
* A component used for presenting Excel style column hiding UI.
*/
@Component({
selector: 'igx-excel-style-hiding',
- templateUrl: './excel-style-hiding.component.html'
+ templateUrl: './excel-style-hiding.component.html',
+ standalone: true,
+ imports: [NgIf, IgxIconComponent]
})
export class IgxExcelStyleHidingComponent {
constructor(public esf: BaseFilteringComponent) { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
index bd0b60f4ea5..e3e3b7a6db9 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
@@ -1,13 +1,19 @@
import { Component, HostBinding } from '@angular/core';
import { ColumnType } from '../../common/grid.interface';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
+import { NgIf } from '@angular/common';
/**
* A component used for presenting Excel style column moving UI.
*/
@Component({
selector: 'igx-excel-style-moving',
- templateUrl: './excel-style-moving.component.html'
+ templateUrl: './excel-style-moving.component.html',
+ standalone: true,
+ imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent]
})
export class IgxExcelStyleMovingComponent {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts
index 7132c46cfac..5b9a66cf2df 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts
@@ -1,12 +1,16 @@
import { Component } from '@angular/core';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgIf, NgClass } from '@angular/common';
/**
* A component used for presenting Excel style column pinning UI.
*/
@Component({
selector: 'igx-excel-style-pinning',
- templateUrl: './excel-style-pinning.component.html'
+ templateUrl: './excel-style-pinning.component.html',
+ standalone: true,
+ imports: [NgIf, NgClass, IgxIconComponent]
})
export class IgxExcelStylePinningComponent {
constructor(public esf: BaseFilteringComponent) { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
index 508fd9bf678..254b15f6a43 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -19,22 +19,35 @@ import {
IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand
} from '../../../data-operations/filtering-condition';
import { Subject } from 'rxjs';
-import { IgxListComponent } from '../../../list/public_api';
import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbox/checkbox.component';
import { takeUntil } from 'rxjs/operators';
import { cloneHierarchicalArray, PlatformUtil } from '../../../core/utils';
import { BaseFilteringComponent } from './base-filtering.component';
import { ExpressionUI, FilterListItem } from './common';
-import { IgxTreeComponent, ITreeNodeSelectionEvent } from '../../../tree/public_api';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { IgxCircularProgressBarComponent } from '../../../progressbar/progressbar.component';
+import { IgxTreeNodeComponent } from '../../../tree/tree-node/tree-node.component';
+import { IgxTreeComponent } from '../../../tree/tree.component';
+import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective } from '../../../list/list.common';
+import { IgxListItemComponent } from '../../../list/list-item.component';
+import { IgxListComponent } from '../../../list/list.component';
+import { IgxSuffixDirective } from '../../../directives/suffix/suffix.directive';
+import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxInputGroupComponent } from '../../../input-group/input-group.component';
+import { ITreeNodeSelectionEvent } from '../../../tree/common';
@Directive({
- selector: '[igxExcelStyleLoading]'
+ selector: '[igxExcelStyleLoading]',
+ standalone: true
})
export class IgxExcelStyleLoadingValuesTemplateDirective {
public static ngTemplateContextGuard(_dir: IgxExcelStyleLoadingValuesTemplateDirective,
ctx: unknown): ctx is undefined {
return true
- };
+ }
constructor(public template: TemplateRef) { }
}
@@ -43,7 +56,9 @@ export class IgxExcelStyleLoadingValuesTemplateDirective {
*/
@Component({
selector: 'igx-excel-style-search',
- templateUrl: './excel-style-search.component.html'
+ templateUrl: './excel-style-search.component.html',
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective]
})
export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
private static readonly filterOptimizationThreshold = 2;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
index f4a6b53750b..75a5d97dfc9 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts
@@ -1,12 +1,16 @@
import { Component } from '@angular/core';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { NgIf, NgClass } from '@angular/common';
/**
* A component used for presenting Excel style conditional filter UI.
*/
@Component({
selector: 'igx-excel-style-selecting',
- templateUrl: './excel-style-selecting.component.html'
+ templateUrl: './excel-style-selecting.component.html',
+ standalone: true,
+ imports: [NgIf, NgClass, IgxIconComponent]
})
export class IgxExcelStyleSelectingComponent {
constructor(public esf: BaseFilteringComponent) { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
index a4feab3f6c1..1ad0df6e7cb 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts
@@ -9,13 +9,18 @@ import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.compon
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BaseFilteringComponent } from './base-filtering.component';
+import { IgxIconComponent } from '../../../icon/icon.component';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
+import { NgIf } from '@angular/common';
/**
* A component used for presenting Excel style column sorting UI.
*/
@Component({
selector: 'igx-excel-style-sorting',
- templateUrl: './excel-style-sorting.component.html'
+ templateUrl: './excel-style-sorting.component.html',
+ standalone: true,
+ imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent]
})
export class IgxExcelStyleSortingComponent implements OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
deleted file mode 100644
index b064c7339d3..00000000000
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IgxExcelStyleLoadingValuesTemplateDirective } from './excel-style-search.component';
-import {
- IgxGridExcelStyleFilteringComponent,
- IgxExcelStyleColumnOperationsTemplateDirective,
- IgxExcelStyleFilterOperationsTemplateDirective
-} from './grid.excel-style-filtering.component';
-import { IgxExcelStyleSortingComponent } from './excel-style-sorting.component';
-import { IgxExcelStyleMovingComponent } from './excel-style-moving.component';
-import { IgxExcelStyleSearchComponent } from './excel-style-search.component';
-import { IgxExcelStyleCustomDialogComponent } from './excel-style-custom-dialog.component';
-import { IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component';
-import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component';
-import { IgxSelectionAPIService } from '../../../core/selection';
-import { FormsModule } from '@angular/forms';
-import { IgxGridPipesModule } from '../../common/grid-pipes.module';
-import { IgxButtonModule } from '../../../directives/button/button.directive';
-import { IgxButtonGroupModule } from '../../../buttonGroup/buttonGroup.component';
-import { IgxIconModule } from '../../../icon/public_api';
-import { IgxRippleModule } from '../../../directives/ripple/ripple.directive';
-import { IgxInputGroupModule } from '../../../input-group/input-group.component';
-import { IgxDropDownModule } from '../../../drop-down/public_api';
-import { IgxForOfModule } from '../../../directives/for-of/for_of.directive';
-import { IgxCheckboxModule } from '../../../checkbox/checkbox.component';
-import { IgxFilterModule } from '../../../directives/filter/filter.directive';
-import { IgxToggleModule } from '../../../directives/toggle/toggle.directive';
-import { IgxListModule } from '../../../list/list.component';
-import { IgxProgressBarModule } from '../../../progressbar/progressbar.component';
-import { IgxSelectModule } from './../../../select/select.module';
-import { IgxExcelStylePinningComponent } from './excel-style-pinning.component';
-import { IgxExcelStyleHeaderComponent } from './excel-style-header.component';
-import { IgxExcelStyleHidingComponent } from './excel-style-hiding.component';
-import { IgxExcelStyleSelectingComponent } from './excel-style-selecting.component';
-import { IgxExcelStyleClearFiltersComponent } from './excel-style-clear-filters.component';
-import { IgxExcelStyleConditionalFilterComponent } from './excel-style-conditional-filter.component';
-import { IgxDatePickerModule } from '../../../date-picker/date-picker.module';
-import { IgxTimePickerModule } from '../../../time-picker/time-picker.component';
-import { IgxFocusModule } from '../../../directives/focus/focus.directive';
-import { IgxDateTimeEditorModule } from '../../../directives/date-time-editor/date-time-editor.directive';
-import { IgxTreeModule } from '../../../tree/public_api';
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [
- IgxGridExcelStyleFilteringComponent,
- IgxExcelStyleHeaderComponent,
- IgxExcelStyleSortingComponent,
- IgxExcelStylePinningComponent,
- IgxExcelStyleHidingComponent,
- IgxExcelStyleSelectingComponent,
- IgxExcelStyleClearFiltersComponent,
- IgxExcelStyleConditionalFilterComponent,
- IgxExcelStyleMovingComponent,
- IgxExcelStyleSearchComponent,
- IgxExcelStyleCustomDialogComponent,
- IgxExcelStyleDefaultExpressionComponent,
- IgxExcelStyleDateExpressionComponent,
- IgxExcelStyleColumnOperationsTemplateDirective,
- IgxExcelStyleFilterOperationsTemplateDirective,
- IgxExcelStyleLoadingValuesTemplateDirective
- ],
- exports: [
- IgxGridExcelStyleFilteringComponent,
- IgxExcelStyleColumnOperationsTemplateDirective,
- IgxExcelStyleFilterOperationsTemplateDirective,
- IgxExcelStyleLoadingValuesTemplateDirective,
- IgxExcelStyleDateExpressionComponent,
- IgxExcelStyleHeaderComponent,
- IgxExcelStyleSortingComponent,
- IgxExcelStylePinningComponent,
- IgxExcelStyleHidingComponent,
- IgxExcelStyleSelectingComponent,
- IgxExcelStyleClearFiltersComponent,
- IgxExcelStyleConditionalFilterComponent,
- IgxExcelStyleMovingComponent,
- IgxExcelStyleSearchComponent,
- IgxExcelStyleHeaderComponent
- ],
- imports: [
- CommonModule,
- FormsModule,
- IgxGridPipesModule,
- IgxButtonModule,
- IgxButtonGroupModule,
- IgxDatePickerModule,
- IgxTimePickerModule,
- IgxIconModule,
- IgxRippleModule,
- IgxInputGroupModule,
- IgxDropDownModule,
- IgxForOfModule,
- IgxCheckboxModule,
- IgxFilterModule,
- IgxToggleModule,
- IgxListModule,
- IgxProgressBarModule,
- IgxSelectModule,
- IgxFocusModule,
- IgxDateTimeEditorModule,
- IgxTreeModule
- ],
- providers: [
- IgxSelectionAPIService
- ]
-})
-export class IgxGridExcelStyleFilteringModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/public_api.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/public_api.ts
index 4de549833cf..21c7519c4d4 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/public_api.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/public_api.ts
@@ -1,3 +1,14 @@
+import { IgxExcelStyleClearFiltersComponent } from './excel-style-clear-filters.component';
+import { IgxExcelStyleConditionalFilterComponent } from './excel-style-conditional-filter.component';
+import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from './excel-style-filtering.component';
+import { IgxExcelStyleHeaderComponent } from './excel-style-header.component';
+import { IgxExcelStyleHidingComponent } from './excel-style-hiding.component';
+import { IgxExcelStyleMovingComponent } from './excel-style-moving.component';
+import { IgxExcelStylePinningComponent } from './excel-style-pinning.component';
+import { IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleSearchComponent } from './excel-style-search.component';
+import { IgxExcelStyleSelectingComponent } from './excel-style-selecting.component';
+import { IgxExcelStyleSortingComponent } from './excel-style-sorting.component';
+
export * from './excel-style-clear-filters.component';
export * from './excel-style-conditional-filter.component';
export * from './excel-style-header.component';
@@ -7,5 +18,22 @@ export * from './excel-style-pinning.component';
export * from './excel-style-search.component';
export * from './excel-style-selecting.component';
export * from './excel-style-sorting.component';
-export * from './grid.excel-style-filtering.component';
+export * from './excel-style-filtering.component';
export * from './excel-style-date-expression.component';
+
+/* NOTE: Grid excel-style filtering directives collection for ease-of-use import in standalone components scenario */
+export const IGX_GRID_EXCEL_STYLE_FILTER_DIRECTIVES = [
+ IgxGridExcelStyleFilteringComponent,
+ IgxExcelStyleHeaderComponent,
+ IgxExcelStyleSortingComponent,
+ IgxExcelStylePinningComponent,
+ IgxExcelStyleHidingComponent,
+ IgxExcelStyleSelectingComponent,
+ IgxExcelStyleClearFiltersComponent,
+ IgxExcelStyleConditionalFilterComponent,
+ IgxExcelStyleMovingComponent,
+ IgxExcelStyleSearchComponent,
+ IgxExcelStyleColumnOperationsTemplateDirective,
+ IgxExcelStyleFilterOperationsTemplateDirective,
+ IgxExcelStyleLoadingValuesTemplateDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 1bdbf017c90..f1e5cb517a2 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -43,7 +43,7 @@ import { IGroupByRecord } from '../data-operations/groupby-record.interface';
import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
import { ISummaryExpression } from './summaries/grid-summary';
-import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
+import { RowEditPositionStrategy } from './grid.common';
import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
import { IgxRowDirective } from './row.directive';
import { IgxOverlayOutletDirective, IgxToggleDirective } from '../directives/toggle/toggle.directive';
@@ -60,7 +60,7 @@ import {
IgxRowEditActionsDirective
} from './grid.rowEdit.directive';
import { IgxGridNavigationService, IActiveNode } from './grid-navigation.service';
-import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
+import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/density';
import { IgxFilteringService } from './filtering/grid-filtering.service';
import { IgxGridFilteringCellComponent } from './filtering/base/grid-filtering-cell.component';
import { WatchChanges } from './watch-changes';
@@ -141,7 +141,8 @@ import {
IgxRowSelectorTemplateContext,
IGX_GRID_SERVICE_BASE,
ISizeInfo,
- RowType
+ RowType,
+ IPinningConfig
} from './common/grid.interface';
import { DropPosition } from './moving/moving.service';
import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
@@ -167,7 +168,7 @@ import { AbsoluteScrollStrategy } from '../services/overlay/scroll/absolute-scro
import { Action, StateUpdateEvent, TransactionEventOrigin } from '../services/transaction/transaction';
import { ISortingExpression } from '../data-operations/sorting-strategy';
import { IGridSortingStrategy } from './common/strategy';
-import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
+import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/excel-style-filtering.component';
import { IgxGridHeaderComponent } from './headers/grid-header.component';
import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component';
import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
@@ -1967,6 +1968,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
return this._rowDrag && this.hasVisibleColumns;
}
+ public set rowDraggable(val: boolean) {
+ this._rowDrag = val;
+ this.notifyChanges(true);
+ }
+
/**
* Gets/Sets the trigger for validators used when editing the grid.
*
@@ -1978,12 +1984,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
@Input()
public validationTrigger: GridValidationTrigger = 'change';
-
- public set rowDraggable(val: boolean) {
- this._rowDrag = val;
- this.notifyChanges(true);
- }
-
/**
* @hidden
* @internal
@@ -2153,7 +2153,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
public set isLoading(value: boolean) {
if (this._isLoading !== value) {
this._isLoading = value;
- if (!!this.data) {
+ if (this.data) {
this.evaluateLoadingState();
}
}
@@ -5970,7 +5970,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
let selectedData;
if (event.type === 'copy') {
selectedData = this.getSelectedData(this.clipboardOptions.copyFormatters, this.clipboardOptions.copyHeaders);
- };
+ }
let data = [];
let result;
@@ -6455,7 +6455,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
}
}
- protected beginAddRowForIndex(index: number, asChild: boolean = false) {
+ protected beginAddRowForIndex(index: number, asChild = false) {
// TODO is row from rowList suitable for enterAddRowMode
const row = index == null ?
null : this.rowList.find(r => r.index === index);
@@ -6521,7 +6521,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
this.summaryService.clearSummaryCache();
this.pipeTrigger++;
this.notifyChanges();
- };
+ }
protected writeToData(rowIndex: number, value: any) {
mergeObjects(this.gridAPI.get_all_data()[rowIndex], value);
@@ -7243,7 +7243,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
if (this.selectionService.selection.size > 0) {
if (expansionRowIndexes.length > 0) {
for (const [key, value] of this.selectionService.selection.entries()) {
- let updatedKey = key;
+ const updatedKey = key;
let subtract = 0;
expansionRowIndexes.forEach((row) => {
if (updatedKey > Number(row)) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts
deleted file mode 100644
index 1d9fb144468..00000000000
--- a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IgxGridCellComponent } from './cell.component';
-import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
-import {
- IgxGridBodyDirective
-} from './grid.common';
-import {
- IgxRowAddTextDirective,
- IgxRowEditTemplateDirective,
- IgxRowEditActionsDirective,
- IgxRowEditTextDirective,
- IgxRowEditTabStopDirective
-} from './grid.rowEdit.directive';
-import { IgxPaginatorModule } from '../paginator/public_api';
-import { IgxGridPipesModule } from './common/grid-pipes.module';
-import { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.excel-style-filtering.module';
-import { IgxRowDragModule } from './row-drag.directive';
-import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
-import { IgxGridSelectionModule } from './selection/selection.module';
-import { IgxGridResizingModule } from './resizing/resize.module';
-import { IgxColumnMovingModule } from './moving/moving.module';
-import { IgxGridSharedModules } from './common/shared.module';
-import { IgxGridSummaryModule } from './summaries/summary.module';
-import { IgxGridToolbarModule } from './toolbar/toolbar.module';
-import { IgxColumnActionsModule } from './column-actions/column-actions.module';
-import { IgxGridColumnModule } from './columns/column.module';
-import { IgxGridHeadersModule } from './headers/headers.module';
-import { IgxGridFilteringModule } from './filtering/base/filtering.module';
-import { IgxRowDirective } from './row.directive';
-import {
- IgxExcelStyleHeaderIconDirective,
- IgxSortAscendingHeaderIconDirective,
- IgxSortDescendingHeaderIconDirective,
- IgxSortHeaderIconDirective,
- IgxGroupAreaDropDirective,
- IgxHeaderCollapseIndicatorDirective,
- IgxHeaderExpandIndicatorDirective,
- IgxRowCollapsedIndicatorDirective,
- IgxRowExpandedIndicatorDirective
-} from './grid/grid.directives';
-export * from './common/grid-pipes.module';
-import { IgxChipsModule } from '../chips/chips.module';
-import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
-import { IgxQueryBuilderModule } from '../query-builder/query-builder.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IgxTooltipModule } from '../directives/tooltip';
-
-/**
- * @hidden
- */
-@NgModule({
- declarations: [
- IgxRowDirective,
- IgxGridCellComponent,
- IgxRowAddTextDirective,
- IgxRowEditTemplateDirective,
- IgxRowEditActionsDirective,
- IgxRowEditTextDirective,
- IgxRowEditTabStopDirective,
- IgxGridBodyDirective,
- IgxGridFooterComponent,
- IgxAdvancedFilteringDialogComponent,
- IgxRowExpandedIndicatorDirective,
- IgxRowCollapsedIndicatorDirective,
- IgxHeaderExpandIndicatorDirective,
- IgxHeaderCollapseIndicatorDirective,
- IgxExcelStyleHeaderIconDirective,
- IgxSortAscendingHeaderIconDirective,
- IgxSortDescendingHeaderIconDirective,
- IgxSortHeaderIconDirective,
- IgxGroupAreaDropDirective,
- IgxGroupByMetaPipe
- ],
- exports: [
- IgxGridCellComponent,
- IgxRowAddTextDirective,
- IgxRowEditTemplateDirective,
- IgxRowEditActionsDirective,
- IgxRowEditTextDirective,
- IgxRowEditTabStopDirective,
- IgxGridBodyDirective,
- IgxColumnActionsModule,
- IgxGridColumnModule,
- IgxGridHeadersModule,
- IgxGridPipesModule,
- IgxGridFilteringModule,
- IgxGridExcelStyleFilteringModule,
- IgxRowDragModule,
- IgxPaginatorModule,
- IgxGridFooterComponent,
- IgxGridResizingModule,
- IgxColumnMovingModule,
- IgxGridSelectionModule,
- IgxGridSummaryModule,
- IgxGridToolbarModule,
- IgxAdvancedFilteringDialogComponent,
- IgxGridSharedModules,
- IgxRowExpandedIndicatorDirective,
- IgxRowCollapsedIndicatorDirective,
- IgxHeaderExpandIndicatorDirective,
- IgxHeaderCollapseIndicatorDirective,
- IgxExcelStyleHeaderIconDirective,
- IgxSortAscendingHeaderIconDirective,
- IgxSortDescendingHeaderIconDirective,
- IgxSortHeaderIconDirective,
- IgxGroupAreaDropDirective,
- IgxGroupByMetaPipe
- ],
- imports: [
- IgxGridColumnModule,
- IgxGridHeadersModule,
- IgxColumnMovingModule,
- IgxGridResizingModule,
- IgxGridSelectionModule,
- IgxGridSummaryModule,
- IgxGridToolbarModule,
- IgxColumnActionsModule,
- IgxGridPipesModule,
- IgxGridFilteringModule,
- IgxGridExcelStyleFilteringModule,
- IgxRowDragModule,
- IgxPaginatorModule,
- IgxGridSharedModules,
- IgxChipsModule,
- IgxQueryBuilderModule,
- IgxTooltipModule,
- ReactiveFormsModule
- ]
-})
-export class IgxGridCommonModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-footer/grid-footer.component.ts b/projects/igniteui-angular/src/lib/grids/grid-footer/grid-footer.component.ts
index 21f31745219..4e49030561c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-footer/grid-footer.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-footer/grid-footer.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'igx-grid-footer',
- template: ';
let grid: IgxGridComponent;
let columnChooser: IgxColumnActionsComponent;
@@ -27,13 +25,10 @@ describe('Column Hiding UI #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- ColumnHidingTestComponent,
- ColumnGroupsHidingTestComponent
- ],
imports: [
NoopAnimationsModule,
- IgxGridModule
+ ColumnHidingTestComponent,
+ ColumnGroupsHidingTestComponent
]
});
}));
@@ -528,7 +523,7 @@ describe('Column Hiding UI #grid', () => {
let fixEl = fix.nativeElement; let gridEl = grid.nativeElement;
let tHeadItems = fixEl.querySelector('igx-grid-header-group');
let gridRows = fixEl.querySelector('igx-grid-row');
- let paging = fixEl.querySelector('.igx-paginator');
+ const paging = fixEl.querySelector('.igx-paginator');
let rowSelectors = gridEl.querySelector('.igx-grid__cbx-padding > igx-checkbox');
let dragIndicators = gridEl.querySelector('.igx-grid__drag-indicator');
let verticalScrollBar = gridEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts
index df42bd386b0..aa59c8bc603 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts
@@ -3,7 +3,6 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxGridModule } from './public_api';
import { IgxColumnGroupComponent } from '../columns/column-group.component';
import { IgxInputDirective } from '../../directives/input/input.directive';
import {
@@ -16,8 +15,8 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { IgxGridComponent } from './grid.component';
import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec';
-import { IgxColumnComponent } from '../tree-grid/public_api';
import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IgxColumnComponent } from '../public_api';
describe('IgxGrid - Column Moving #grid', () => {
const CELL_CSS_CLASS = '.igx-grid__td';
@@ -28,16 +27,13 @@ describe('IgxGrid - Column Moving #grid', () => {
let fixture; let grid: IgxGridComponent;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ FormsModule,
+ NoopAnimationsModule,
MovableColumnsComponent,
MovableTemplatedColumnsComponent,
MovableColumnsLargeComponent,
MultiColumnHeadersComponent
- ],
- imports: [
- FormsModule,
- NoopAnimationsModule,
- IgxGridModule
]
});
}));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts
index 41cf69e7d6c..f710cf93840 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts
@@ -3,7 +3,6 @@ import { DebugElement } from '@angular/core';
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridComponent } from './grid.component';
-import { IgxGridModule } from './public_api';
import {
ColumnPinningTestComponent,
ColumnGroupsPinningTestComponent,
@@ -28,14 +27,11 @@ describe('Column Pinning UI #grid', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
ColumnPinningTestComponent,
ColumnGroupsPinningTestComponent,
ColumnPinningWithTemplateTestComponent
- ],
- imports: [
- NoopAnimationsModule,
- IgxGridModule
]
}).compileComponents();
}));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
index 1e637f9fa33..ea48663b24f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
@@ -2,16 +2,18 @@ import { Component, DebugElement, OnInit, ViewChild } from '@angular/core';
import { TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxAvatarModule } from '../../avatar/avatar.component';
import { Calendar } from '../../calendar/public_api';
import { IgxGridComponent } from './grid.component';
-import { IgxGridModule, IColumnResizeEventArgs } from './public_api';
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { GridFunctions } from '../../test-utils/grid-functions.spec';
+import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive';
+import { NgFor } from '@angular/common';
+import { IgxAvatarComponent } from '../../avatar/avatar.component';
+import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
describe('IgxGrid - Deferred Column Resizing #grid', () => {
@@ -19,19 +21,15 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ MultiColumnHeadersComponent,
+ NoopAnimationsModule,
ResizableColumnsComponent,
GridFeaturesComponent,
LargePinnedColGridComponent,
NullColumnsComponent,
- MultiColumnHeadersComponent,
ColGridComponent,
ColPercentageGridComponent
- ],
- imports: [
- IgxAvatarModule,
- NoopAnimationsModule,
- IgxGridModule
]
});
}));
@@ -870,7 +868,9 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
});
@Component({
- template: GridTemplateStrings.declareGrid(`width="500px" height="300px"`, ``, ColumnDefinitions.resizableThreeOfFour)
+ template: GridTemplateStrings.declareGrid(`width="500px" height="300px"`, ``, ColumnDefinitions.resizableThreeOfFour),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class ResizableColumnsComponent {
@ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
@@ -879,8 +879,7 @@ export class ResizableColumnsComponent {
}
@Component({
- template: GridTemplateStrings.declareGrid(`width="618px" height="600px"`, ``,
- `;
let grid: IgxGridComponent;
- let dataWithImages = [{
+ const dataWithImages = [{
avatar: 'assets/images/avatar/1.jpg',
phone: '770-504-2217',
text: 'Terrance Orta',
@@ -1201,7 +1203,7 @@ describe('IgxGrid - Column properties #grid', () => {
}));
it('should initialize correctly with autoGenerate and image data', () => {
- let column = grid.getColumnByName('avatar');
+ const column = grid.getColumnByName('avatar');
expect(column.dataType).toBe(GridColumnDataType.Image);
expect(column.sortable).toBeFalse();
expect(column.groupable).toBeFalse();
@@ -1209,7 +1211,7 @@ describe('IgxGrid - Column properties #grid', () => {
expect(column.editable).toBeFalse();
expect(column.hasSummary).toBeFalse();
- let cell = column._cells[0];
+ const cell = column._cells[0];
expect(cell.nativeElement.firstElementChild.tagName).toBe('IMG');
expect(cell.nativeElement.firstElementChild.getAttribute('src')).toBe('assets/images/avatar/1.jpg');
expect(cell.nativeElement.firstElementChild.getAttribute('alt')).toBe('1');
@@ -1402,7 +1404,9 @@ describe('IgxGrid - Column properties #grid', () => {
});
@Component({
- template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.iterableComponent)
+ template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.iterableComponent),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class ColumnsFromIterableComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1423,11 +1427,13 @@ interface IColumnConfig {
@Component({
template: GridTemplateStrings.declareGrid(`height="800px" width="400px"`, ``, ColumnDefinitions.resizableColsComponent) +
- `
+ `
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxButtonDirective]
})
export class ResizableColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1455,7 +1461,9 @@ export class ResizableColumnsComponent {
New summary text
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxSummaryTemplateDirective]
})
export class TemplatedColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1497,7 +1505,9 @@ export class TemplatedColumnsComponent {
{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxSummaryTemplateDirective]
})
export class TemplatedInputColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1522,7 +1532,9 @@ export class TemplatedInputColumnsComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
})
export class TemplatedContextInputColumnsComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1545,7 +1557,9 @@ export class TemplatedContextInputColumnsComponent {
= [
@@ -1480,7 +1469,10 @@ export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
-`
+
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxGridDetailTemplateDirective]
})
export class GridRowPinningWithMDVComponent extends GridRowPinningComponent { }
@@ -1496,7 +1488,9 @@ export class GridRowPinningWithMDVComponent extends GridRowPinningComponent { }
[data]="data"
[autoGenerate]="true">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent { }
@@ -1511,7 +1505,9 @@ export class GridRowPinningWithTransactionsComponent extends GridRowPinningCompo
[data]="data"
[autoGenerate]="true">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class GridRowPinningWithInitialPinningComponent implements OnInit {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
index 0c03c2f9be3..17ffb94b7fe 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -1,7 +1,6 @@
import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridComponent } from './grid.component';
-import { IgxGridModule, IRowSelectionEventArgs } from './public_api';
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -16,10 +15,10 @@ import {
import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { GridSelectionMode } from '../common/enums';
-import { IgxGridSelectionModule } from '../selection/selection.module';
import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IRowSelectionEventArgs } from '../public_api';
const DEBOUNCETIME = 30;
const SCROLL_DEBOUNCETIME = 100;
@@ -30,18 +29,14 @@ describe('IgxGrid - Row Selection #grid', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
RowSelectionComponent,
SelectionWithScrollsComponent,
RowSelectionWithoutPrimaryKeyComponent,
SingleRowSelectionComponent,
SelectionWithTransactionsComponent,
GridCustomSelectorsComponent
- ],
- imports: [
- NoopAnimationsModule,
- IgxGridModule,
- IgxGridSelectionModule
]
}).compileComponents();
}));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index b3b562b9a2d..208dc2d5d76 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -63,14 +63,14 @@
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
index aefc1b57f91..9dfdb25dcc9 100644
--- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
@@ -2,20 +2,22 @@ import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList } fro
import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive';
+import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { IgxDropDownItemComponent } from './drop-down-item.component';
-import { IgxDropDownComponent, IgxDropDownModule } from './public_api';
+import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from './public_api';
import { ISelectionEventArgs } from './drop-down.common';
-import { IgxTabsComponent, IgxTabsModule } from '../tabs/tabs/public_api';
+import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent } from '../tabs/tabs/public_api';
import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
import { CancelableEventArgs, IBaseCancelableBrowserEventArgs } from '../core/utils';
import { configureTestSuite } from '../test-utils/configure-suite';
import { take } from 'rxjs/operators';
import { IgxDropDownGroupComponent } from './drop-down-group.component';
-import { IgxForOfDirective, IgxForOfModule } from '../directives/for-of/for_of.directive';
+import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
import { DisplayDensity } from '../core/density';
import { IgxSelectionAPIService } from '../core/selection';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { NgFor } from '@angular/common';
const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
const CSS_CLASS_LIST = 'igx-drop-down__list';
@@ -187,14 +189,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- IgxDropDownTestComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxForOfModule
+ IgxDropDownTestComponent
]
}).compileComponents();
}));
@@ -796,24 +793,18 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- DoubleIgxDropDownComponent,
- InputWithDropDownDirectiveComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxTabsModule,
- IgxForOfModule
+ DoubleIgxDropDownComponent,
+ InputWithDropDownDirectiveComponent
]
}).compileComponents();
}));
- it('should call preventDefault on a mousedown event when allowItemsFocus is disabled', () => {
- fixture = TestBed.createComponent(InputWithDropDownDirectiveComponent);
-Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â fixture.detectChanges();
+ it('should call preventDefault on a mousedown event when allowItemsFocus is disabled', () => {
+ fixture = TestBed.createComponent(InputWithDropDownDirectiveComponent);
+ fixture.detectChanges();
-                dropdown = fixture.componentInstance.dropdown;
+ dropdown = fixture.componentInstance.dropdown;
dropdown.allowItemsFocus = false;
fixture.detectChanges();
@@ -826,9 +817,9 @@ describe('IgxDropDown ', () => {
spyOn(event, 'preventDefault');
itemToClick.triggerEventHandler('mousedown', event);
-Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â fixture.detectChanges();
+ fixture.detectChanges();
expect(event.preventDefault).toHaveBeenCalled();
-Â Â Â Â Â Â Â Â Â Â Â Â });
+ });
it('should properly handle OnEnterKeyDown when the dropdown is not visible', fakeAsync(() => {
fixture = TestBed.createComponent(InputWithDropDownDirectiveComponent);
fixture.detectChanges();
@@ -895,14 +886,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- VirtualizedDropDownComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxForOfModule
+ VirtualizedDropDownComponent
]
}).compileComponents();
}));
@@ -1010,15 +996,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- GroupDropDownComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxTabsModule,
- IgxForOfModule
+ GroupDropDownComponent
]
}).compileComponents();
}));
@@ -1079,14 +1059,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- IgxDropDownTestComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxForOfModule
+ IgxDropDownTestComponent
]
}).compileComponents();
}));
@@ -1143,14 +1118,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- IgxDropDownTestComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxForOfModule
+ IgxDropDownTestComponent
]
}).compileComponents();
}));
@@ -1218,15 +1188,9 @@ describe('IgxDropDown ', () => {
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
- IgxDropDownAnchorTestComponent
- ],
imports: [
- IgxDropDownModule,
NoopAnimationsModule,
- IgxToggleModule,
- IgxTabsModule,
- IgxForOfModule
+ IgxDropDownAnchorTestComponent
]
}).compileComponents();
}));
@@ -1288,11 +1252,12 @@ describe('IgxDropDown ', () => {
-
+
{{item.field}}
- `
+ `,
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, NgFor]
})
class IgxDropDownTestComponent {
@@ -1336,7 +1301,9 @@ class IgxDropDownTestComponent {
{{ item.field }}
- `
+ `,
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, NgFor]
})
class DoubleIgxDropDownComponent implements OnInit {
@@ -1391,7 +1358,9 @@ class DoubleIgxDropDownComponent implements OnInit {
{{ item.field }}
- `
+ `,
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, NgFor]
})
class IgxDropDownAnchorTestComponent {
@ViewChild(IgxTabsComponent, { static: true })
@@ -1426,7 +1395,9 @@ class IgxDropDownAnchorTestComponent {
{{ item.field }}
- `
+ `,
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, NgFor]
})
class InputWithDropDownDirectiveComponent {
@ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent, static: true })
@@ -1450,7 +1421,9 @@ class InputWithDropDownDirectiveComponent {
{{ child.name }}
- `
+ `,
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, NgFor]
})
class GroupDropDownComponent {
@ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent, static: true })
@@ -1496,7 +1469,9 @@ class GroupDropDownComponent {
overflow: hidden;
height: 400px;
}
- `]
+ `],
+ standalone: true,
+ imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxForOfDirective, IgxButtonDirective, IgxDropDownItemNavigationDirective, IgxToggleActionDirective]
})
class VirtualizedDropDownComponent {
@ViewChild('toggleButton', { read: ElementRef, static: true })
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
index 46ba15f3add..b663166409d 100644
--- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
+++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -31,6 +31,7 @@ import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
import { take } from 'rxjs/operators';
import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
import { OverlaySettings } from '../services/overlay/utilities';
+import { NgIf } from '@angular/common';
/**
* **Ignite UI for Angular DropDown** -
@@ -51,7 +52,9 @@ import { OverlaySettings } from '../services/overlay/utilities';
@Component({
selector: 'igx-drop-down',
templateUrl: './drop-down.component.html',
- providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }]
+ providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }],
+ standalone: true,
+ imports: [IgxToggleDirective, NgIf]
})
export class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.module.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.module.ts
new file mode 100644
index 00000000000..698d3356a86
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IGX_DROP_DOWN_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [
+ ...IGX_DROP_DOWN_DIRECTIVES
+ ],
+ exports: [
+ ...IGX_DROP_DOWN_DIRECTIVES
+ ]
+})
+export class IgxDropDownModule { }
diff --git a/projects/igniteui-angular/src/lib/drop-down/public_api.ts b/projects/igniteui-angular/src/lib/drop-down/public_api.ts
index 5ccd6c973e3..597f48ec8f7 100644
--- a/projects/igniteui-angular/src/lib/drop-down/public_api.ts
+++ b/projects/igniteui-angular/src/lib/drop-down/public_api.ts
@@ -1,40 +1,18 @@
-import { NgModule } from '@angular/core';
-import { IgxDropDownComponent } from './drop-down.component';
+import { IgxDropDownGroupComponent } from './drop-down-group.component';
import { IgxDropDownItemComponent } from './drop-down-item.component';
import { IgxDropDownItemNavigationDirective } from './drop-down-navigation.directive';
-import { CommonModule } from '@angular/common';
-import { IgxToggleModule } from '../directives/toggle/toggle.directive';
-import { IgxDropDownGroupComponent } from './drop-down-group.component';
-import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
+import { IgxDropDownComponent } from './drop-down.component';
export * from './drop-down.component';
export * from './drop-down-item.component';
export { ISelectionEventArgs, IDropDownNavigationDirective } from './drop-down.common';
export * from './drop-down-navigation.directive';
-export * from './drop-down.base';
-export * from './drop-down-item.base';
export * from './drop-down-group.component';
-/**
- * @hidden
- */
-@NgModule({
- declarations: [
- IgxDropDownComponent,
- IgxDropDownItemBaseDirective,
- IgxDropDownItemComponent,
- IgxDropDownGroupComponent,
- IgxDropDownItemNavigationDirective
- ],
- exports: [
- IgxDropDownComponent,
- IgxDropDownItemComponent,
- IgxDropDownGroupComponent,
- IgxDropDownItemNavigationDirective
- ],
- imports: [
- CommonModule,
- IgxToggleModule
- ]
-})
-export class IgxDropDownModule { }
+/* NOTE: Drop down directives collection for ease-of-use import in standalone components scenario */
+export const IGX_DROP_DOWN_DIRECTIVES = [
+ IgxDropDownComponent,
+ IgxDropDownItemComponent,
+ IgxDropDownGroupComponent,
+ IgxDropDownItemNavigationDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts
index 9a6207f10b9..fa6750495a9 100644
--- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts
+++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts
@@ -4,7 +4,8 @@ import { IgxExpansionPanelBase, IGX_EXPANSION_PANEL_COMPONENT } from './expansio
@Component({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'igx-expansion-panel-body',
- template: `
-
- Product orders
- Product orders details
-
-
-
-
-
-
-`
+
+ Product orders
+ Product orders details
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxGridComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective]
})
export class IgxExpansionPanelGridComponent {
@@ -1353,7 +1346,9 @@ export class IgxExpansionPanelGridComponent {
-`
+ `,
+ standalone: true,
+ imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective]
})
export class IgxExpansionPanelListComponent {
@ViewChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent, static: true })
@@ -1365,21 +1360,23 @@ export class IgxExpansionPanelListComponent {
@Component({
template: `
-
-
- {{text}}
-
+
+ {{text}}
+
Address: {{dataItem.Address}}
+ [class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
+ [class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
+ [style.left]="mrlRightPinnedOffset"
+ [ngStyle]="{
+ 'grid-template-rows':col.getGridTemplate(true),
+ 'grid-template-columns':col.getGridTemplate(false),
+ 'z-index': col.pinned ? 1 : null
+ }">
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
index 7a674ea1b62..5da658cc2aa 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
@@ -1,11 +1,20 @@
import { Component, ChangeDetectionStrategy, forwardRef } from '@angular/core';
import { IgxRowDirective } from '../row.directive';
+import { IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe } from '../common/pipes';
+import { IgxGridExpandableCellComponent } from './expandable-cell.component';
+import { IgxGridCellComponent } from '../cell.component';
+import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
+import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
+import { IgxRowDragDirective } from '../row-drag.directive';
+import { NgTemplateOutlet, NgIf, NgFor, NgStyle, NgClass } from '@angular/common';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-row',
templateUrl: './grid-row.component.html',
- providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }]
+ providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }],
+ standalone: true,
+ imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, NgFor, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe]
})
export class IgxGridRowComponent extends IgxRowDirective {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
index 5fd22fbff30..bc04e7541b0 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
@@ -2,17 +2,6 @@
import { fakeAsync, TestBed, tick, ComponentFixture, flush } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
- IgxDateSummaryOperand,
- IgxGridModule,
- IgxNumberSummaryOperand,
- IgxSummaryOperand,
- IgxSummaryResult,
- IgxGroupByRow,
- IgxSummaryRow,
- IgxGridRow,
- IColumnPipeArgs
-} from './public_api';
import { IgxGridComponent } from './grid.component';
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
@@ -32,6 +21,7 @@ import { DropPosition } from '../moving/moving.service';
import { DatePipe } from '@angular/common';
import { IgxGridGroupByRowComponent } from './groupby-row.component';
import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IColumnPipeArgs, IgxColumnComponent, IgxDateSummaryOperand, IgxGridRow, IgxGroupByRow, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, IgxSummaryRow } from '../public_api';
describe('IgxGrid - Summaries #grid', () => {
@@ -44,15 +34,15 @@ describe('IgxGrid - Summaries #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
+ CustomSummariesComponent,
ProductsComponent,
SummaryColumnComponent,
- CustomSummariesComponent,
FilteringComponent,
SummariesGroupByComponent,
SummariesGroupByTransactionsComponent
- ],
- imports: [IgxGridModule, NoopAnimationsModule]
+ ]
});
}));
@@ -60,11 +50,11 @@ describe('IgxGrid - Summaries #grid', () => {
describe('in grid with no summaries defined: ', () => {
let fixture: ComponentFixture;
let grid: IgxGridComponent;
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ProductsComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
- }));
+ });
it('should not have summary if no summary is active ', () => {
expect(fixture.debugElement.query(By.css(SUMMARY_CLASS))).toBeNull();
@@ -150,11 +140,11 @@ describe('IgxGrid - Summaries #grid', () => {
let fixture: ComponentFixture;
let grid: IgxGridComponent;
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(CustomSummariesComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid1;
- }));
+ });
it('should properly render custom summaries', () => {
const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
@@ -599,11 +589,11 @@ describe('IgxGrid - Summaries #grid', () => {
describe('', () => {
let fix;
let grid: IgxGridComponent;
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fix = TestBed.createComponent(SummaryColumnComponent);
fix.detectChanges();
grid = fix.componentInstance.grid;
- }));
+ });
it('Filtering: should calculate summaries only over filteredData', fakeAsync(() => {
grid.filter('UnitsInStock', 0, IgxNumberFilteringOperand.instance().condition('equals'), true);
@@ -856,16 +846,14 @@ describe('IgxGrid - Summaries #grid', () => {
describe('Keyboard Navigation', () => {
let fix;
let grid: IgxGridComponent;
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fix = TestBed.createComponent(SummariesGroupByComponent);
- fix.detectChanges();
grid = fix.componentInstance.grid;
setupGridScrollDetection(fix, grid);
grid.width = '800px';
grid.height = '800px';
fix.detectChanges();
- tick(100);
- }));
+ });
afterEach(() => {
clearGridSubs();
@@ -2326,7 +2314,7 @@ describe('IgxGrid - Summaries #grid', () => {
addRow = grid.gridAPI.get_row_by_index(2);
expect(addRow.addRowUI).toBeFalse();
- let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
+ const summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['3', '17', '17', '51', '17']);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['3']);
@@ -2676,7 +2664,9 @@ class AllDataAvgSummary extends IgxSummaryOperand {
[summaries]="earliest">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class CustomSummariesComponent {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
index a8392c87153..e902114efdf 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
@@ -2,10 +2,17 @@ import { Component, ViewChild } from '@angular/core';
import { TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AbsoluteScrollStrategy, GlobalPositionStrategy, IgxCsvExporterService, IgxExcelExporterService } from '../../services/public_api';
-import { IgxGridComponent, IgxGridModule } from './public_api';
+import { IgxGridComponent } from './public_api';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { GridFunctions } from "../../test-utils/grid-functions.spec";
import { By } from "@angular/platform-browser";
+import { IgxGridToolbarComponent } from '../toolbar/grid-toolbar.component';
+import { NgIf } from '@angular/common';
+import { IgxGridToolbarActionsComponent, IgxGridToolbarTitleComponent } from '../toolbar/common';
+import { IgxGridToolbarPinningComponent } from '../toolbar/grid-toolbar-pinning.component';
+import { IgxGridToolbarHidingComponent } from '../toolbar/grid-toolbar-hiding.component';
+import { IgxGridToolbarAdvancedFilteringComponent } from '../toolbar/grid-toolbar-advanced-filtering.component';
+import { IgxGridToolbarExporterComponent } from '../toolbar/grid-toolbar-exporter.component';
const TOOLBAR_TAG = 'igx-grid-toolbar';
const TOOLBAR_TITLE_TAG = 'igx-grid-toolbar-title';
@@ -31,14 +38,11 @@ const DATA = [
describe('IgxGrid - Grid Toolbar #grid - ', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
DefaultToolbarComponent,
ToolbarActionsComponent
],
- imports: [
- IgxGridModule,
- NoopAnimationsModule
- ],
providers: [
IgxExcelExporterService,
IgxCsvExporterService
@@ -258,7 +262,9 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
`
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class IgxGridTestComponent {
@ViewChild('grid', { static: true }) public grid: IgxGridComponent;
@@ -2798,7 +2784,9 @@ export class IgxGridTestComponent {
+ template: `
@@ -2882,19 +2871,22 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
-
`
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxGridFooterComponent]
})
export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
@ViewChild(IgxGridComponent, { static: true }) public override grid: IgxGridComponent;
public override data = SampleTestData.foodProductData();
}
@Component({
- template:
- `
+ template: `
- `
+
`,
+ standalone: true,
+ imports: [IgxGridComponent, IgxPaginatorComponent, NgIf]
})
export class IgxGridWrappedInContComponent extends IgxGridTestComponent {
public override data = [];
@@ -2942,12 +2934,13 @@ export class IgxGridWrappedInContComponent extends IgxGridTestComponent {
}
@Component({
- template:
- `
+ template: `
- `
+
`,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class IgxGridFixedContainerHeightComponent extends IgxGridWrappedInContComponent {
public override paging = false;
@@ -2961,7 +2954,9 @@ export class IgxGridFixedContainerHeightComponent extends IgxGridWrappedInContCo
Selected rows in the group: {{context.selectedCount}};
@@ -3938,7 +3952,9 @@ export class CustomSortingStrategy extends DefaultSortingStrategy {
Group Row instance: {{context.groupRow}};
-
-
-
-
-
-
- {{dataItem.Address}}
-
- NEW TEMPLATE
+
+
+
+
+
+
+
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxCheckboxComponent, IgxPaginatorComponent, IgxInputGroupComponent, IgxInputDirective, NgIf, NgFor]
})
export class DefaultGridMasterDetailComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1290,8 +1296,8 @@ export class DefaultGridMasterDetailComponent {
public height = '500px';
public data = SampleTestData.contactInfoDataFull();
public columns = [
- { field: 'ContactName', width: 400, dataType: 'string' },
- { field: 'CompanyName', width: 400, dataType: 'string' }
+ { field: 'ContactName', width: '400px' },
+ { field: 'CompanyName', width: '400px' }
];
public paging = false;
public perPage = 15;
@@ -1300,23 +1306,25 @@ export class DefaultGridMasterDetailComponent {
@Component({
template: `
-
-
-
-
-
-
`,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxDropDirective]
})
export class IgxHierarchicalGridTestComponent {
@ViewChild('hierarchicalDragGrid', { read: IgxHierarchicalGridComponent, static: true }) public hDragGrid: IgxHierarchicalGridComponent;
@@ -1418,7 +1404,9 @@ export class IgxHierarchicalGridTestComponent {
Moving {{data.ProductName}}!
+
+
+
+
+
+
+ {{dataItem.Address}}
+
+ NEW TEMPLATE
+
-
+
+
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxCheckboxComponent, IgxGridDetailTemplateDirective, NgFor]
})
export class AllExpandedGridMasterDetailComponent extends DefaultGridMasterDetailComponent implements OnInit {
public expStates = new Map();
@@ -1331,7 +1339,7 @@ export class AllExpandedGridMasterDetailComponent extends DefaultGridMasterDetai
@Component({
template: `
-
-
-
`
+
-
- {{dataItem.Address}}
-
+
+
+
+
-
-
- `
+ {{dataItem.Address}}
+
+
-
+
+
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxColumnLayoutComponent, IgxCheckboxComponent, NgFor]
})
export class MRLMasterDetailComponent extends DefaultGridMasterDetailComponent { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts
index eb0e9ba0470..adb8dd0b53a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts
@@ -1,64 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
- IgxGroupByRowTemplateDirective,
- IgxGridDetailTemplateDirective
-} from './grid.directives';
-import { IgxGridComponent } from './grid.component';
-import {
- IgxGridPagingPipe,
- IgxGridGroupingPipe,
- IgxGridSortingPipe,
- IgxGridFilteringPipe
-} from './grid.pipes';
-import { IgxGridGroupByRowComponent } from './groupby-row.component';
-import { IgxGridRowComponent } from './grid-row.component';
-import { IgxGridCommonModule } from '../grid-common.module';
-import { IgxGridSummaryPipe } from './grid.summary.pipe';
-import { IgxGridDetailsPipe } from './grid.details.pipe';
-import { IgxGridExpandableCellComponent } from './expandable-cell.component';
-import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.component';
-import { IgxTooltipModule } from '../../directives/tooltip';
-import { ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { IGX_GRID_DIRECTIVES } from './public_api';
+
/**
* @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
@NgModule({
- declarations: [
- IgxGridComponent,
- IgxGridRowComponent,
- IgxGridGroupByRowComponent,
- IgxGroupByRowTemplateDirective,
- IgxGridDetailTemplateDirective,
- IgxGridGroupingPipe,
- IgxGridPagingPipe,
- IgxGridSortingPipe,
- IgxGridFilteringPipe,
- IgxGridSummaryPipe,
- IgxGridDetailsPipe,
- IgxGridExpandableCellComponent,
- IgxGridGroupByAreaComponent,
- ],
- exports: [
- IgxGridComponent,
- IgxGridExpandableCellComponent,
- IgxGridGroupByRowComponent,
- IgxGridRowComponent,
- IgxGroupByRowTemplateDirective,
- IgxGridDetailTemplateDirective,
- IgxGridGroupingPipe,
- IgxGridPagingPipe,
- IgxGridSortingPipe,
- IgxGridFilteringPipe,
- IgxGridSummaryPipe,
- IgxGridDetailsPipe,
- IgxGridGroupByAreaComponent,
- IgxGridCommonModule
- ],
imports: [
- IgxGridCommonModule,
- IgxTooltipModule,
- ReactiveFormsModule
+ ...IGX_GRID_DIRECTIVES
],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ exports: [
+ ...IGX_GRID_DIRECTIVES
+ ]
})
export class IgxGridModule {}
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
index da3feacc596..eeb7a0b5aa5 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts
@@ -3,7 +3,6 @@ import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angul
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridComponent } from './grid.component';
-import { IgxGridModule } from './grid.module';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { ViewChild, Component } from '@angular/core';
import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
@@ -11,6 +10,12 @@ import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec';
import { ControlsFunction } from '../../test-utils/controls-functions.spec';
+import { IgxColumnComponent } from '../columns/column.component';
+import { IgxGridToolbarComponent } from '../toolbar/grid-toolbar.component';
+import { IgxGridToolbarActionsComponent } from '../toolbar/common';
+import { IgxGridToolbarHidingComponent } from '../toolbar/grid-toolbar-hiding.component';
+import { IgxGridToolbarPinningComponent } from '../toolbar/grid-toolbar-pinning.component';
+import { NgFor, NgIf } from '@angular/common';
type FixtureType = ColumnLayoutGroupingTestComponent | ColumnLayouHidingTestComponent | ColumnLayoutResizingTestComponent
@@ -27,15 +32,14 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
let grid: IgxGridComponent;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
ColumnLayoutPinningTestComponent,
ColumnLayoutFilteringTestComponent,
ColumnLayouHidingTestComponent,
ColumnLayoutGroupingTestComponent,
ColumnLayoutResizingTestComponent
- ],
- imports: [
- NoopAnimationsModule, IgxGridModule]
+ ]
});
}));
@@ -234,7 +238,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
fixture.componentInstance.grid.width = '600px';
fixture.detectChanges();
- let gridFirstRow = grid.rowList.first;
+ const gridFirstRow = grid.rowList.first;
// group1 should be hidden on init, check DOM
GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow);
GridFunctions.verifyDOMMatchesLayoutSettings(grid, gridFirstRow, fixture.componentInstance.colGroups.slice(1));
@@ -594,7 +598,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
expect(grid.getColumnByName('Fax').pinned).toBeTruthy();
expect(grid.getColumnByName('Phone').pinned).toBeTruthy();
- let gridFirstRow = grid.rowList.first;
+ const gridFirstRow = grid.rowList.first;
GridFunctions.verifyDOMMatchesLayoutSettings(grid, gridFirstRow, fixture.componentInstance.colGroups.slice(2, 3));
// headers are aligned to cells
@@ -792,11 +796,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
});
describe('Filtering ', () => {
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ColumnLayoutFilteringTestComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
- }));
+ });
it('should enforce excel style filtering.', () => {
const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
@@ -830,11 +834,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
});
describe('GroupBy ', () => {
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ColumnLayoutGroupingTestComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
- }));
+ });
it('should render rows correctly when grouped by a column and scrolling to bottom should not leave empty space.', async () => {
grid.height = '600px';
@@ -899,11 +903,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
const GRID_COL_GROUP_THEAD = 'igx-grid-header-group';
const RESIZE_LINE_CLASS = '.igx-grid-th__resize-line';
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ColumnLayoutResizingTestComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
- }));
+ });
it('should correctly resize column on upper level with 3 spans and the two cols below it with span 1 that have width', async () => {
grid.width = '1500px';
@@ -1155,11 +1159,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
});
describe('Selection ', () => {
- beforeEach(fakeAsync(() => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ColumnLayoutGroupingTestComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
- }));
+ });
it('should return correct selected data via getSelectedData API.', () => {
const selectedData1 = [{
@@ -1204,7 +1208,9 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'>
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarActionsComponent, NgIf, NgFor]
})
export class ColumnLayouHidingTestComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1251,7 +1257,9 @@ export class ColumnLayouHidingTestComponent {
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'>
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxGridToolbarActionsComponent, NgFor, NgIf]
})
export class ColumnLayoutPinningTestComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1293,7 +1301,9 @@ export class ColumnLayoutPinningTestComponent {
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'>
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
})
export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestComponent {
}
@@ -1307,7 +1317,9 @@ export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestC
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [groupable]="col.groupable">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
})
export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestComponent {
public override showToolbar = false;
@@ -1333,7 +1345,9 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
})
export class ColumnLayoutResizingTestComponent {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
index 7df5097ec7d..5d5cd494839 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
@@ -1,5 +1,4 @@
import { TestBed, fakeAsync } from '@angular/core/testing';
-import { IgxGridModule } from './grid.module';
import { IgxGridComponent } from './grid.component';
import { Component, ViewChild } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -11,6 +10,9 @@ import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/
import { configureTestSuite } from '../../test-utils/configure-suite';
import { ICellPosition } from '../common/events';
import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec';
+import { NgFor } from '@angular/common';
+import { IgxColumnGroupComponent } from '../columns/column-group.component';
+import { IgxColumnComponent } from '../columns/column.component';
const GRID_COL_THEAD_CLASS = '.igx-grid-th';
const GRID_MRL_BLOCK_CLASS = `.${GRID_MRL_BLOCK}`;
@@ -19,13 +21,10 @@ describe('IgxGrid - multi-row-layout #grid', () => {
const DEBOUNCETIME = 60;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- ColumnLayoutTestComponent,
- ColumnLayoutAndGroupsTestComponent
- ],
imports: [
NoopAnimationsModule,
- IgxGridModule
+ ColumnLayoutTestComponent,
+ ColumnLayoutAndGroupsTestComponent
]
});
}));
@@ -92,7 +91,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
fixture.componentInstance.grid.width = '617px';
fixture.detectChanges();
const grid = fixture.componentInstance.grid;
- let gridFirstRow = grid.rowList.first;
+ const gridFirstRow = grid.rowList.first;
// headers are aligned to cells
GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow);
@@ -1144,7 +1143,9 @@ describe('IgxGrid - multi-row-layout #grid', () => {
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [editable]='col.editable'>
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
})
export class ColumnLayoutTestComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1180,7 +1181,9 @@ export class ColumnLayoutTestComponent {
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'>
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxColumnGroupComponent, NgFor]
})
export class ColumnLayoutAndGroupsTestComponent extends ColumnLayoutTestComponent {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.nested.props.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.nested.props.spec.ts
index 27fa7fd9fba..7b4cd79bede 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.nested.props.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.nested.props.spec.ts
@@ -1,6 +1,5 @@
import { configureTestSuite } from '../../test-utils/configure-suite';
import { TestBed, ComponentFixture, fakeAsync } from '@angular/core/testing';
-import { IgxGridModule } from './grid.module';
import { IgxGridComponent } from './grid.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -8,13 +7,12 @@ import { cloneArray, resolveNestedPath } from '../../core/utils';
import { Component, DebugElement, ViewChild } from '@angular/core';
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { IgxComboComponent, IgxComboModule } from '../../combo/public_api';
-import { IgxFocusModule } from '../../directives/focus/focus.directive';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IgxToggleModule } from '../../directives/toggle/toggle.directive';
-import { IgxInputGroupModule } from '../../input-group/public_api';
+import { IgxComboComponent } from '../../combo/public_api';
import { IGridEditEventArgs } from '../common/events';
import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IgxColumnComponent } from '../public_api';
+import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive';
+import { FormsModule } from '@angular/forms';
const first = (array: T[]): T => array[0];
@@ -128,7 +126,9 @@ const DATA2 = [
];
@Component({
- template: `
+ template: `
+
{{ parseArray(cell.value) }}
@@ -164,7 +166,9 @@ class NestedPropertiesGrid2Component {
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, IgxComboComponent, FormsModule]
})
class NestedPropertyGridComponent {
@ViewChild('grid', { static: true, read: IgxGridComponent })
@@ -210,8 +214,7 @@ describe('Grid - nested data source properties #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [NestedPropertiesGridComponent],
- imports: [IgxGridModule, NoopAnimationsModule]
+ imports: [NoopAnimationsModule, NestedPropertiesGridComponent]
});
}));
@@ -343,8 +346,7 @@ describe('Grid nested data advanced editing #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [NestedPropertiesGrid2Component],
- imports: [IgxGridModule, NoopAnimationsModule]
+ imports: [NoopAnimationsModule, NestedPropertiesGrid2Component]
});
}));
@@ -502,9 +504,7 @@ describe('Edit cell with data of type Array #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [NestedPropertyGridComponent],
- imports: [IgxGridModule, IgxComboModule, FormsModule, IgxToggleModule,
- ReactiveFormsModule, IgxFocusModule, IgxInputGroupModule, NoopAnimationsModule]
+ imports: [NoopAnimationsModule, NestedPropertyGridComponent]
});
}));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
index 27202f90afa..e69db157e91 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
@@ -1,5 +1,4 @@
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { IgxGridModule } from './public_api';
import { GridWithUndefinedDataComponent } from '../../test-utils/grid-samples.spec';
import { PagingComponent, RemotePagingComponent } from '../../test-utils/grid-base-components.spec';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -34,12 +33,9 @@ const verifyGridPager = (fix, rowsCount, firstCellValue, pagerText, buttonsVisib
describe('IgxGrid - Grid Paging #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- PagingComponent,
+ imports: [NoopAnimationsModule, PagingComponent,
GridWithUndefinedDataComponent,
- RemotePagingComponent
- ],
- imports: [IgxGridModule, NoopAnimationsModule]
+ RemotePagingComponent]
});
}));
@@ -453,7 +449,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
expect(errorMessage).toBe('');
grid = fix.componentInstance.grid;
expect(grid.rowList.length).toBe(0);
- tick(305);
+ tick(16);
fix.detectChanges();
expect(grid.rowList.length).toBe(5);
@@ -476,7 +472,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
grid = fix.componentInstance.grid;
expect(grid.paginator.totalPages).toBe(4);
const page = (index: number) => grid.page = index;
- let desiredPageIndex = 2;
+ const desiredPageIndex = 2;
page(2);
fix.detectChanges();
tick();
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
index e28e00da373..0f216fd115e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
@@ -1,11 +1,9 @@
import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxGridModule } from './public_api';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { ColumnPinningPosition, GridSelectionMode } from '../common/enums';
-import { IPinningConfig } from '../grid.common';
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
import {
CELL_PINNED_CLASS,
@@ -28,6 +26,7 @@ import { IgxGridComponent } from './grid.component';
import { DropPosition } from '../moving/moving.service';
import { clearGridSubs, setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IPinningConfig } from '../public_api';
describe('IgxGrid - Column Pinning #grid', () => {
@@ -37,15 +36,14 @@ describe('IgxGrid - Column Pinning #grid', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
PinningComponent,
PinOnInitAndSelectionComponent,
GridFeaturesComponent,
MultiColumnHeadersWithGroupingComponent,
GridPinningMRLComponent
-
- ],
- imports: [NoopAnimationsModule, IgxGridModule]
+ ]
}).compileComponents();
}))
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
index e26f183436b..314c1e496b4 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -14,7 +14,10 @@ import { IGridSortingStrategy, IGridGroupingStrategy } from '../common/strategy'
/**
* @hidden
*/
-@Pipe({ name: 'gridSort' })
+@Pipe({
+ name: 'gridSort',
+ standalone: true
+})
export class IgxGridSortingPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -37,7 +40,10 @@ export class IgxGridSortingPipe implements PipeTransform {
/**
* @hidden
*/
-@Pipe({ name: 'gridGroupBy' })
+@Pipe({
+ name: 'gridGroupBy',
+ standalone: true
+})
export class IgxGridGroupingPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -74,7 +80,10 @@ export class IgxGridGroupingPipe implements PipeTransform {
/**
* @hidden
*/
-@Pipe({ name: 'gridPaging' })
+@Pipe({
+ name: 'gridPaging',
+ standalone: true
+})
export class IgxGridPagingPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
@@ -105,7 +114,10 @@ export class IgxGridPagingPipe implements PipeTransform {
/**
* @hidden
*/
-@Pipe({ name: 'gridFiltering' })
+@Pipe({
+ name: 'gridFiltering',
+ standalone: true
+})
export class IgxGridFilteringPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
index 34e9249e8ed..e966324031e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
@@ -1,6 +1,6 @@
import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { IgxGridModule, IgxGridComponent } from './public_api';
+import { IgxGridComponent } from './public_api';
import { BasicGridSearchComponent } from '../../test-utils/grid-base-components.spec';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { GridWithAvatarComponent, GroupableGridSearchComponent, ScrollableGridSearchComponent } from '../../test-utils/grid-samples.spec';
@@ -25,13 +25,13 @@ describe('IgxGrid - search API #grid', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
BasicGridSearchComponent,
GridWithAvatarComponent,
GroupableGridSearchComponent,
ScrollableGridSearchComponent
- ],
- imports: [IgxGridModule, NoopAnimationsModule]
+ ]
}).compileComponents();
}))
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts
index 9200e59f66a..4c59f0943e0 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts
@@ -1,6 +1,5 @@
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { IgxGridComponent } from './grid.component';
-import { IgxGridModule } from './public_api';
import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -18,13 +17,12 @@ describe('IgxGrid - Grid Sorting #grid', () => {
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
+ imports: [
GridDeclaredColumnsComponent,
SortByParityComponent,
GridWithPrimaryKeyComponent,
- SortByAnotherColumnComponent
- ],
- imports: [NoopAnimationsModule, IgxGridModule]
+ NoopAnimationsModule
+ ]
});
}));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts
index 463b574558e..edb74f3652c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts
@@ -9,7 +9,10 @@ import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
interface ISkipRecord { skip?: boolean }
/** @hidden */
-@Pipe({ name: 'gridSummary' })
+@Pipe({
+ name: 'gridSummary',
+ standalone: true
+})
export class IgxGridSummaryPipe implements PipeTransform {
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
index fe61f06877f..b3f40b63e8c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -11,22 +11,41 @@ import {
OnDestroy,
Inject
} from '@angular/core';
+import { NgIf, NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common';
+
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
import { GridColumnDataType } from '../../data-operations/data-util';
import { IgxGridSelectionService } from '../selection/selection.service';
import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
import { IgxGridRowComponent } from './grid-row.component';
import { GridSelectionMode } from '../common/enums';
import { ISelectionNode } from '../common/types';
-import { getLocaleCurrencyCode } from '@angular/common';
+import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
+import { IgxBadgeComponent } from '../../badge/badge.component';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { IgxColumnFormatterPipe } from '../common/pipes';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-grid-groupby-row',
- templateUrl: './groupby-row.component.html'
+ templateUrl: './groupby-row.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ NgTemplateOutlet,
+ DecimalPipe,
+ DatePipe,
+ PercentPipe,
+ CurrencyPipe,
+ IgxIconComponent,
+ IgxBadgeComponent,
+ IgxCheckboxComponent,
+ IgxColumnFormatterPipe
+ ]
})
export class IgxGridGroupByRowComponent implements OnDestroy {
/**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/public_api.ts b/projects/igniteui-angular/src/lib/grids/grid/public_api.ts
index 9301722b2a7..d4ba319f19e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/public_api.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/public_api.ts
@@ -1,11 +1,23 @@
-export * from '../public_api';
+import { IGX_GRID_COMMON_DIRECTIVES } from '../public_api';
+import { IgxGridComponent } from './grid.component';
+import { IgxExcelStyleHeaderIconDirective, IgxGridDetailTemplateDirective, IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from './grid.directives';
+
export * from './grid.component';
export * from './grid.directives';
-export * from './grid.module';
-export * from './grid-api.service';
-export * from './grid.pipes';
-export { IgxGridRowComponent as Ï´IgxGridRowComponent} from './grid-row.component';
-export * from './grid.summary.pipe';
-export * from './grid.details.pipe';
-export * from './groupby-row.component';
-export * from './expandable-cell.component';
+
+/* NOTE: Grid directives collection for ease-of-use import in standalone components scenario */
+export const IGX_GRID_DIRECTIVES = [
+ IgxGridComponent,
+ IgxGroupByRowTemplateDirective,
+ IgxGridDetailTemplateDirective,
+ IgxRowExpandedIndicatorDirective,
+ IgxRowCollapsedIndicatorDirective,
+ IgxHeaderExpandIndicatorDirective,
+ IgxHeaderCollapseIndicatorDirective,
+ IgxExcelStyleHeaderIconDirective,
+ IgxSortHeaderIconDirective,
+ IgxSortAscendingHeaderIconDirective,
+ IgxSortDescendingHeaderIconDirective,
+ IgxGroupAreaDropDirective,
+ ...IGX_GRID_COMMON_DIRECTIVES
+] as const;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts
index ded90f8c5e2..36217c635f8 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts
@@ -1,6 +1,5 @@
import { Component, ViewChild, DebugElement, QueryList, TemplateRef } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -9,20 +8,21 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import { DataParent, SampleTestData } from '../../test-utils/sample-test-data.spec';
import { Point } from '../../services/public_api';
-import { IgxGridModule } from './grid.module';
import { IgxGridComponent } from './grid.component';
import { IgxColumnComponent } from '../columns/column.component';
-import { IgxRowDragDirective } from '../row-drag.directive';
+import { IgxDragIndicatorIconDirective, IgxRowDragDirective, IgxRowDragGhostDirective } from '../row-drag.directive';
import { IRowDragStartEventArgs, IRowDragEndEventArgs } from '../common/events';
import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
-import { IgxHierarchicalGridComponent, IgxHierarchicalGridModule } from '../hierarchical-grid/public_api';
+import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
import { IgxRowIslandComponent } from '../hierarchical-grid/row-island.component';
-import { IgxTreeGridComponent, IgxTreeGridModule } from '../tree-grid/public_api';
+import { IgxTreeGridComponent } from '../tree-grid/public_api';
import { GridSelectionMode } from '../common/enums';
import { CellType, GridType, RowType } from '../common/grid.interface';
import { SortingDirection } from '../../data-operations/sorting-strategy';
import { IgxRowDirective } from '../row.directive';
+import { NgStyle } from '@angular/common';
+import { IgxIconComponent } from '../../icon/icon.component';
const DEBOUNCE_TIME = 50;
const CSS_CLASS_DRAG_INDICATOR = '.igx-grid__drag-indicator';
@@ -61,13 +61,9 @@ describe('Row Drag Tests', () => {
let rowToDrag: IgxRowDirective;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- IgxGridRowDraggableComponent
- ],
imports: [
- FormsModule,
NoopAnimationsModule,
- IgxGridModule
+ IgxGridRowDraggableComponent
]
});
}));
@@ -412,13 +408,9 @@ describe('Row Drag Tests', () => {
let dragRows: DebugElement[];
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- IgxGridRowCustomGhostDraggableComponent
- ],
imports: [
- FormsModule,
NoopAnimationsModule,
- IgxGridModule
+ IgxGridRowCustomGhostDraggableComponent
]
});
}));
@@ -501,13 +493,9 @@ describe('Row Drag Tests', () => {
let dragRows: DebugElement[];
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- IgxGridFeaturesRowDragComponent
- ],
imports: [
- FormsModule,
NoopAnimationsModule,
- IgxGridModule
+ IgxGridFeaturesRowDragComponent
]
});
}));
@@ -957,15 +945,10 @@ describe('Row Drag Tests', () => {
let pointerMoveToDropEvent: PointerEvent;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- IgxHierarchicalGridTestComponent,
- IgxHierarchicalGridCustomGhostTestComponent
- ],
imports: [
- FormsModule,
NoopAnimationsModule,
- IgxGridModule,
- IgxHierarchicalGridModule
+ IgxHierarchicalGridTestComponent,
+ IgxHierarchicalGridCustomGhostTestComponent
]
});
}));
@@ -1111,14 +1094,9 @@ describe('Row Drag Tests', () => {
let pointerMoveToDropEvent: PointerEvent;
configureTestSuite((() => {
return TestBed.configureTestingModule({
- declarations: [
- IgxTreeGridTestComponent
- ],
imports: [
- FormsModule,
NoopAnimationsModule,
- IgxGridModule,
- IgxTreeGridModule
+ IgxTreeGridTestComponent
]
});
}));
@@ -1210,7 +1188,9 @@ describe('Row Drag Tests', () => {
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxDropDirective, NgStyle]
})
export class IgxGridRowDraggableComponent extends DataParent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1278,7 +1258,9 @@ export class IgxGridRowDraggableComponent extends DataParent {
expand_less
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxIconComponent, IgxDropDirective, IgxRowDragGhostDirective, IgxDragIndicatorIconDirective, NgStyle]
})
export class IgxGridRowCustomGhostDraggableComponent extends DataParent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
@@ -1340,7 +1322,9 @@ export class IgxGridRowCustomGhostDraggableComponent extends DataParent {
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxDropDirective]
})
export class IgxGridFeaturesRowDragComponent extends DataParent {
@ViewChild('dragGrid', { read: IgxGridComponent, static: true })
@@ -1379,7 +1363,9 @@ export class IgxGridFeaturesRowDragComponent extends DataParent {
-
- {{dataItem.Address}}
-
+
+
+
+
-
-
- `
+ {{dataItem.Address}}
+
+
+ [style.height.px]="totalHeight" [style.width.px]="calcWidth" #tbody (scroll)="preventContainerScroll($event)">
@@ -35,9 +35,9 @@
| gridRowPinning:id:true:pipeTrigger
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
| gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData">
-
- `
+ `,
+ standalone: true,
+ imports: [NgIf]
})
export class ScrollableComponent {
@ViewChild(IgxToggleDirective, { static: true })
@@ -4689,7 +4695,8 @@ export class ScrollableComponent {
Show Overlay
- `
+ `,
+ standalone: true
})
export class FlexContainerComponent {
@ViewChild('button', { static: true }) public buttonElement: ElementRef;
@@ -4701,34 +4708,3 @@ export class FlexContainerComponent {
this.overlay.show(this.overlay.attach(SimpleDynamicComponent), this.overlaySettings);
}
}
-
-const DYNAMIC_COMPONENTS = [
- EmptyPageComponent,
- SimpleRefComponent,
- EmptyPageInShadowDomComponent,
- SimpleDynamicComponent,
- SimpleBigSizeComponent,
- DownRightButtonComponent,
- TopLeftOffsetComponent,
- TwoButtonsComponent,
- WidthTestOverlayComponent,
- ScrollableComponent,
- FlexContainerComponent
-];
-
-const DIRECTIVE_COMPONENTS = [
- SimpleDynamicWithDirectiveComponent
-];
-
-@NgModule({
- imports: [BrowserModule],
- declarations: [DYNAMIC_COMPONENTS],
- exports: [DYNAMIC_COMPONENTS]
-})
-export class DynamicModule { }
-
-@NgModule({
- imports: [IgxCalendarModule, IgxAvatarModule, IgxDatePickerModule]
-})
-export class IgxComponentsModule {
-}
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
index c2fe7ce7937..5521bc28a50 100644
--- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
+++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
@@ -1,4 +1,4 @@
-import { AnimationBuilder, AnimationReferenceMetadata } from '@angular/animations';
+import { AnimationReferenceMetadata } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import {
ApplicationRef,
@@ -159,7 +159,6 @@ export class IgxOverlayService implements OnDestroy {
private _factoryResolver: ComponentFactoryResolver,
private _appRef: ApplicationRef,
private _injector: Injector,
- private builder: AnimationBuilder,
@Inject(DOCUMENT) private document: any,
private _zone: NgZone,
protected platformUtil: PlatformUtil,
diff --git a/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts
index 7b14b2e8919..4d95b2e08f9 100644
--- a/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts
+++ b/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts
@@ -71,7 +71,7 @@ export class IgxTransactionService
+ [style.width.px]="calcWidth">
@@ -56,13 +56,13 @@
| gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
| gridAddRow:false:pipeTrigger
| gridRowPinning:id:false:pipeTrigger"
- [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
- [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
+ [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
+ [igxForContainerSize]="calcHeight" [igxForItemSize]="renderedRowHeight" [igxForTrackBy]="trackChanges"
#verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
+ [igxTemplateOutlet]="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))"
+ [igxTemplateOutletContext]="getContext(rowData, rowIndex, false)" (viewCreated)="viewCreatedHandler($event)"
+ (viewMoved)="viewMovedHandler($event)" (cachedViewLoaded)="cachedViewLoaded($event)">
@@ -80,13 +80,13 @@
-
+ [data]="rowData" [layout]="layout" #row>
@@ -99,45 +99,45 @@
-
+
- `,
+ standalone: true
})
export class TwoButtonsComponent {
public settings: OverlaySettings = { modal: false };
@@ -4620,7 +4623,8 @@ export class TwoButtonsComponent {
width: 100px;
height: 60px;
border: 0;
- }`]
+ }`],
+ standalone: true
})
export class WidthTestOverlayComponent {
@@ -4658,7 +4662,9 @@ export class WidthTestOverlayComponent {
AAAAA
AAAAA
-
-
-State: {{display[key]}}
-Region: {{display.region}}
-This is a header
-
+
+
+ State: {{display[key]}}
+ Region: {{display.region}}
+ This is a header
+
-
-
-
`
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxSimpleComboComponent]
})
export class IgxBottomPositionSimpleComboComponent {
@ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
index 613fb6767ab..c155a610c7e 100644
--- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
+++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
@@ -1,41 +1,31 @@
-import { CommonModule } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- ElementRef,
- EventEmitter,
- HostListener,
- Inject,
- Injector,
- NgModule,
- Optional,
- Output,
- ViewChild
+ AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Inject, Injector,
+ Optional, Output, ViewChild
} from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
-import { IgxCheckboxModule } from '../checkbox/checkbox.component';
+
import { IgxComboAddItemComponent } from '../combo/combo-add-item.component';
import { IgxComboDropDownComponent } from '../combo/combo-dropdown.component';
import { IgxComboItemComponent } from '../combo/combo-item.component';
import { IgxComboAPIService } from '../combo/combo.api';
import { IgxComboBaseDirective, IGX_COMBO_COMPONENT } from '../combo/combo.common';
-import { IgxComboModule } from '../combo/combo.component';
-import { DisplayDensityToken, IDisplayDensityOptions } from '../core/displayDensity';
+import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
import { IgxSelectionAPIService } from '../core/selection';
import { CancelableEventArgs, IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../core/utils';
-import { IgxButtonModule } from '../directives/button/button.directive';
-import { IgxForOfModule } from '../directives/for-of/for_of.directive';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { IgxTextSelectionDirective, IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
-import { IgxToggleModule } from '../directives/toggle/toggle.directive';
-import { IgxDropDownModule } from '../drop-down/public_api';
-import { IgxIconModule, IgxIconService } from '../icon/public_api';
-import {
- IgxInputGroupModule,
- IgxInputGroupType,
- IGX_INPUT_GROUP_TYPE} from '../input-group/public_api';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
+import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
+import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive';
+import { IgxIconService } from '../icon/icon.service';
+import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
+import { IgxComboFilteringPipe, IgxComboGroupingPipe } from '../combo/combo.pipes';
+import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
+import { IgxIconComponent } from '../icon/icon.component';
+import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
+import { IgxInputDirective } from '../directives/input/input.directive';
+import { IgxInputGroupComponent } from '../input-group/input-group.component';
/** Emitted when an igx-simple-combo's selection is changing. */
export interface ISimpleComboSelectionChangingEventArgs extends CancelableEventArgs, IBaseEventArgs {
@@ -73,7 +63,9 @@ export interface ISimpleComboSelectionChangingEventArgs extends CancelableEventA
IgxComboAPIService,
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
- ]
+ ],
+ standalone: true,
+ imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe]
})
export class IgxSimpleComboComponent extends IgxComboBaseDirective implements ControlValueAccessor, AfterViewInit {
/** @hidden @internal */
@@ -550,16 +542,3 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
: value !== undefined;
}
}
-
-@NgModule({
- declarations: [IgxSimpleComboComponent],
- imports: [
- IgxComboModule, IgxRippleModule, CommonModule,
- IgxInputGroupModule, FormsModule, ReactiveFormsModule,
- IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
- IgxDropDownModule, IgxButtonModule, IgxIconModule,
- IgxTextSelectionModule
- ],
- exports: [IgxSimpleComboComponent, IgxComboModule]
-})
-export class IgxSimpleComboModule { }
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.module.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.module.ts
new file mode 100644
index 00000000000..50e1b8b5a6d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IGX_SIMPLE_COMBO_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [
+ ...IGX_SIMPLE_COMBO_DIRECTIVES
+ ],
+ exports: [
+ ...IGX_SIMPLE_COMBO_DIRECTIVES
+ ]
+})
+export class IgxSimpleComboModule { }
diff --git a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts
index ddb1f20f2fd..e4d296d232b 100644
--- a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts
+++ b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts
@@ -1,13 +1,16 @@
import { Component, Input, TemplateRef, HostBinding, ElementRef } from '@angular/core';
import { SliderHandle } from '../slider.common';
import { IgxSliderThumbComponent } from '../thumb/thumb-slider.component';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
/**
* @hidden
*/
@Component({
selector: 'igx-thumb-label',
- templateUrl: 'thumb-label.component.html'
+ templateUrl: 'thumb-label.component.html',
+ standalone: true,
+ imports: [NgClass, NgTemplateOutlet]
})
export class IgxThumbLabelComponent {
@Input()
diff --git a/projects/igniteui-angular/src/lib/slider/public_api.ts b/projects/igniteui-angular/src/lib/slider/public_api.ts
index 4137b05942f..634b5483c8f 100644
--- a/projects/igniteui-angular/src/lib/slider/public_api.ts
+++ b/projects/igniteui-angular/src/lib/slider/public_api.ts
@@ -1,2 +1,13 @@
+import { IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective } from './slider.common';
+import { IgxSliderComponent } from './slider.component';
+
export * from './slider.component';
export * from './slider.common';
+
+/* NOTE: Slider directives collection for ease-of-use import in standalone components scenario */
+export const IGX_SLIDER_DIRECTIVES = [
+ IgxSliderComponent,
+ IgxThumbFromTemplateDirective,
+ IgxThumbToTemplateDirective,
+ IgxTickLabelTemplateDirective
+] as const;
diff --git a/projects/igniteui-angular/src/lib/slider/slider.common.ts b/projects/igniteui-angular/src/lib/slider/slider.common.ts
index 3207abae0f4..95c3ae854c0 100644
--- a/projects/igniteui-angular/src/lib/slider/slider.common.ts
+++ b/projects/igniteui-angular/src/lib/slider/slider.common.ts
@@ -13,7 +13,8 @@ import { mkenum } from '../core/utils';
* @context {@link IgxSliderComponent.context}
*/
@Directive({
- selector: '[igxSliderThumbFrom]'
+ selector: '[igxSliderThumbFrom]',
+ standalone: true
})
export class IgxThumbFromTemplateDirective {}
@@ -29,7 +30,8 @@ export class IgxThumbFromTemplateDirective {}
* @context {@link IgxSliderComponent.context}
*/
@Directive({
- selector: '[igxSliderThumbTo]'
+ selector: '[igxSliderThumbTo]',
+ standalone: true
})
export class IgxThumbToTemplateDirective {}
@@ -39,7 +41,8 @@ export class IgxThumbToTemplateDirective {}
* @context {@link IgxTicksComponent.context}
*/
@Directive({
- selector: '[igxSliderTickLabel]'
+ selector: '[igxSliderTickLabel]',
+ standalone: true
})
export class IgxTickLabelTemplateDirective {}
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
index cd73264f1ba..f02fe6240e9 100644
--- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
@@ -6,8 +6,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { DIR_DOCUMENT, IgxDirectionality } from '../services/direction/directionality';
import { configureTestSuite } from '../test-utils/configure-suite';
import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
-import { IgxSliderType, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common';
-import { IgxSliderComponent, IgxSliderModule } from './slider.component';
+import { IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common';
+import { IgxSliderComponent } from './slider.component';
declare let Simulator: any;
const SLIDER_CLASS = '.igx-slider';
@@ -35,7 +35,8 @@ describe('IgxSlider', () => {
fakeDoc = { body: {}, documentElement: {} };
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule, FormsModule, ReactiveFormsModule, HammerModule,
SliderInitializeTestComponent,
SliderMinMaxComponent,
SliderTestComponent,
@@ -48,9 +49,6 @@ describe('IgxSlider', () => {
SliderReactiveFormComponent,
SliderWithValueAdjustmentComponent
],
- imports: [
- IgxSliderModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule, HammerModule
- ],
providers: [
{ provide: DIR_DOCUMENT, useFactory: () => fakeDoc }
]
@@ -1356,8 +1354,8 @@ describe('IgxSlider', () => {
const componentInst = fix.componentInstance;
const slider = componentInst.slider;
- let expectedMinVal = 0;
- let expectedMaxVal = 10;
+ const expectedMinVal = 0;
+ const expectedMaxVal = 10;
expect(slider.minValue).toEqual(expectedMinVal);
expect(slider.maxValue).toEqual(expectedMaxVal);
@@ -1789,7 +1787,9 @@ describe('IgxSlider', () => {
selector: 'igx-slider-rtl',
template: `
-
+
- ` + `, + standalone: true, + imports: [ + IgxStepperComponent, + IgxStepComponent, + IgxStepTitleDirective, + IgxStepIndicatorDirective, + IgxStepSubTitleDirective, + IgxStepContentDirective, + IgxStepInvalidIndicatorDirective, + IgxStepCompletedIndicatorDirective, + IgxStepActiveIndicatorDirective, + IgxIconComponent, + IgxInputDirective, + IgxInputGroupComponent, + NgIf + ] }) export class IgxStepperSampleTestComponent { @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent; - public horizontalAnimationType = 'slide'; - public verticalAnimationType = 'grow'; + public horizontalAnimationType: HorizontalAnimationType = 'slide'; + public verticalAnimationType: VerticalAnimationType = 'grow'; public animationDuration = 300; public displayHiddenStep = false; @@ -1322,7 +1340,9 @@ export class IgxStepperSampleTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxStepperComponent, IgxStepComponent]
})
export class IgxStepperLinearComponent {
@ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts
index 6c74fe69a67..a8c7572882a 100644
--- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts
+++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts
@@ -1,8 +1,8 @@
import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { CommonModule } from '@angular/common';
+import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
import {
AfterContentInit, ChangeDetectorRef, Component, ContentChild, ContentChildren,
- ElementRef, EventEmitter, HostBinding, Inject, Input, NgModule, OnChanges, OnDestroy,
+ ElementRef, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy,
OnInit, Output, QueryList, SimpleChanges,TemplateRef
} from '@angular/core';
import { Subject } from 'rxjs';
@@ -10,7 +10,7 @@ import { takeUntil } from 'rxjs/operators';
import { growVerIn, growVerOut } from '../animations/grow';
import { fadeIn } from '../animations/main';
import { HorizontalAnimationType, IgxCarouselComponentBase } from '../carousel/carousel-base';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
import { AnimationService } from '../services/animation/animation';
@@ -22,9 +22,7 @@ import {
import {
IgxStepActiveIndicatorDirective,
IgxStepCompletedIndicatorDirective,
- IgxStepContentDirective,
- IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective,
- IgxStepSubTitleDirective, IgxStepTitleDirective
+ IgxStepInvalidIndicatorDirective
} from './stepper.directive';
import { IgxStepperService } from './stepper.service';
@@ -74,7 +72,9 @@ import { IgxStepperService } from './stepper.service';
providers: [
IgxStepperService,
{ provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent },
- ]
+ ],
+ standalone: true,
+ imports: [NgIf, NgTemplateOutlet, NgFor]
})
export class IgxStepperComponent extends IgxCarouselComponentBase implements IgxStepper, OnChanges, OnInit, AfterContentInit, OnDestroy {
@@ -540,32 +540,4 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
}
}
-@NgModule({
- imports: [
- CommonModule,
- IgxRippleModule
- ],
- declarations: [
- IgxStepComponent,
- IgxStepperComponent,
- IgxStepTitleDirective,
- IgxStepSubTitleDirective,
- IgxStepIndicatorDirective,
- IgxStepContentDirective,
- IgxStepActiveIndicatorDirective,
- IgxStepCompletedIndicatorDirective,
- IgxStepInvalidIndicatorDirective,
- ],
- exports: [
- IgxStepComponent,
- IgxStepperComponent,
- IgxStepTitleDirective,
- IgxStepSubTitleDirective,
- IgxStepIndicatorDirective,
- IgxStepContentDirective,
- IgxStepActiveIndicatorDirective,
- IgxStepCompletedIndicatorDirective,
- IgxStepInvalidIndicatorDirective,
- ]
-})
-export class IgxStepperModule { }
+
diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts
index 50f1f34ad67..b2b549137c1 100644
--- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts
+++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts
@@ -3,27 +3,32 @@ import { IgxStep, IGX_STEP_COMPONENT } from './stepper.common';
import { IgxStepperService } from './stepper.service';
@Directive({
- selector: '[igxStepActiveIndicator]'
+ selector: '[igxStepActiveIndicator]',
+ standalone: true
})
export class IgxStepActiveIndicatorDirective { }
@Directive({
- selector: '[igxStepCompletedIndicator]'
+ selector: '[igxStepCompletedIndicator]',
+ standalone: true
})
export class IgxStepCompletedIndicatorDirective { }
@Directive({
- selector: '[igxStepInvalidIndicator]'
+ selector: '[igxStepInvalidIndicator]',
+ standalone: true
})
export class IgxStepInvalidIndicatorDirective { }
@Directive({
- selector: '[igxStepIndicator]'
+ selector: '[igxStepIndicator]',
+ standalone: true
})
export class IgxStepIndicatorDirective { }
@Directive({
- selector: '[igxStepTitle]'
+ selector: '[igxStepTitle]',
+ standalone: true
})
export class IgxStepTitleDirective {
@HostBinding('class.igx-stepper__step-title')
@@ -31,7 +36,8 @@ export class IgxStepTitleDirective {
}
@Directive({
- selector: '[igxStepSubTitle]'
+ selector: '[igxStepSubTitle]',
+ standalone: true
})
export class IgxStepSubTitleDirective {
@HostBinding('class.igx-stepper__step-subtitle')
@@ -39,7 +45,8 @@ export class IgxStepSubTitleDirective {
}
@Directive({
- selector: '[igxStepContent]'
+ selector: '[igxStepContent]',
+ standalone: true
})
export class IgxStepContentDirective {
private get target(): IgxStep {
diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.module.ts b/projects/igniteui-angular/src/lib/stepper/stepper.module.ts
new file mode 100644
index 00000000000..45fedb83aa6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/stepper/stepper.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IGX_STEPPER_DIRECTIVES } from './public_api';
+
+/**
+ * @hidden
+ * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
+ */
+@NgModule({
+ imports: [
+ ...IGX_STEPPER_DIRECTIVES
+ ],
+ exports: [
+ ...IGX_STEPPER_DIRECTIVES
+ ]
+})
+export class IgxStepperModule { }
diff --git a/projects/igniteui-angular/src/lib/switch/README.md b/projects/igniteui-angular/src/lib/switch/README.md
index cc06af1e573..7ac218251d9 100644
--- a/projects/igniteui-angular/src/lib/switch/README.md
+++ b/projects/igniteui-angular/src/lib/switch/README.md
@@ -1,6 +1,6 @@
# igx-switch
-`igx-switch` is a selection component that allows users to make a binary choice for a certain condition. It behaves similar to the switch component sans the indeterminate state.Â
+`igx-switch` is a selection component that allows users to make a binary choice for a certain condition. It behaves similar to the switch component sans the indeterminate state.
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)
Basic usage of `igx-switch`
diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts
index 89d14c06179..481e3ea9f4b 100644
--- a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts
@@ -2,7 +2,6 @@ import { Component, ViewChild } 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';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
import { IgxSwitchComponent } from './switch.component';
import { configureTestSuite } from '../test-utils/configure-suite';
@@ -13,7 +12,8 @@ describe('IgxSwitch', () => {
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [
+ imports: [
+ NoopAnimationsModule,
InitSwitchComponent,
SwitchSimpleComponent,
SwitchRequiredComponent,
@@ -22,8 +22,7 @@ describe('IgxSwitch', () => {
SwitchFormComponent,
SwitchFormGroupComponent,
IgxSwitchComponent
- ],
- imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule]
+ ]
}).compileComponents();
}));
@@ -305,14 +304,21 @@ describe('IgxSwitch', () => {
});
});
-@Component({ template: `Init ` })
+@Component({
+ template: `Init `,
+ standalone: true,
+ imports: [IgxSwitchComponent]
+})
class InitSwitchComponent {
@ViewChild('switch', { static: true }) public switch: IgxSwitchComponent;
}
@Component({
template: `Simple `})
+[(ngModel)]="subscribed" [checked]="subscribed">Simple`,
+ standalone: true,
+ imports: [FormsModule, IgxSwitchComponent]
+})
class SwitchSimpleComponent {
@ViewChild('switch', { static: true }) public switch: IgxSwitchComponent;
public changeEventCalled = false;
@@ -327,7 +333,9 @@ class SwitchSimpleComponent {
}
@Component({
- template: `Required `
+ template: `Required `,
+ standalone: true,
+ imports: [IgxSwitchComponent]
})
class SwitchRequiredComponent {
@ViewChild('switch', { static: true }) public switch: IgxSwitchComponent;
@@ -335,7 +343,9 @@ class SwitchRequiredComponent {
@Component({
template: `
`
+ `,
+ standalone: true,
+ imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxBottomNavContentComponent]
})
export class TabBarTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true }) public bottomNav: IgxBottomNavComponent;
@@ -102,44 +107,15 @@ export class TabBarTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxBottomNavContentComponent]
})
export class BottomTabBarTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true }) public bottomNav: IgxBottomNavComponent;
@ViewChild('wrapperDiv', { static: true }) public wrapperDiv: any;
}
-// @Component({
-// template: `
-//
+
+
+
@@ -1298,13 +1300,29 @@ describe('Stepper service unit tests', () => {
- ` + `, + standalone: true, + imports: [ + IgxStepperComponent, + IgxStepComponent, + IgxStepTitleDirective, + IgxStepIndicatorDirective, + IgxStepSubTitleDirective, + IgxStepContentDirective, + IgxStepInvalidIndicatorDirective, + IgxStepCompletedIndicatorDirective, + IgxStepActiveIndicatorDirective, + IgxIconComponent, + IgxInputDirective, + IgxInputGroupComponent, + NgIf + ] }) export class IgxStepperSampleTestComponent { @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent; - public horizontalAnimationType = 'slide'; - public verticalAnimationType = 'grow'; + public horizontalAnimationType: HorizontalAnimationType = 'slide'; + public verticalAnimationType: VerticalAnimationType = 'grow'; public animationDuration = 300; public displayHiddenStep = false; @@ -1322,7 +1340,9 @@ export class IgxStepperSampleTestComponent {
{{label}}
-
-
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
`
-// })
-// export class TemplatedTabBarTestComponent {
-// @ViewChild(IgxBottomNavComponent, { static: true }) public bottomNav: IgxBottomNavComponent;
-// @ViewChild('wrapperDiv', { static: true }) public wrapperDiv: any;
-// }
-
@Component({
template: `
T1
-// Tab 1 Content
-//T2
-// Tab 2 Content
-//T3
-// Tab 3 Content
-//
@@ -167,7 +143,19 @@ export class BottomTabBarTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [
+ IgxBottomNavComponent,
+ IgxBottomNavItemComponent,
+ IgxBottomNavHeaderComponent,
+ IgxTabHeaderIconDirective,
+ IgxTabHeaderLabelDirective,
+ IgxIconComponent,
+ RouterLinkActive,
+ RouterLink,
+ RouterOutlet
+ ]
})
export class TabBarRoutingTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true })
@@ -201,7 +189,9 @@ export class TabBarRoutingTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxBottomNavContentComponent]
})
export class TabBarTabsOnlyModeTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true })
@@ -229,7 +219,9 @@ export class TabBarTabsOnlyModeTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, RouterLink, RouterLinkActive, RouterOutlet]
})
export class BottomNavRoutingGuardTestComponent {
@ViewChild(IgxBottomNavComponent, { static: true })
@@ -296,7 +288,9 @@ export class BottomNavRoutingGuardTestComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxBottomNavContentComponent]
})
export class BottomNavTestHtmlAttributesComponent {
@ViewChild(IgxBottomNavComponent, { static: true }) public bottomNav: IgxBottomNavComponent;
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-helper-utils.ts b/projects/igniteui-angular/src/lib/test-utils/calendar-helper-utils.ts
similarity index 100%
rename from projects/igniteui-angular/src/lib/calendar/calendar-helper-utils.ts
rename to projects/igniteui-angular/src/lib/test-utils/calendar-helper-utils.ts
diff --git a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts
index 96cf5dc63d5..1a85e4c1970 100644
--- a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts
@@ -36,15 +36,15 @@ export class ControlsFunction {
fix.detectChanges();
}
- public static verifyButtonIsSelected(element: HTMLElement, selected: boolean = true) {
+ public static verifyButtonIsSelected(element: HTMLElement, selected = true) {
expect(element.classList.contains(BUTTON_SELECTED_CLASS)).toEqual(selected);
}
- public static verifyButtonIsDisabled(element: HTMLElement, disabled: boolean = true) {
+ public static verifyButtonIsDisabled(element: HTMLElement, disabled = true) {
expect(element.classList.contains(BUTTON_DISABLED_CLASS)).toEqual(disabled);
}
- public static verifyCheckboxState(element: HTMLElement, checked: boolean = true, indeterminate = false) {
+ public static verifyCheckboxState(element: HTMLElement, checked = true, indeterminate = false) {
expect(element.classList.contains(CHECKBOX_CHECKED_CLASS)).toEqual(checked);
expect(element.classList.contains(CHECKBOX_IND_CLASS)).toEqual(indeterminate);
}
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts
index f0ee2103fca..69aac85ad7d 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts
@@ -4,6 +4,17 @@ import { ColumnDefinitions, GridTemplateStrings } from './template-strings.spec'
import { IgxGridComponent } from '../grids/grid/grid.component';
import { IgxColumnActionsComponent } from '../grids/column-actions/column-actions.component';
import { GridPagingMode } from '../grids/common/enums';
+import { IgxColumnComponent } from '../grids/columns/column.component';
+import { IgxGridToolbarComponent } from '../grids/toolbar/grid-toolbar.component';
+import { IgxGridToolbarHidingComponent } from '../grids/toolbar/grid-toolbar-hiding.component';
+import { IgxGridToolbarActionsComponent } from '../grids/toolbar/common';
+import { IgxPaginatorComponent } from '../paginator/paginator.component';
+import { IgxColumnGroupComponent } from '../grids/columns/column-group.component';
+import { IgxGridToolbarPinningComponent } from '../grids/toolbar/grid-toolbar-pinning.component';
+import { NgFor, NgIf } from '@angular/common';
+import { IgxCellTemplateDirective } from '../grids/columns/templates.directive';
+import { IgxColumnHidingDirective } from '../grids/column-actions/column-hiding.directive';
+import { IgxColumnPinningDirective } from '../grids/column-actions/column-pinning.directive';
@Component({
template: `
@@ -11,7 +22,9 @@ import { GridPagingMode } from '../grids/common/enums';
[data]="data"
[autoGenerate]="true">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class BasicGridComponent {
@ViewChild(IgxGridComponent, { static: true })
@@ -26,7 +39,9 @@ export class BasicGridComponent {
[data]="data"
[autoGenerate]="autoGenerate">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class GridAutoGenerateComponent extends BasicGridComponent {
public autoGenerate = true;
@@ -39,7 +54,9 @@ export class GridAutoGenerateComponent extends BasicGridComponent {
[autoGenerate]="autoGenerate"
[height]="height" [width]="width">
- `
+ `,
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class GridWithSizeComponent extends GridAutoGenerateComponent {
public width = '100%';
@@ -51,7 +68,9 @@ export class GridWithSizeComponent extends GridAutoGenerateComponent {
}
@Component({
- template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.generatedEditable)
+ template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.generatedEditable),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class GridNxMComponent extends GridWithSizeComponent implements OnInit {
public colsCount: number;
@@ -78,7 +97,9 @@ export class GridNxMComponent extends GridWithSizeComponent implements OnInit {
@Component({
template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.idNameJobHireDate, '',
- '
- ${GridTemplateStrings.declareGrid('[autoGenerate]="autoGenerate"', '', ColumnDefinitions.indexAndValue)}
`
-})
-export class GridInDivComponent extends GridAutoGenerateComponent {
- public override data = SampleTestData.oneItemNumberData();
- public override autoGenerate = false;
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid(` width="500px"`, '', ColumnDefinitions.pinnedTwoOfFour)
-})
-export class PinningAndResizingComponent extends BasicGridComponent {
- public override data = SampleTestData.personIDNameRegionData();
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid(` width="600px" height="600px" [autoGenerate]="false"`, '',
- ColumnDefinitions.pinnedThreeOfEight)
-})
-export class LargePinnedColGridComponent extends BasicGridComponent {
- public override data = SampleTestData.generateProductData(75);
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid('',
- EventSubscriptions.columnResized,
- ColumnDefinitions.gridFeatures)
-})
-export class SortingAndResizingComponent extends BasicGridComponent {
-
- public count = 0;
- public column;
- public prevWidth;
- public newWidth;
-
- public override data = SampleTestData.productInfoData();
-
- public columnResized(event) {
- this.count++;
- this.column = event.column;
- this.prevWidth = event.prevWidth;
- this.newWidth = event.newWidth;
- }
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid(` [height]="'800px'"`, '',
- ColumnDefinitions.resizableColsComponent)
-})
-export class ResizableColumnsComponent extends BasicGridComponent {
-
- public columns = [
- { field: 'ID', resizable: true, maxWidth: 200, minWidth: 70 },
- { field: 'CompanyName', resizable: true },
- { field: 'ContactName', resizable: true },
- { field: 'ContactTitle', resizable: true },
- { field: 'Address', resizable: true },
- { field: 'City', resizable: true },
- { field: 'Region', resizable: true },
- { field: 'PostalCode', resizable: true },
- { field: 'Phone', resizable: true },
- { field: 'Fax', resizable: true }
- ];
-
- public override data = SampleTestData.contactInfoDataFull();
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid(` [height]="'800px'"`, '',
- ColumnDefinitions.iterableComponent)
-})
-export class ColumnsFromIterableComponent extends BasicGridComponent {
-
- public columns = ['ID', 'Name'];
- public override data = SampleTestData.personIDNameData();
-}
-
-@Component({
- template: GridTemplateStrings.declareGrid('', '',
- ColumnDefinitions.columnTemplates)
-})
-export class TemplatedColumnsComponent extends BasicGridComponent {
- @ViewChild('newHeader', { read: TemplateRef, static: true })
- public newHeaderTemplate: TemplateRef
-
-
-
`
-})
-export class WidthAndHeightComponent extends BasicGridComponent {
- public width: string;
- public height: string;
-
- public override data = SampleTestData.generateData(30, 3);
-}
-
-@Component({
- template: `
-
-
-
-
`
-})
-export class NullHeightComponent extends BasicGridComponent {
- public override data = SampleTestData.generateData(20, 5);
-}
-
-@Component({
- template: `
-
${GridTemplateStrings.declareGrid(
- '[height]="height" [moving]="true" [width]="width" [moving]="true" [rowSelection]="rowSelection" [autoGenerate]="autoGenerate"',
+ '[height]="height" [moving]="true" [width]="width" [rowSelection]="rowSelection" [autoGenerate]="autoGenerate"',
EventSubscriptions.columnMovingStart + EventSubscriptions.columnMoving + EventSubscriptions.columnMovingEnd,
- ColumnDefinitions.movableColumns)}
`
+ ColumnDefinitions.movableColumns)}`,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class MovableColumnsComponent extends BasicGridComponent {
public override data = SampleTestData.personIDNameRegionData();
@@ -811,7 +475,9 @@ export class MovableColumnsComponent extends BasicGridComponent {
}
@Component({
- template: GridTemplateStrings.declareGrid(`[moving]="true" height="300px" width="500px"`, '', ColumnDefinitions.movableColumns)
+ template: GridTemplateStrings.declareGrid(`[moving]="true" height="300px" width="500px"`, '', ColumnDefinitions.movableColumns),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent]
})
export class MovableTemplatedColumnsComponent extends BasicGridComponent {
public override data = SampleTestData.personIDNameRegionData();
@@ -821,8 +487,10 @@ export class MovableTemplatedColumnsComponent extends BasicGridComponent {
}
@Component({
- template: GridTemplateStrings.declareGrid(`height="300px" width="500px" [moving]="true" [autoGenerate]="autoGenerate" [paging]="paging"`,
- EventSubscriptions.columnInit, '')
+ template: GridTemplateStrings.declareGrid(`height="300px" width="500px" [moving]="true" [autoGenerate]="autoGenerate"`,
+ EventSubscriptions.columnInit, ''),
+ standalone: true,
+ imports: [IgxGridComponent]
})
export class MovableColumnsLargeComponent extends GridAutoGenerateComponent {
@@ -830,7 +498,6 @@ export class MovableColumnsLargeComponent extends GridAutoGenerateComponent {
public width = '500px';
public height = '400px';
- public paging = false;
public columnInit(column: IgxColumnComponent) {
column.sortable = true;
@@ -844,7 +511,9 @@ export class MovableColumnsLargeComponent extends GridAutoGenerateComponent {
}
@Component({
- template: GridTemplateStrings.declareGrid(`height="800px"`, '', ColumnDefinitions.multiColHeadersColumns)
+ template: GridTemplateStrings.declareGrid(`height="800px"`, '', ColumnDefinitions.multiColHeadersColumns),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective]
})
export class MultiColumnHeadersComponent extends BasicGridComponent {
public override data = SampleTestData.contactInfoDataFull();
@@ -852,8 +521,10 @@ export class MultiColumnHeadersComponent extends BasicGridComponent {
}
@Component({
- template: GridTemplateStrings.declareGrid(`[moving]="true" height="800px" width="500px"`, '',
- ColumnDefinitions.multiColHeadersWithGroupingColumns)
+ template: GridTemplateStrings.declareGrid(`[moving]="true" height="800px" width="500px"`, '',
+ ColumnDefinitions.multiColHeadersWithGroupingColumns),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
})
export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent {
public override data = SampleTestData.contactInfoDataFull();
@@ -862,7 +533,9 @@ export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent
@Component({
- template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameAvatar)
+ template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameAvatar),
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
})
export class GridWithAvatarComponent extends GridWithSizeComponent {
public override data = SampleTestData.personAvatarData();
@@ -872,7 +545,9 @@ export class GridWithAvatarComponent extends GridWithSizeComponent {
@Component({
template: GridTemplateStrings.declareGrid(`height="1000px" width="900px" primaryKey="ID"`, '',
- ColumnDefinitions.summariesGroupByColumns, '', '
- This name is forbidden.
-
-
+ This name is forbidden.
+
+
This name is forbidden.
@@ -123,16 +125,18 @@ export class IgxGridCustomEditorsComponent extends IgxGridValidationTestCustomEr
- `
+ `,
+ standalone: true,
+ imports: [IgxTreeGridComponent, IgxColumnComponent, IgxCellValidationErrorDirective, ForbiddenValidatorDirective, IGX_GRID_VALIDATION_DIRECTIVES, NgFor, NgIf]
})
export class IgxTreeGridValidationTestComponent {
public batchEditing = false;
public rowEditable = true;
public columns = [
- { field: 'ID', dataType: 'string' },
- { field: 'Name', dataType: 'string' },
- { field: 'HireDate', dataType: 'string' },
- { field: 'Age', dataType: 'number' }
+ { field: 'ID', dataType: GridColumnDataType.String },
+ { field: 'Name', dataType: GridColumnDataType.String },
+ { field: 'HireDate', dataType: GridColumnDataType.Date },
+ { field: 'Age', dataType: GridColumnDataType.Number }
];
public data = [...SampleTestData.employeeSmallTreeData()];
diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts
index 2f3db79e15c..a4b933f3a2e 100644
--- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts
@@ -1,13 +1,23 @@
import { Component, ViewChild, OnInit } from '@angular/core';
+import { NgIf } from '@angular/common';
import { SampleTestData } from './sample-test-data.spec';
-import { IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api';
+import { ColumnType, IPinningConfig, IgxAdvancedFilteringDialogComponent, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api';
import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
import { IgxRowIslandComponent } from '../grids/hierarchical-grid/row-island.component';
-import { IPinningConfig } from '../grids/grid.common';
import { ColumnPinningPosition, RowPinningPosition } from '../grids/common/enums';
-import { IgxActionStripComponent } from '../action-strip/public_api';
+import { IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent } from '../action-strip/public_api';
import { HIERARCHICAL_SAMPLE_DATA, HIERARCHICAL_SAMPLE_DATA_SHORT } from 'src/app/shared/sample-data';
import { IgxHierarchicalTransactionServiceFactory } from '../grids/hierarchical-grid/hierarchical-grid-base.directive';
+import { IgxGridToolbarComponent } from '../grids/toolbar/grid-toolbar.component';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
+import { IgxPaginatorComponent } from '../paginator/paginator.component';
+import { IgxColumnGroupComponent } from '../grids/columns/column-group.component';
+import { IgxIconComponent } from '../icon/icon.component';
+import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../grids/selection/row-selectors';
+import { IgxGridToolbarDirective } from '../grids/toolbar/common';
+import { IgxCellHeaderTemplateDirective } from '../grids/columns/templates.directive';
+import { IgxPaginatorDirective } from '../paginator/paginator-interfaces';
@Component({
template: `
@@ -41,7 +51,19 @@ import { IgxHierarchicalTransactionServiceFactory } from '../grids/hierarchical-
- `
+ `,
+ standalone: true,
+ imports: [
+ IgxHierarchicalGridComponent,
+ IgxColumnComponent,
+ IgxColumnGroupComponent,
+ IgxRowIslandComponent,
+ IgxPaginatorComponent,
+ IgxGridToolbarComponent,
+ IgxIconComponent,
+ IgxCellHeaderTemplateDirective,
+ NgIf
+ ]
})
export class IgxHierarchicalGridTestBaseComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
@@ -62,7 +84,7 @@ export class IgxHierarchicalGridTestBaseComponent {
this.data = SampleTestData.generateHGridData(40, 3);
}
- public pinColumn(column: IgxColumnComponent) {
+ public pinColumn(column: ColumnType) {
if (column.pinned) {
column.unpin();
} else {
@@ -104,7 +126,18 @@ export class IgxHierarchicalGridTestBaseComponent {
`,
- providers: [IgxHierarchicalTransactionServiceFactory]
+ providers: [IgxHierarchicalTransactionServiceFactory],
+ standalone: true,
+ imports: [
+ IgxHierarchicalGridComponent,
+ IgxColumnComponent,
+ IgxColumnGroupComponent,
+ IgxRowIslandComponent,
+ IgxPaginatorComponent,
+ IgxGridToolbarComponent,
+ IgxIconComponent,
+ NgIf
+ ]
})
export class IgxHierarchicalGridWithTransactionProviderComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
@@ -152,7 +185,9 @@ export class IgxHierarchicalGridWithTransactionProviderComponent {
- `
+ `,
+ standalone: true,
+ imports: [
+ IgxHierarchicalGridComponent,
+ IgxColumnComponent,
+ IgxRowIslandComponent,
+ IgxCheckboxComponent,
+ IgxPaginatorComponent,
+ IgxPaginatorDirective,
+ IgxRowSelectorDirective,
+ IgxHeadSelectorDirective
+ ]
})
export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
@ViewChild('hGridCustomSelectors', { read: IgxHierarchicalGridComponent, static: true })
@@ -310,11 +360,13 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
-
+
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxRowIslandComponent, IgxButtonDirective]
})
export class IgxHierarchicalGridTestCustomToolbarComponent extends IgxHierarchicalGridTestBaseComponent { }
@@ -331,10 +383,18 @@ export class IgxHierarchicalGridTestCustomToolbarComponent extends IgxHierarchic
- `
+ `,
+ standalone: true,
+ imports: [
+ IgxHierarchicalGridComponent,
+ IgxActionStripComponent,
+ IgxGridPinningActionsComponent,
+ IgxGridEditingActionsComponent,
+ IgxRowIslandComponent
+ ]
})
export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGridTestBaseComponent {
@ViewChild('actionStrip1', { read: IgxActionStripComponent, static: true })
@@ -362,7 +422,9 @@ export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGrid
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, IgxAdvancedFilteringDialogComponent]
})
export class IgxHierGridExternalAdvancedFilteringComponent extends IgxHierarchicalGridTestBaseComponent {
// @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
@@ -385,12 +447,12 @@ export class IgxHierGridExternalAdvancedFilteringComponent extends IgxHierarchic
+
+
@@ -405,7 +467,9 @@ export class IgxHierGridExternalAdvancedFilteringComponent extends IgxHierarchic
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
})
export class IgxHierarchicalGridExportComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hGrid: IgxHierarchicalGridComponent;
@@ -459,7 +523,9 @@ export class IgxHierarchicalGridExportComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent]
})
export class IgxHierarchicalGridMultiColumnHeadersExportComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hGrid: IgxHierarchicalGridComponent;
@@ -493,7 +559,9 @@ export class IgxHierarchicalGridMultiColumnHeadersExportComponent {
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent]
})
export class IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hGrid: IgxHierarchicalGridComponent;
@@ -502,28 +570,30 @@ export class IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent {
@Component({
template: `
-
-
-
-
- `
+ `,
+ standalone: true,
+ imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
})
export class IgxHierarchicalGridSummariesExportComponent {
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hGrid: IgxHierarchicalGridComponent;
diff --git a/projects/igniteui-angular/src/lib/test-utils/list-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/list-components.spec.ts
index 1c816139ac2..c58e5b7a4eb 100644
--- a/projects/igniteui-angular/src/lib/test-utils/list-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/list-components.spec.ts
@@ -1,6 +1,7 @@
import { Component, ViewChild } from '@angular/core';
-import { IgxListComponent } from '../list/public_api';
+import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from '../list/public_api';
import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
+import { IgxIconComponent } from '../icon/icon.component';
@Component({
template: `
@@ -15,7 +16,18 @@ import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
- `
+ `,
+ standalone: true,
+ imports: [
+ IgxListComponent,
+ IgxListItemComponent,
+ IgxIconComponent,
+ IgxListThumbnailDirective,
+ IgxListLineDirective,
+ IgxListLineTitleDirective,
+ IgxListLineSubTitleDirective,
+ IgxListActionDirective
+ ]
})
export class ListDirectivesComponent {
@@ -23,13 +35,15 @@ export class ListDirectivesComponent {
@Component({
template: `
-
-
- Item 1
- Item 2
- Item 3
-
-
`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent]
})
export class BasicListComponent {
@ViewChild(IgxListComponent, { static: true }) public list: IgxListComponent;
@@ -38,27 +52,32 @@ export class BasicListComponent {
@Component({
template: `
-
-
- Header
- Item 1
- Item 2
- Item 3
-
-
`
+
+
+ Header
+ Item 1
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent]
})
export class ListWithHeaderComponent extends BasicListComponent {
}
@Component({
template: `
-
-
- Item 1
- Item 2
- Item 3
-
-
`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent]
+
})
export class ListWithPanningComponent extends BasicListComponent {
public allowRightPanning = true;
@@ -67,33 +86,39 @@ export class ListWithPanningComponent extends BasicListComponent {
@Component({
template: `
-
-
-
-
`
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent]
})
export class EmptyListComponent extends BasicListComponent {
}
@Component({
template: `
-
-
-
-
-
-
`
+ Custom no items message.
-
+
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxEmptyListTemplateDirective]
})
export class CustomEmptyListComponent extends BasicListComponent {
}
@Component({
template: `
- Custom no items message.
+
-
-
-
`
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent]
})
export class ListLoadingComponent extends BasicListComponent {
public isLoading = true;
@@ -101,84 +126,94 @@ export class ListLoadingComponent extends BasicListComponent {
@Component({
template: `
-
-
-
-
-
-
`
+ Loading data...
-
+
+
+
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxDataLoadingTemplateDirective]
})
export class ListCustomLoadingComponent extends ListLoadingComponent {
}
@Component({
template: `
- Loading data...
+
-
- Header 1
- Item 1
- Header 2
- Item 2
- Item 3
-
-
`
+
+
+ Header 1
+ Item 1
+ Header 2
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent]
})
export class TwoHeadersListComponent extends ListWithPanningComponent {
}
@Component({
template: `
-
-
- Header 1
- Item 1
- Header 2
- Item 2
- Item 3
-
-
`
+
+
+ Header 1
+ Item 1
+ Header 2
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent]
})
export class TwoHeadersListNoPanningComponent extends ListWithHeaderComponent {
}
@Component({
template: `
-
-
-
-
-
-
- Header
- Item 1
- Item 2
- Item 3
-
-
`
+ Left
- Right
-
+
+
+
+
+
+ Header
+ Item 1
+ Item 2
+ Item 3
+
+
`,
+ standalone: true,
+ imports: [IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective]
})
export class ListWithPanningTemplatesComponent extends ListWithPanningComponent {
}
@Component({
template: `
- Left
+ Right
+
-
-
-
-
- {{ item.key }}
- {{ item.name }}
-
-
+
+
+
+
+ {{ item.key }}
+ {{ item.name }}
+
+
-
-
-
- library_music
- Tab 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- video_library
- Tab 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- library_books
- Tab 3
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus vitae malesuada odio. Praesent ante lectus, porta a eleifend vel, sodales eu nisl.
- Vivamus sit amet purus eu lectus cursus rhoncus quis non ex.
- Cras ac nulla sed arcu finibus volutpat.
- Vivamus risus ipsum, pharetra a augue nec, euismod fringilla odio.
- Integer id velit rutrum, accumsan ante a, semper nunc.
- Phasellus ultrices tincidunt imperdiet. Nullam vulputate mauris diam.
- Nullam elementum, libero vel varius fermentum, lorem ex bibendum nulla,
- pretium lacinia erat nibh vel massa.
- In hendrerit, sapien ac mollis iaculis, dolor tellus malesuada sem,
- a accumsan lectus nisl facilisis leo.
- Curabitur consequat sit amet nulla at consequat. Duis volutpat tristique luctus.
-
-
-
-
`
+
+
+
+
+ library_music
+ Tab 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+ video_library
+ Tab 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+ library_books
+ Tab 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus vitae malesuada odio. Praesent ante lectus, porta a eleifend vel, sodales eu nisl.
+ Vivamus sit amet purus eu lectus cursus rhoncus quis non ex.
+ Cras ac nulla sed arcu finibus volutpat.
+ Vivamus risus ipsum, pharetra a augue nec, euismod fringilla odio.
+ Integer id velit rutrum, accumsan ante a, semper nunc.
+ Phasellus ultrices tincidunt imperdiet. Nullam vulputate mauris diam.
+ Nullam elementum, libero vel varius fermentum, lorem ex bibendum nulla,
+ pretium lacinia erat nibh vel massa.
+ In hendrerit, sapien ac mollis iaculis, dolor tellus malesuada sem,
+ a accumsan lectus nisl facilisis leo.
+ Curabitur consequat sit amet nulla at consequat. Duis volutpat tristique luctus.
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective]
})
export class TabsTestComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -86,14 +99,17 @@ export class TabsTestComponent {
@Component({
template: `
-
-
-
- {{ tab.name }}
-
-
-
`
+
+
+
+ {{ tab.name }}
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, NgFor]
})
export class TabsTest2Component {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -141,7 +157,7 @@ export class TabsTest2Component {
@Component({
template: `
-
+
@@ -151,7 +167,7 @@ export class TabsTest2Component {
-
+
- `
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective]
})
export class TemplatedTabsTestComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -180,13 +199,16 @@ export class TemplatedTabsTestComponent {
@Component({
template: `
- Tab 1 Content
T2
@@ -171,7 +187,10 @@ export class TabsTest2Component {
-
-
- {{ tab.name }}
-
-
-
`
+
+
+
+ {{ tab.name }}
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, NgFor]
})
export class TabsTestSelectedTabComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -205,39 +227,45 @@ export class TabsTestSelectedTabComponent {
@Component({
template: `
-
-
-
- tab2
- Tab content 1
-
-
- tab2
- Tab content 2
-
-
-
-
+
+
+ tab2
+ Tab content 1
+
+
+ tab2
+ Tab content 2
+
+
+
+
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
+
+ {{ tab.name }}
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, NgFor]
})
export class TabsRtlComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
index 2b0d21296a9..244ec9a0e03 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
@@ -1,21 +1,21 @@
import { Component, ViewChild } from '@angular/core';
-import {
- IgxTooltipTargetDirective, IgxTooltipDirective,
- ITooltipShowEventArgs, ITooltipHideEventArgs
-} from '../directives/tooltip';
+import { IgxTooltipDirective } from '../directives/tooltip/tooltip.directive';
+import { ITooltipHideEventArgs, ITooltipShowEventArgs, IgxTooltipTargetDirective } from '../directives/tooltip/tooltip-target.directive';
@Component({
template: `
-
-
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, RouterLinkActive, RouterLink, RouterOutlet]
})
export class TabsRoutingTestComponent {
@ViewChild(IgxTabsComponent, { static: true })
@@ -270,32 +300,34 @@ export class TabsRoutingTestComponent {
@Component({
template: `
-
+
- `
+
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
- Tab 5
-
-
-
+
+ {{ tab.name }}
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, NgFor]
})
export class AddingSelectedTabComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -534,13 +586,16 @@ export class AddingSelectedTabComponent {
@Component({
template: `
-
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+ Tab 4
+
+
+ Tab 5
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, RouterLink, RouterLinkActive, RouterOutlet]
})
export class TabsRoutingDisabledTestComponent {
@ViewChild(IgxTabsComponent, { static: true })
@@ -304,20 +336,22 @@ export class TabsRoutingDisabledTestComponent {
@Component({
template: `
-
+
- `
+
-
-
- Tab 1
-
-
- Tab X
-
-
-
+
+
+ {{contact.Name}}
+
+
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, NgFor]
})
export class TabsContactsComponent extends TabsTestComponent {
public contacts = SampleTestData.personAvatarData();
@@ -507,13 +556,16 @@ export class TabsContactsComponent extends TabsTestComponent {
@Component({
template: `
-
+
+
+
+ Tab 1
+
+
+ Tab X
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, RouterLinkActive, RouterLink, RouterOutlet]
})
export class TabsRoutingGuardTestComponent {
@ViewChild(IgxTabsComponent, { static: true })
@@ -326,20 +360,22 @@ export class TabsRoutingGuardTestComponent {
@Component({
template: `
-
+
- `
+
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
- `
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective]
})
export class TabsTabsOnlyModeTest1Component {
@ViewChild(IgxTabsComponent, { static: true })
@@ -348,20 +384,22 @@ export class TabsTabsOnlyModeTest1Component {
@Component({
template: `
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
- `
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective]
})
export class TabsTabsOnlyModeTest2Component {
@ViewChild(IgxTabsComponent, { static: true })
@@ -370,31 +408,33 @@ export class TabsTabsOnlyModeTest2Component {
@Component({
template: `
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
- Tab 5
-
-
-
- `
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+ Tab 4
+
+
+ Tab 5
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective]
})
export class TabsDisabledTestComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -402,38 +442,41 @@ export class TabsDisabledTestComponent {
@Component({
template: `
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
-
- Content 1
Content 2
Content 3
-
-
- Tab 4
-
-
- Tab 5
-
-
- Tab 6
-
-
-
`
+ Content 4
Content 5
Content 6
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+ Content 1
Content 2
Content 3
+
+
+ Tab 4
+
+
+ Tab 5
+
+
+ Tab 6
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective]
})
export class TabsTestHtmlAttributesComponent {
@ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
@@ -441,47 +484,50 @@ export class TabsTestHtmlAttributesComponent {
@Component({
template: `
- Content 4
Content 5
Content 6
-
-
-
- Test:
- library_music
- Tab 1
- close
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- Test:
- video_library
- Tab 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- library_books
- Tab 3
- close
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus vitae malesuada odio. Praesent ante lectus, porta a eleifend vel, sodales eu nisl.
- Vivamus sit amet purus eu lectus cursus rhoncus quis non ex.
- Cras ac nulla sed arcu finibus volutpat.
- Vivamus risus ipsum, pharetra a augue nec, euismod fringilla odio.
- Integer id velit rutrum, accumsan ante a, semper nunc.
- Phasellus ultrices tincidunt imperdiet. Nullam vulputate mauris diam.
- Nullam elementum, libero vel varius fermentum, lorem ex bibendum nulla,
- pretium lacinia erat nibh vel massa.
- In hendrerit, sapien ac mollis iaculis, dolor tellus malesuada sem,
- a accumsan lectus nisl facilisis leo.
- Curabitur consequat sit amet nulla at consequat. Duis volutpat tristique luctus.
-
-
-
-
`
+
+
+
+
+ Test:
+ library_music
+ Tab 1
+ close
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+ Test:
+ video_library
+ Tab 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+ library_books
+ Tab 3
+ close
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus vitae malesuada odio. Praesent ante lectus, porta a eleifend vel, sodales eu nisl.
+ Vivamus sit amet purus eu lectus cursus rhoncus quis non ex.
+ Cras ac nulla sed arcu finibus volutpat.
+ Vivamus risus ipsum, pharetra a augue nec, euismod fringilla odio.
+ Integer id velit rutrum, accumsan ante a, semper nunc.
+ Phasellus ultrices tincidunt imperdiet. Nullam vulputate mauris diam.
+ Nullam elementum, libero vel varius fermentum, lorem ex bibendum nulla,
+ pretium lacinia erat nibh vel massa.
+ In hendrerit, sapien ac mollis iaculis, dolor tellus malesuada sem,
+ a accumsan lectus nisl facilisis leo.
+ Curabitur consequat sit amet nulla at consequat. Duis volutpat tristique luctus.
+
+
+
+
+ `,
+ standalone: true,
+ imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, IgxIconComponent, IgxTabHeaderIconDirective, IgxPrefixDirective, IgxSuffixDirective]
})
export class TabsWithPrefixSuffixTestComponent extends TabsTestComponent {
}
@@ -489,16 +535,19 @@ export class TabsWithPrefixSuffixTestComponent extends TabsTestComponent {
@Component({
template: `
-
-
-
- {{contact.Name}}
-
-
-
-
-
-
`
+
-
-
- {{ tab.name }}
-
-
-
`
+
-
-
- {{ tab.name }}
-
-
-
`
+ dummy div for touch tests
-
-
- Hello, I am a tooltip!
-
- `
+ dummy div for touch tests
+
+
+ Hello, I am a tooltip!
+
+ `,
+ standalone: true,
+ imports: [IgxTooltipDirective, IgxTooltipTargetDirective]
})
export class IgxTooltipSingleTargetComponent {
@ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
@@ -38,18 +38,20 @@ export class IgxTooltipSingleTargetComponent {
@Component({
template: `
-
+
-
+
-
- Hello, I am a tooltip!
-
- `
+
+ Hello, I am a tooltip!
+
+ `,
+ standalone: true,
+ imports: [IgxTooltipDirective, IgxTooltipTargetDirective]
})
export class IgxTooltipMultipleTargetsComponent {
@ViewChild('targetOne', { read: IgxTooltipTargetDirective, static: true }) public targetOne: IgxTooltipDirective;
@@ -60,10 +62,12 @@ export class IgxTooltipMultipleTargetsComponent {
@Component({
template: `
-
- `
+
+ `,
+ standalone: true,
+ imports: [IgxTooltipTargetDirective]
})
export class IgxTooltipPlainStringComponent {
@ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
index 6136f3b48da..b37c0fafc92 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
@@ -1,12 +1,22 @@
import { Component, ViewChild, OnInit } from '@angular/core';
+import { NgIf } from '@angular/common';
import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component';
import { SampleTestData } from './sample-test-data.spec';
-import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig } from '../grids/public_api';
-import { DisplayDensity } from '../core/displayDensity';
-import { IgxActionStripComponent } from '../action-strip/action-strip.component';
-import { DefaultSortingStrategy, RowPinningPosition } from 'igniteui-angular';
+import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig, IgxColumnComponent } from '../grids/public_api';
+import { DisplayDensity } from '../core/density';
+import { IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent } from '../action-strip/public_api';
import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
import { IgxTreeGridGroupByAreaComponent } from '../grids/grouping/tree-grid-group-by-area.component';
+import { IgxPaginatorComponent } from '../paginator/paginator.component';
+import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../grids/selection/row-selectors';
+import { IgxIconComponent } from '../icon/icon.component';
+import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/public_api';
+import { IgxColumnGroupComponent } from '../grids/columns/column-group.component';
+import { GridSummaryCalculationMode, RowPinningPosition } from '../grids/common/enums';
+import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
+import { IgxExcelStyleHeaderIconDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective } from '../grids/grid/public_api';
+import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
+import { IgxTreeGridGroupingPipe } from '../grids/tree-grid/tree-grid.grouping.pipe';
@Component({
template: `
@@ -16,7 +26,9 @@ import { IgxTreeGridGroupByAreaComponent } from '../grids/grouping/tree-grid-gro
-
-
`,
+ standalone: true,
+ imports: [IgxTreeGridComponent, IgxColumnComponent]
})
export class IgxTreeGridWrappedInContComponent {
@@ -622,7 +681,9 @@ export class IgxTreeGridWrappedInContComponent {
+
+
-
`
+ Grid without transactions
- This name is forbidden.
-
-
+ This name is forbidden.
+
+ Grid with transactions
TreeGrid
TreeGrid
Hierarchical Grid
- This name is forbidden.
-
-
+ This name is forbidden.
+
+ Sample One
Circular progress indicator
{{process.value}}
TOTAL%
Templated Action Buttons Time Picker
Time picker with custom action button