build: Migrated to Angular 21

.github/workflows/build-app-crm.yml

@@ -49,7 +49,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
       - name: Run lint
         run: npm run lint

.github/workflows/build-app-lob.yml

@@ -54,7 +54,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
       - name: Run lint
         run: npm run lint

.github/workflows/cd-matrix.yml

@@ -84,7 +84,7 @@ jobs:
           echo "//packages.infragistics.com/npm/js-licensed/:_authToken=${{ secrets.INFRAGISTICS_NPM_TOKEN }}" >> .npmrc
 
       - name: Install dependencies
-        run: npm install
+        run: npm install --legacy-peer-deps
         env:
           GITHUB_ACTIONS: true
 
@@ -115,7 +115,7 @@ jobs:
           npx --userconfig=./.npmrc ng g @igniteui/angular-schematics:upgrade-packages --skip-install
 
       - name: Install dependencies after schematics
-        run: npm install
+        run: npm install --legacy-peer-deps
         env:
           GITHUB_ACTIONS: true
 

live-editing/configs/AccordionConfigGenerator.ts

@@ -1,12 +1,10 @@
-import {
-    IgxAccordionModule,
-    IgxRadioModule,
-    IgxTimePickerModule,
-    IgxSliderModule,
-    IgxCheckboxModule,
-    IgxSwitchModule,
-    IgxIconModule
-} from 'igniteui-angular';
+import { IgxAccordionModule } from 'igniteui-angular/accordion';
+import { IgxRadioModule } from 'igniteui-angular/radio';
+import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
+import { IgxSliderModule } from 'igniteui-angular/slider';
+import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
+import { IgxIconModule } from 'igniteui-angular/icon';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 

live-editing/configs/ActionStripConfigGenerator.ts

@@ -1,11 +1,8 @@
 /* eslint-disable max-len */
