Updating production with staging (for IgniteUI Angular 22.1)

.claude/skills/igniteui-angular-components/references/directives.md

@@ -138,7 +138,6 @@ onDrop(event: IDropDroppedEventArgs) {
 Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`.
 Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`.
 
-> **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
 
 ## See Also
 

.claude/skills/igniteui-angular-components/references/setup.md

@@ -36,7 +36,6 @@ export const appConfig: ApplicationConfig = {
 | Provider | Package | Required for |
 |---|---|---|
 | `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service |
-| `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) |
 | `provideIgniteIntl()` | `igniteui-angular/core` | Localization for grids, date/time pickers, and components displaying formatted values |
 
 > **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size:

angular.json

@@ -17,10 +17,6 @@
             },
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": [
-              "zone.js",
-              "hammerjs"
-            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
@@ -90,7 +86,6 @@
           "options": {
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
@@ -136,9 +131,6 @@
               "base": "dist/app-lob"
             },
             "index": "projects/app-lob/src/index.html",
-            "polyfills": [
-              "projects/app-lob/src/polyfills.ts"
-            ],
             "tsConfig": "projects/app-lob/tsconfig.app.json",
             "assets": [
               "projects/app-lob/src/favicon.ico",
@@ -220,7 +212,6 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "projects/app-lob/src/test.ts",
-            "polyfills": "projects/app-lob/src/polyfills.ts",
             "tsConfig": "projects/app-lob/tsconfig.spec.json",
             "karmaConfig": "projects/app-lob/karma.conf.js",
             "assets": [
@@ -267,9 +258,6 @@
               "base": "dist/app-crm"
             },
             "index": "projects/app-crm/src/index.html",
-            "polyfills": [
-              "projects/app-crm/src/polyfills.ts"
-            ],
             "tsConfig": "projects/app-crm/tsconfig.app.json",
             "assets": [
               "projects/app-crm/src/favicon.ico",
@@ -350,7 +338,6 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "projects/app-crm/src/test.ts",
-            "polyfills": "projects/app-crm/src/polyfills.ts",
             "tsConfig": "projects/app-crm/tsconfig.spec.json",
             "karmaConfig": "projects/app-crm/karma.conf.js",
             "assets": [

live-editing/configs/AvatarConfigGenerator.ts

@@ -8,20 +8,31 @@ export class AvatarConfigGenerator implements IConfigGenerator {
         const configs = new Array<Config>();
 
         configs.push(new Config({
-            component: 'AvatarSample3Component',
+            component: 'AvatarOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/avatar/"
         }));
 
         configs.push(new Config({
-            component: 'AvatarStylingSampleComponent',
-            additionalFiles: ["/src/app/layouts/avatar/avatar-styling/layout.scss"],
+            component: 'AvatarVariantsComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/avatar/"
+        }));
+
+        configs.push(new Config({
+            component: 'AvatarShapeComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/avatar/"
         }));
 
         configs.push(new Config({
-            component: 'AvatarCSSVariablesComponent',
+            component: 'AvatarSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/avatar/"
+        }));
+
+        configs.push(new Config({
+            component: 'AvatarStylingSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/avatar/"
         }));

live-editing/configs/BadgeConfigGenerator.ts

@@ -17,34 +17,53 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 2
+        // badge overview
         configs.push(new Config({
-            component: 'BadgeSample2Component',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            component: 'BadgeOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 3
+        // badge size
         configs.push(new Config({
-            component: 'BadgeSample3Component',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            component: 'BadgeSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge type
+        configs.push(new Config({
+            component: 'BadgeTypeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge shape
+        configs.push(new Config({
+            component: 'BadgeShapeComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge styling sample
+        // badge variants
         configs.push(new Config({
-            component: 'BadgeStylingSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"],
+            component: 'BadgeVariantsComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge styling
+        configs.push(new Config({
+            component: 'BadgeStylingComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge dot sample
+        // badge dot
         configs.push(new Config({
-            component: 'BadgeDotSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss"],
+            component: 'BadgeDotComponent',
+            additionalFiles: ["src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -10,45 +10,73 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // button group 1
+        // button group overview
         configs.push(new Config({
-            component: 'ButtonGroupSample1Component',
+            component: 'ButtonGroupOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 2
+        // button group layout
         configs.push(new Config({
-            component: 'ButtonGroupSample2Component',
+            component: 'ButtonGroupLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 3
+        // button group alignment
         configs.push(new Config({
-            component: 'ButtonGroupSample3Component',
+            component: 'ButtonGroupAlignmentComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 4
+        // button group custom toggle
         configs.push(new Config({
-            component: 'ButtonGroupSampleComponent',
+            component: 'ButtonGroupCustomToggleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 5
+        // button group states
         configs.push(new Config({
-            component: 'ButtonGroupSample5Component',
+            component: 'ButtonGroupStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group style
+        // button group interaction states
         configs.push(new Config({
-            component: 'ButtonGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style/layout.scss"],
+            component: 'ButtonGroupInteractionStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group selection
+        configs.push(new Config({
+            component: 'ButtonGroupSelectionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group size
+        configs.push(new Config({
+            component: 'ButtonGroupSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group styling
+        configs.push(new Config({
+            component: 'ButtonGroupStylingComponent',
+            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group tailwind styling
+        configs.push(new Config({
+            component: 'ButtonGroupTailwindStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));

live-editing/configs/CalendarConfigGenerator.ts

@@ -75,7 +75,6 @@ export class CalendarConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'CalendarStylingSampleComponent',
-            additionalFiles: ["/src/app/scheduling/calendar/calendar-styling-sample/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/scheduling/calendar/"
         }));

live-editing/configs/CheckboxConfigGenerator.ts

@@ -30,7 +30,6 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
         // checkbox styling
         configs.push(new Config({
             component: 'CheckboxStylingComponent',
-            additionalFiles: ["/src/app/data-entries/checkbox/checkbox-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));

live-editing/configs/ChipConfigGenerator.ts

@@ -15,6 +15,12 @@ export class ChipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/"
         }));
 
+        configs.push(new Config({
+            component: 'ChipOutlinedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/"
+        }));
+
         configs.push(new Config({
             component: 'ChipVariantsComponent',
             appConfig: BaseAppConfig,

live-editing/configs/InputGroupConfigGenerator.ts

@@ -57,7 +57,7 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'InputGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts", "/src/app/data-entries/input-group/input-group-styling/layout.scss"],
+            additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));

live-editing/configs/PivotGridConfigGenerator.ts

@@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
             component: 'PivotGridLayoutComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            appConfig: BaseAppConfig,
+            component: 'PivotStylingComponent'
+        }));
+
         return configs;
     }
 }

live-editing/configs/SliderConfigGenerator.ts

@@ -2,7 +2,6 @@ import { IgxButtonModule } from 'igniteui-angular/directives';
 import { IgxIconModule } from 'igniteui-angular/icon';
 import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 import { IgxSliderModule } from 'igniteui-angular/slider';
-import { HammerModule } from '@angular/platform-browser';
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class SliderConfigGenerator implements IConfigGenerator {