igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/README.md +1 -1
  2. package/button-group/README.md +42 -9
  3. package/calendar/README.md +30 -20
  4. package/card/README.md +1 -1
  5. package/fesm2022/igniteui-angular-accordion.mjs +7 -7
  6. package/fesm2022/igniteui-angular-action-strip.mjs +11 -22
  7. package/fesm2022/igniteui-angular-action-strip.mjs.map +1 -1
  8. package/fesm2022/igniteui-angular-avatar.mjs +7 -7
  9. package/fesm2022/igniteui-angular-badge.mjs +7 -7
  10. package/fesm2022/igniteui-angular-banner.mjs +10 -10
  11. package/fesm2022/igniteui-angular-bottom-nav.mjs +22 -22
  12. package/fesm2022/igniteui-angular-button-group.mjs +32 -35
  13. package/fesm2022/igniteui-angular-button-group.mjs.map +1 -1
  14. package/fesm2022/igniteui-angular-calendar.mjs +132 -180
  15. package/fesm2022/igniteui-angular-calendar.mjs.map +1 -1
  16. package/fesm2022/igniteui-angular-card.mjs +47 -58
  17. package/fesm2022/igniteui-angular-card.mjs.map +1 -1
  18. package/fesm2022/igniteui-angular-carousel.mjs +22 -22
  19. package/fesm2022/igniteui-angular-chat-extras.mjs +6 -6
  20. package/fesm2022/igniteui-angular-chat.mjs +12 -12
  21. package/fesm2022/igniteui-angular-checkbox.mjs +7 -7
  22. package/fesm2022/igniteui-angular-chips.mjs +10 -10
  23. package/fesm2022/igniteui-angular-combo.mjs +69 -67
  24. package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
  25. package/fesm2022/igniteui-angular-core.mjs +139 -92
  26. package/fesm2022/igniteui-angular-core.mjs.map +1 -1
  27. package/fesm2022/igniteui-angular-date-picker.mjs +53 -70
  28. package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
  29. package/fesm2022/igniteui-angular-dialog.mjs +13 -13
  30. package/fesm2022/igniteui-angular-directives.mjs +194 -194
  31. package/fesm2022/igniteui-angular-drop-down.mjs +29 -29
  32. package/fesm2022/igniteui-angular-expansion-panel.mjs +28 -28
  33. package/fesm2022/igniteui-angular-grids-core.mjs +737 -661
  34. package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
  35. package/fesm2022/igniteui-angular-grids-grid.mjs +49 -49
  36. package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +37 -37
  37. package/fesm2022/igniteui-angular-grids-lite.mjs +25 -17
  38. package/fesm2022/igniteui-angular-grids-lite.mjs.map +1 -1
  39. package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +80 -80
  40. package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
  41. package/fesm2022/igniteui-angular-grids-tree-grid.mjs +55 -55
  42. package/fesm2022/igniteui-angular-icon.mjs +10 -10
  43. package/fesm2022/igniteui-angular-input-group.mjs +59 -55
  44. package/fesm2022/igniteui-angular-input-group.mjs.map +1 -1
  45. package/fesm2022/igniteui-angular-list.mjs +40 -40
  46. package/fesm2022/igniteui-angular-navbar.mjs +13 -13
  47. package/fesm2022/igniteui-angular-navigation-drawer.mjs +43 -38
  48. package/fesm2022/igniteui-angular-navigation-drawer.mjs.map +1 -1
  49. package/fesm2022/igniteui-angular-paginator.mjs +19 -19
  50. package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
  51. package/fesm2022/igniteui-angular-query-builder.mjs +22 -22
  52. package/fesm2022/igniteui-angular-radio.mjs +25 -21
  53. package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
  54. package/fesm2022/igniteui-angular-select.mjs +29 -33
  55. package/fesm2022/igniteui-angular-select.mjs.map +1 -1
  56. package/fesm2022/igniteui-angular-simple-combo.mjs +9 -9
  57. package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
  58. package/fesm2022/igniteui-angular-slider.mjs +28 -28
  59. package/fesm2022/igniteui-angular-snackbar.mjs +7 -7
  60. package/fesm2022/igniteui-angular-splitter.mjs +13 -13
  61. package/fesm2022/igniteui-angular-stepper.mjs +34 -34
  62. package/fesm2022/igniteui-angular-switch.mjs +7 -7
  63. package/fesm2022/igniteui-angular-tabs.mjs +34 -34
  64. package/fesm2022/igniteui-angular-time-picker.mjs +26 -36
  65. package/fesm2022/igniteui-angular-time-picker.mjs.map +1 -1
  66. package/fesm2022/igniteui-angular-toast.mjs +7 -7
  67. package/fesm2022/igniteui-angular-tree.mjs +28 -28
  68. package/fesm2022/igniteui-angular-virtual-scroll.mjs +497 -145
  69. package/fesm2022/igniteui-angular-virtual-scroll.mjs.map +1 -1
  70. package/migrations/common/UpdateChanges.d.ts +56 -0
  71. package/migrations/common/UpdateChanges.js +366 -38
  72. package/migrations/common/UpdateChanges.spec.js +829 -0
  73. package/migrations/migration-collection.json +1 -1
  74. package/migrations/update-22_2_0/index.js +145 -0
  75. package/migrations/update-22_2_0/index.spec.js +206 -0
  76. package/navigation-drawer/README.md +1 -1
  77. package/package.json +3 -3
  78. package/schematics/tsconfig.tsbuildinfo +1 -1
  79. package/skills/igniteui-angular-components/SKILL.md +9 -5
  80. package/skills/igniteui-angular-components/references/form-controls.md +1 -1
  81. package/skills/igniteui-angular-components/references/mcp-setup.md +14 -2
  82. package/skills/igniteui-angular-figma-to-app/SKILL.md +112 -525
  83. package/skills/igniteui-angular-figma-to-app/references/asset-extraction.md +49 -75
  84. package/skills/igniteui-angular-figma-to-app/references/design-provenance.md +201 -0
  85. package/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md +175 -52
  86. package/skills/igniteui-angular-figma-to-app/references/figma-component-map.md +153 -99
  87. package/skills/igniteui-angular-figma-to-app/references/figma-exploration.md +226 -0
  88. package/skills/igniteui-angular-figma-to-app/references/mcp-setup.md +71 -105
  89. package/skills/igniteui-angular-figma-to-app/references/project-setup.md +63 -0
  90. package/skills/igniteui-angular-figma-to-app/references/theme-generation.md +120 -0
  91. package/skills/igniteui-angular-figma-to-app/references/validation-patterns.md +48 -50
  92. package/skills/igniteui-angular-generate-from-image-design/SKILL.md +11 -7
  93. package/skills/igniteui-angular-grids/SKILL.md +7 -3
  94. package/skills/igniteui-angular-grids/references/editing.md +1 -2
  95. package/skills/igniteui-angular-grids/references/grid-migration.md +1 -1
  96. package/skills/igniteui-angular-theming/SKILL.md +9 -5
  97. package/skills/igniteui-angular-theming/references/mcp-setup.md +12 -2
  98. package/types/igniteui-angular-button-group.d.ts +49 -34
  99. package/types/igniteui-angular-calendar.d.ts +33 -50
  100. package/types/igniteui-angular-card.d.ts +12 -17
  101. package/types/igniteui-angular-combo.d.ts +6 -0
  102. package/types/igniteui-angular-core.d.ts +25 -8
  103. package/types/igniteui-angular-grids-core.d.ts +48 -4
  104. package/types/igniteui-angular-grids-lite.d.ts +5 -1
  105. package/types/igniteui-angular-grids-pivot-grid.d.ts +1 -1
  106. package/types/igniteui-angular-input-group.d.ts +17 -3
  107. package/types/igniteui-angular-navigation-drawer.d.ts +1 -0
  108. package/types/igniteui-angular-radio.d.ts +5 -0
  109. package/types/igniteui-angular-time-picker.d.ts +0 -1
  110. package/types/igniteui-angular-virtual-scroll.d.ts +41 -13
  111. package/virtual-scroll/README.md +32 -1