-import {
-    IgxActionStripModule,
-    IgxRippleModule,
-    IgxButtonModule,
-    IgxIconModule,
-    IgxButtonGroupModule
-} from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
+import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class ActionStripConfigGenerator implements IConfigGenerator {

live-editing/configs/AutocompleteConfigGenerator.ts

@@ -1,8 +1,5 @@
-import {
-    IgxAutocompleteModule,
-    IgxDropDownModule,
-    IgxInputGroupModule
-} from 'igniteui-angular';
+import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 
 import { Config, IConfigGenerator, AppModuleConfig } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';

live-editing/configs/AvatarConfigGenerator.ts

@@ -1,4 +1,4 @@
-import { IgxAvatarModule } from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class AvatarConfigGenerator implements IConfigGenerator {

live-editing/configs/BadgeConfigGenerator.ts

@@ -1,8 +1,6 @@
-import {
-    IgxAvatarModule,
-    IgxBadgeModule,
-    IgxListModule
-} from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
+import { IgxListModule } from 'igniteui-angular/list';
 import { Config, IConfigGenerator, AppModuleConfig } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class BadgeConfigGenerator implements IConfigGenerator {

live-editing/configs/BannerConfigGenerator.ts

@@ -1,15 +1,12 @@
-import {
-    IgxAvatarModule,
-    IgxBannerModule,
-    IgxButtonModule,
-    IgxCardModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxNavbarModule,
-    IgxRippleModule,
-    IgxSwitchModule,
-    IgxToastModule
-} from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxBannerModule } from 'igniteui-angular/banner';
+import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
+import { IgxNavbarModule } from 'igniteui-angular/navbar';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
+import { IgxToastModule } from 'igniteui-angular/toast';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class BannerConfigGenerator implements IConfigGenerator {

live-editing/configs/ButtonConfigGenerator.ts

@@ -1,9 +1,6 @@
-import {
-    IgxButtonGroupModule,
-    IgxButtonModule,
-    IgxIconModule,
-    IgxRippleModule
-} from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
+import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 import { ButtonsRoundnessComponent } from '../../src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample';

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -1,8 +1,7 @@
-import {IgxButtonGroupModule,
-IgxButtonModule,
-IgxIconModule,
-IgxRippleModule,
-IgxRadioModule} from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
+import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxRadioModule } from 'igniteui-angular/radio';
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class ButtonGroupConfigGenerator implements IConfigGenerator {

live-editing/configs/CalendarConfigGenerator.ts

@@ -1,12 +1,10 @@
-import {
-    IgxButtonModule,
-    IgxButtonGroupModule,
-    IgxCalendarModule,
-    IgxCardModule,
-    IgxDialogModule,
-    IgxSelectModule,
-    IgxSnackbarModule
-} from 'igniteui-angular';
+import { IgxButtonModule } from 'igniteui-angular/directives';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxDialogModule } from 'igniteui-angular/dialog';
+import { IgxSelectModule } from 'igniteui-angular/select';
+import { IgxSnackbarModule } from 'igniteui-angular/snackbar';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CalendarConfigGenerator implements IConfigGenerator {

live-editing/configs/CardConfigGenerator.ts

@@ -1,16 +1,11 @@
-import {
-    IgxAvatarModule,
-    IgxButtonModule,
-    IgxCardModule,
-    IgxChipsModule,
-    IgxDividerModule,
-    IgxExpansionPanelModule,
-    IgxIconModule,
-    IgxLayoutModule,
-    IgxListModule,
-    IgxRippleModule,
-    IgxSliderModule
-} from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxButtonModule, IgxDividerModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxChipsModule } from 'igniteui-angular/chips';
+import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxSliderModule } from 'igniteui-angular/slider';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CardConfigGenerator implements IConfigGenerator {

live-editing/configs/CarouselConfigGenerator.ts

@@ -1,14 +1,11 @@
-import {
-    IgxButtonModule,
-    IgxCardModule,
-    IgxCarouselModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxListModule,
-    IgxPrefixDirective,
-    IgxSelectModule,
-    IgxSliderModule
-} from 'igniteui-angular';
+import { IgxButtonModule } from 'igniteui-angular/directives';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxCarouselModule } from 'igniteui-angular/carousel';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule, IgxPrefixDirective } from 'igniteui-angular/input-group';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxSelectModule } from 'igniteui-angular/select';
+import { IgxSliderModule } from 'igniteui-angular/slider';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CarouselConfigGenerator implements IConfigGenerator {

live-editing/configs/CheckboxConfigGenerator.ts

@@ -1,4 +1,4 @@
-import { IgxCheckboxModule } from 'igniteui-angular';
+import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CheckboxConfigGenerator implements IConfigGenerator {

live-editing/configs/ChipConfigGenerator.ts

@@ -1,8 +1,6 @@
-import {
-    IgxAvatarModule,
-    IgxChipsModule,
-    IgxIconModule
-} from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxChipsModule } from 'igniteui-angular/chips';
+import { IgxIconModule } from 'igniteui-angular/icon';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class ChipConfigGenerator implements IConfigGenerator {

live-editing/configs/CircularProgressbarConfigGenerator.ts

@@ -1,9 +1,6 @@
-import {
-    IgxButtonModule,
-    IgxIconModule,
-    IgxProgressBarModule,
-    IgxRippleModule
-} from 'igniteui-angular';
+import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CircularProgressbarConfigGenerator implements IConfigGenerator {

live-editing/configs/ComboConfigGenerator.ts

@@ -1,17 +1,15 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { HttpClientModule } from '@angular/common/http';
-import {
-    IgxButtonModule,
-    IgxButtonGroupModule,
-    IgxCardModule,
-    IgxComboModule,
-    IgxSelectModule,
-    IgxSwitchModule,
-    IgxToastModule,
-    IgxIconModule,
-    IgxSimpleComboModule,
-    IgxProgressBarModule
-} from 'igniteui-angular';
+import { IgxButtonModule } from 'igniteui-angular/directives';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxComboModule } from 'igniteui-angular/combo';
+import { IgxSelectModule } from 'igniteui-angular/select';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
+import { IgxToastModule } from 'igniteui-angular/toast';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
 import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
 import { BaseAppConfig } from './BaseConfig';

live-editing/configs/DatePickerConfigGenerator.ts

@@ -1,16 +1,12 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import {
-    IgxAutocompleteModule,
-    IgxButtonModule,
-    IgxCalendarModule,
-    IgxDatePickerModule,
-    IgxTimePickerModule,
-    IgxDropDownModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxSnackbarModule,
-    IgxToggleModule
-} from 'igniteui-angular';
+import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
+import { IgxButtonModule, IgxToggleModule } from 'igniteui-angular/directives';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
+import { IgxDatePickerModule } from 'igniteui-angular/date-picker';
+import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
+import { IgxSnackbarModule } from 'igniteui-angular/snackbar';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DatePickerConfigGenerator implements IConfigGenerator {

live-editing/configs/DateRangePickerConfigGenerator.ts

@@ -1,11 +1,8 @@
-import {
-    IgxDateRangePickerModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxDateTimeEditorModule,
-    IgxDatePickerModule,
-    IgxSelectModule
-} from 'igniteui-angular';
+import { IgxDatePickerModule, IgxDateRangePickerModule } from 'igniteui-angular/date-picker';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
+import { IgxDateTimeEditorModule } from 'igniteui-angular/core';
+import { IgxSelectModule } from 'igniteui-angular/select';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DateRangePickerConfigGenerator implements IConfigGenerator {

live-editing/configs/DateTimeEditorConfigGenerator.ts

@@ -1,9 +1,7 @@
-import {
-    IgxDateTimeEditorModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxTextSelectionModule
-} from 'igniteui-angular';
+import { IgxDateTimeEditorModule } from 'igniteui-angular/core';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
+import { IgxTextSelectionModule } from 'igniteui-angular/directives';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DateTimeEditorConfigGenerator implements IConfigGenerator {

live-editing/configs/DialogConfigGenerator.ts

@@ -1,11 +1,7 @@
-import {
-    IgxButtonModule,
-    IgxDialogModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxRippleModule,
-    IgxToggleModule
-} from 'igniteui-angular';
+import { IgxButtonModule, IgxRippleModule, IgxToggleModule } from 'igniteui-angular/directives';
+import { IgxDialogModule } from 'igniteui-angular/dialog';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DialogConfigGenerator implements IConfigGenerator {

live-editing/configs/DividerConfigGenerator.ts

@@ -1,4 +1,4 @@
-import { IgxDividerModule } from 'igniteui-angular';
+import { IgxDividerModule } from 'igniteui-angular/directives';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DividerConfigGenerator implements IConfigGenerator {

live-editing/configs/DragAndDropConfigGenerator.ts

@@ -1,17 +1,11 @@
-import {ConnectedPositioningStrategy,
-GlobalPositionStrategy,
-IgxButtonModule,
-IgxCardModule,
-IgxCheckboxModule,
-IgxChipsModule,
-IgxDialogModule,
-IgxDragDirective,
-IgxDragDropModule,
-IgxDropDirective,
-IgxIconModule,
-IgxListModule,
-IgxToggleModule,
-NoOpScrollStrategy} from 'igniteui-angular';
+import { ConnectedPositioningStrategy, GlobalPositionStrategy, NoOpScrollStrategy } from 'igniteui-angular/core';
+import { IgxButtonModule, IgxDragDirective, IgxDragDropModule, IgxDropDirective, IgxToggleModule } from 'igniteui-angular/directives';
+import { IgxCardModule } from 'igniteui-angular/card';
+import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
+import { IgxChipsModule } from 'igniteui-angular/chips';
+import { IgxDialogModule } from 'igniteui-angular/dialog';
+import { IgxIconModule } from 'igniteui-angular/icon';
+import { IgxListModule } from 'igniteui-angular/list';
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class DragAndDropConfigGenerator implements IConfigGenerator {