@@ -1282,10 +1282,10 @@ class IgxIconService {
1282
1282
  }
1283
1283
  }
1284
1284
  }
1285
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1286
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconService, providedIn: "root" }); }
1285
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1286
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconService, providedIn: "root" }); }
1287
1287
  }
1288
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconService, decorators: [{
1288
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconService, decorators: [{
1289
1289
  type: Injectable,
1290
1290
  args: [{
1291
1291
  providedIn: "root",
@@ -1475,10 +1475,10 @@ class IgxIconComponent {
1475
1475
  }
1476
1476
  this.addIconClass(className);
1477
1477
  }
1478
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1479
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { ariaHidden: "ariaHidden", family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "class.igx-icon--inactive": "this.getInactive", "attr.aria-hidden": "this.ariaHidden" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n @case (\"liga\") {{{ iconRef.name }}}\n\n @case (\"svg\") {\n <div [innerHTML]=\"getSvg\"></div>\n }\n}\n", styles: ["@scope(.igx-icon){:scope:is(igx-icon){display:inline-flex;width:1em;height:1em;font-size:var(--size);direction:inherit}:scope:is(igx-icon) div,:scope:is(igx-icon) svg{display:block;width:var(--ig-icon-size, inherit);height:var(--ig-icon-size, inherit);fill:currentColor}:scope:is(igx-icon)[igxPrefix].material-icons,:scope:is(igx-icon)[igxSuffix].material-icons{font-family:Material Icons,sans-serif}}@layer ig.base{.igx-icon{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));color:var(--color)}.igx-icon--inactive{color:var(--disabled-color);opacity:.54}.igx-icon--success{color:var(--ig-success-500)}.igx-icon--error{color:var(--ig-error-500)}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1478
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1479
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { ariaHidden: "ariaHidden", family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "class.igx-icon--inactive": "this.getInactive", "attr.aria-hidden": "this.ariaHidden" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n @case (\"liga\") {{{ iconRef.name }}}\n\n @case (\"svg\") {\n <div [innerHTML]=\"getSvg\"></div>\n }\n}\n", styles: ["@scope(.igx-icon){:scope:is(igx-icon){display:inline-flex;width:1em;height:1em;font-size:var(--size);direction:inherit}:scope:is(igx-icon) div,:scope:is(igx-icon) svg{display:block;width:var(--ig-icon-size, inherit);height:var(--ig-icon-size, inherit);fill:currentColor}:scope:is(igx-icon)[igxPrefix].material-icons,:scope:is(igx-icon)[igxSuffix].material-icons{font-family:Material Icons,sans-serif}}@layer ig.base{.igx-icon{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));color:var(--color)}.igx-icon--inactive{color:var(--disabled-color);opacity:.54}.igx-icon--success{color:var(--ig-success-500)}.igx-icon--error{color:var(--ig-error-500)}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1480
1480
  }
1481
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconComponent, decorators: [{
1481
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconComponent, decorators: [{
1482
1482
  type: Component,
1483
1483
  args: [{ selector: "igx-icon", changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<!-- This is only here for backwards compatibility in case -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n @case (\"liga\") {{{ iconRef.name }}}\n\n @case (\"svg\") {\n <div [innerHTML]=\"getSvg\"></div>\n }\n}\n", styles: ["@scope(.igx-icon){:scope:is(igx-icon){display:inline-flex;width:1em;height:1em;font-size:var(--size);direction:inherit}:scope:is(igx-icon) div,:scope:is(igx-icon) svg{display:block;width:var(--ig-icon-size, inherit);height:var(--ig-icon-size, inherit);fill:currentColor}:scope:is(igx-icon)[igxPrefix].material-icons,:scope:is(igx-icon)[igxSuffix].material-icons{font-family:Material Icons,sans-serif}}@layer ig.base{.igx-icon{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));color:var(--color)}.igx-icon--inactive{color:var(--disabled-color);opacity:.54}.igx-icon--success{color:var(--ig-success-500)}.igx-icon--error{color:var(--ig-error-500)}}\n"] }]
1484
1484
  }], ctorParameters: () => [], propDecorators: { elementClasses: [{
@@ -1507,11 +1507,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1507
1507
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
1508
1508
  */
1509
1509
  class IgxIconModule {
1510
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1511
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxIconModule, imports: [IgxIconComponent], exports: [IgxIconComponent] }); }
1512
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconModule }); }
1510
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1511
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxIconModule, imports: [IgxIconComponent], exports: [IgxIconComponent] }); }
1512
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconModule }); }
1513
1513
  }
1514
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconModule, decorators: [{
1514
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxIconModule, decorators: [{
1515
1515
  type: NgModule,
1516
1516
  args: [{
1517
1517
  exports: [IgxIconComponent],