igniteui-angular 22.2.0-rc.1 → 22.2.0

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 (107) 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 +66 -60
  24. package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
  25. package/fesm2022/igniteui-angular-core.mjs +107 -79
  26. package/fesm2022/igniteui-angular-core.mjs.map +1 -1
  27. package/fesm2022/igniteui-angular-date-picker.mjs +38 -38
  28. package/fesm2022/igniteui-angular-dialog.mjs +13 -13
  29. package/fesm2022/igniteui-angular-directives.mjs +194 -194
  30. package/fesm2022/igniteui-angular-drop-down.mjs +29 -29
  31. package/fesm2022/igniteui-angular-expansion-panel.mjs +28 -28
  32. package/fesm2022/igniteui-angular-grids-core.mjs +737 -661
  33. package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
  34. package/fesm2022/igniteui-angular-grids-grid.mjs +69 -58
  35. package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
  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 +92 -81
  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 +25 -25
  44. package/fesm2022/igniteui-angular-list.mjs +40 -40
  45. package/fesm2022/igniteui-angular-navbar.mjs +13 -13
  46. package/fesm2022/igniteui-angular-navigation-drawer.mjs +43 -38
  47. package/fesm2022/igniteui-angular-navigation-drawer.mjs.map +1 -1
  48. package/fesm2022/igniteui-angular-paginator.mjs +19 -19
  49. package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
  50. package/fesm2022/igniteui-angular-query-builder.mjs +22 -22
  51. package/fesm2022/igniteui-angular-radio.mjs +25 -21
  52. package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
  53. package/fesm2022/igniteui-angular-select.mjs +25 -25
  54. package/fesm2022/igniteui-angular-simple-combo.mjs +9 -9
  55. package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
  56. package/fesm2022/igniteui-angular-slider.mjs +28 -28
  57. package/fesm2022/igniteui-angular-snackbar.mjs +7 -7
  58. package/fesm2022/igniteui-angular-splitter.mjs +13 -13
  59. package/fesm2022/igniteui-angular-stepper.mjs +34 -34
  60. package/fesm2022/igniteui-angular-switch.mjs +7 -7
  61. package/fesm2022/igniteui-angular-tabs.mjs +34 -34
  62. package/fesm2022/igniteui-angular-time-picker.mjs +19 -19
  63. package/fesm2022/igniteui-angular-toast.mjs +7 -7
  64. package/fesm2022/igniteui-angular-tree.mjs +28 -28
  65. package/fesm2022/igniteui-angular-virtual-scroll.mjs +497 -145
  66. package/fesm2022/igniteui-angular-virtual-scroll.mjs.map +1 -1
  67. package/migrations/common/UpdateChanges.d.ts +25 -5
  68. package/migrations/common/UpdateChanges.js +218 -34
  69. package/migrations/common/UpdateChanges.spec.js +763 -0
  70. package/migrations/migration-collection.json +1 -1
  71. package/migrations/update-22_2_0/index.js +145 -0
  72. package/migrations/update-22_2_0/index.spec.js +133 -0
  73. package/navigation-drawer/README.md +1 -1
  74. package/package.json +4 -4
  75. package/schematics/tsconfig.tsbuildinfo +1 -1
  76. package/skills/igniteui-angular-components/SKILL.md +9 -5
  77. package/skills/igniteui-angular-components/references/form-controls.md +1 -1
  78. package/skills/igniteui-angular-components/references/mcp-setup.md +14 -2
  79. package/skills/igniteui-angular-figma-to-app/SKILL.md +112 -525
  80. package/skills/igniteui-angular-figma-to-app/references/asset-extraction.md +49 -75
  81. package/skills/igniteui-angular-figma-to-app/references/design-provenance.md +201 -0
  82. package/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md +175 -52
  83. package/skills/igniteui-angular-figma-to-app/references/figma-component-map.md +153 -99
  84. package/skills/igniteui-angular-figma-to-app/references/figma-exploration.md +226 -0
  85. package/skills/igniteui-angular-figma-to-app/references/mcp-setup.md +71 -105
  86. package/skills/igniteui-angular-figma-to-app/references/project-setup.md +63 -0
  87. package/skills/igniteui-angular-figma-to-app/references/theme-generation.md +120 -0
  88. package/skills/igniteui-angular-figma-to-app/references/validation-patterns.md +48 -50
  89. package/skills/igniteui-angular-generate-from-image-design/SKILL.md +11 -7
  90. package/skills/igniteui-angular-grids/SKILL.md +7 -3
  91. package/skills/igniteui-angular-grids/references/editing.md +1 -2
  92. package/skills/igniteui-angular-grids/references/grid-migration.md +1 -1
  93. package/skills/igniteui-angular-theming/SKILL.md +9 -5
  94. package/skills/igniteui-angular-theming/references/mcp-setup.md +12 -2
  95. package/types/igniteui-angular-button-group.d.ts +49 -34
  96. package/types/igniteui-angular-calendar.d.ts +33 -50
  97. package/types/igniteui-angular-card.d.ts +12 -17
  98. package/types/igniteui-angular-combo.d.ts +6 -0
  99. package/types/igniteui-angular-core.d.ts +10 -2
  100. package/types/igniteui-angular-grids-core.d.ts +48 -4
  101. package/types/igniteui-angular-grids-grid.d.ts +4 -0
  102. package/types/igniteui-angular-grids-lite.d.ts +5 -1
  103. package/types/igniteui-angular-grids-pivot-grid.d.ts +5 -1
  104. package/types/igniteui-angular-navigation-drawer.d.ts +1 -0
  105. package/types/igniteui-angular-radio.d.ts +5 -0
  106. package/types/igniteui-angular-virtual-scroll.d.ts +41 -13
  107. package/virtual-scroll/README.md +32 -1
package/fesm2022/igniteui-angular-chips.mjs CHANGED
@@ -687,10 +687,10 @@ class IgxChipComponent {
687
687
  this.destroy$.next();
688
688
  this.destroy$.complete();
689
689
  }
690
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
691
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", outlined: ["outlined", "outlined", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--outlined": "this.outlined", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n data-no-typography\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600)}.igx-chip--disabled.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-gray-500);background:var(--ig-gray-200)}.igx-chip--outlined .igx-chip__item{background:var(--outlined-background);color:var(--outlined-text-color);border:.0625rem solid var(--border-color)}.igx-chip--outlined .igx-chip__item--selected{background:var(--selected-outlined-background);color:var(--selected-outlined-text-color);border:.0625rem solid var(--selected-border-color)}.igx-chip--outlined:focus .igx-chip__item{color:var(--focus-outlined-text-color);background:var(--focus-outlined-background);border:.0625rem solid var(--focus-border-color)}.igx-chip--outlined:focus .igx-chip__item--selected{color:var(--focus-selected-outlined-text-color);background:var(--focus-selected-outlined-background);border:.0625rem solid var(--focus-selected-border-color)}.igx-chip--outlined:hover .igx-chip__item{color:var(--hover-outlined-text-color);background:var(--hover-outlined-background);border:.0625rem solid var(--hover-border-color)}.igx-chip--outlined:hover .igx-chip__item--selected{color:var(--hover-selected-outlined-text-color);background:var(--hover-selected-outlined-background);border:.0625rem solid var(--hover-selected-border-color)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-primary-100-contrast);border-color:var(--ig-primary-800)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-info-100-contrast);border-color:var(--ig-info-800)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-success-100-contrast);border-color:var(--ig-success-800)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-800)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-error-100-contrast);border-color:var(--ig-error-800)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background)}.igx-chip--disabled .igx-chip__item--selected{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item{background:var(--disabled-outlined-background);color:var(--disabled-outlined-text-color);border:.0625rem solid var(--disabled-border-color)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected{background:var(--disabled-selected-outlined-background);color:var(--disabled-selected-outlined-text-color);border:.0625rem solid var(--disabled-selected-border-color)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{background:hsl(from var(--ig-gray-200) h s l/.3);color:var(--ig-gray-500);border-color:hsl(from var(--ig-gray-500) h s l/.3)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600);color:var(--ig-primary-100-contrast)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.3)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-900);color:var(--ig-info-900-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.3)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600);color:var(--ig-success-100-contrast)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.3)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-900)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.3)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600);color:var(--ig-error-100-contrast)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.3)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4)}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);opacity:.4}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-primary-400)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.3)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-info-500)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-400) h s l/.3)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-success-700)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-700) h s l/.3)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-warn-600)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-400) h s l/.3)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-error-500)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-500) h s l/.3)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected,.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-600);color:var(--ig-info-100-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-600);color:var(--ig-warn-100-contrast)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-900-contrast);border-color:var(--ig-primary-200)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-300)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-300)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-info-600)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-200)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-500)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-400)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-200)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.5)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.2)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.5)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.2)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-100)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.5)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.2)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-warn-500-contrast);border-color:var(--ig-warn-200)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.5)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.2)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-50)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.5)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.2)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{color:var(--ig-primary-900-contrast)}.igx-chip--info.igx-chip--outlined .igx-chip__item{color:var(--ig-info-900-contrast);border-color:var(--ig-info-300)}.igx-chip--success.igx-chip--outlined .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-500)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-400)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item{color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item{border-color:var(--ig-info-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item{border-color:var(--ig-success-500);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item{border-color:var(--ig-warn-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{border-color:var(--ig-error-400);color:var(--ig-gray-100-contrast)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
690
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
691
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", outlined: ["outlined", "outlined", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--outlined": "this.outlined", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n data-no-typography\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600)}.igx-chip--disabled.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-gray-500);background:var(--ig-gray-200)}.igx-chip--outlined .igx-chip__item{background:var(--outlined-background);color:var(--outlined-text-color);border:.0625rem solid var(--border-color)}.igx-chip--outlined .igx-chip__item--selected{background:var(--selected-outlined-background);color:var(--selected-outlined-text-color);border:.0625rem solid var(--selected-border-color)}.igx-chip--outlined:focus .igx-chip__item{color:var(--focus-outlined-text-color);background:var(--focus-outlined-background);border:.0625rem solid var(--focus-border-color)}.igx-chip--outlined:focus .igx-chip__item--selected{color:var(--focus-selected-outlined-text-color);background:var(--focus-selected-outlined-background);border:.0625rem solid var(--focus-selected-border-color)}.igx-chip--outlined:hover .igx-chip__item{color:var(--hover-outlined-text-color);background:var(--hover-outlined-background);border:.0625rem solid var(--hover-border-color)}.igx-chip--outlined:hover .igx-chip__item--selected{color:var(--hover-selected-outlined-text-color);background:var(--hover-selected-outlined-background);border:.0625rem solid var(--hover-selected-border-color)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-primary-100-contrast);border-color:var(--ig-primary-800)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-info-100-contrast);border-color:var(--ig-info-800)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-success-100-contrast);border-color:var(--ig-success-800)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-800)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-error-100-contrast);border-color:var(--ig-error-800)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background)}.igx-chip--disabled .igx-chip__item--selected{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item{background:var(--disabled-outlined-background);color:var(--disabled-outlined-text-color);border:.0625rem solid var(--disabled-border-color)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected{background:var(--disabled-selected-outlined-background);color:var(--disabled-selected-outlined-text-color);border:.0625rem solid var(--disabled-selected-border-color)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{background:hsl(from var(--ig-gray-200) h s l/.3);color:var(--ig-gray-500);border-color:hsl(from var(--ig-gray-500) h s l/.3)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600);color:var(--ig-primary-100-contrast)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.3)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-900);color:var(--ig-info-900-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.3)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600);color:var(--ig-success-100-contrast)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.3)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-900)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.3)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600);color:var(--ig-error-100-contrast)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.3)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4)}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);opacity:.4}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-primary-400)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.3)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-info-500)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-400) h s l/.3)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-success-700)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-700) h s l/.3)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-warn-600)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-400) h s l/.3)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-error-500)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-500) h s l/.3)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected,.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-600);color:var(--ig-info-100-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-600);color:var(--ig-warn-100-contrast)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-900-contrast);border-color:var(--ig-primary-200)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-300)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-300)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-info-600)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-200)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-500)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-400)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-200)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.5)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.2)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.5)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.2)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-100)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.5)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.2)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-warn-500-contrast);border-color:var(--ig-warn-200)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.5)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.2)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-50)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.5)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.2)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{color:var(--ig-primary-900-contrast)}.igx-chip--info.igx-chip--outlined .igx-chip__item{color:var(--ig-info-900-contrast);border-color:var(--ig-info-300)}.igx-chip--success.igx-chip--outlined .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-500)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-400)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item{color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item{border-color:var(--ig-info-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item{border-color:var(--ig-success-500);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item{border-color:var(--ig-warn-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{border-color:var(--ig-error-400);color:var(--ig-gray-100-contrast)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
692
692
  }
693
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipComponent, decorators: [{
693
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipComponent, decorators: [{
694
694
  type: Component,
695
695
  args: [{ selector: 'igx-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n data-no-typography\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600)}.igx-chip--disabled.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-gray-500);background:var(--ig-gray-200)}.igx-chip--outlined .igx-chip__item{background:var(--outlined-background);color:var(--outlined-text-color);border:.0625rem solid var(--border-color)}.igx-chip--outlined .igx-chip__item--selected{background:var(--selected-outlined-background);color:var(--selected-outlined-text-color);border:.0625rem solid var(--selected-border-color)}.igx-chip--outlined:focus .igx-chip__item{color:var(--focus-outlined-text-color);background:var(--focus-outlined-background);border:.0625rem solid var(--focus-border-color)}.igx-chip--outlined:focus .igx-chip__item--selected{color:var(--focus-selected-outlined-text-color);background:var(--focus-selected-outlined-background);border:.0625rem solid var(--focus-selected-border-color)}.igx-chip--outlined:hover .igx-chip__item{color:var(--hover-outlined-text-color);background:var(--hover-outlined-background);border:.0625rem solid var(--hover-border-color)}.igx-chip--outlined:hover .igx-chip__item--selected{color:var(--hover-selected-outlined-text-color);background:var(--hover-selected-outlined-background);border:.0625rem solid var(--hover-selected-border-color)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-primary-100-contrast);border-color:var(--ig-primary-800)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-info-100-contrast);border-color:var(--ig-info-800)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-success-100-contrast);border-color:var(--ig-success-800)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-800)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-error-100-contrast);border-color:var(--ig-error-800)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background)}.igx-chip--disabled .igx-chip__item--selected{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item{background:var(--disabled-outlined-background);color:var(--disabled-outlined-text-color);border:.0625rem solid var(--disabled-border-color)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected{background:var(--disabled-selected-outlined-background);color:var(--disabled-selected-outlined-text-color);border:.0625rem solid var(--disabled-selected-border-color)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{background:hsl(from var(--ig-gray-200) h s l/.3);color:var(--ig-gray-500);border-color:hsl(from var(--ig-gray-500) h s l/.3)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600);color:var(--ig-primary-100-contrast)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.3)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-900);color:var(--ig-info-900-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.3)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600);color:var(--ig-success-100-contrast)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.3)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-900)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.3)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600);color:var(--ig-error-100-contrast)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.3)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4)}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);opacity:.4}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-primary-400)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.3)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-info-500)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-400) h s l/.3)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-success-700)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-700) h s l/.3)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-warn-600)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-400) h s l/.3)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-error-500)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-500) h s l/.3)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected,.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-600);color:var(--ig-info-100-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-600);color:var(--ig-warn-100-contrast)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-900-contrast);border-color:var(--ig-primary-200)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-300)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-300)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-info-600)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-200)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-500)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-400)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-200)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.5)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.2)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.5)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.2)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-100)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.5)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.2)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-warn-500-contrast);border-color:var(--ig-warn-200)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.5)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.2)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-50)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.5)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.2)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{color:var(--ig-primary-900-contrast)}.igx-chip--info.igx-chip--outlined .igx-chip__item{color:var(--ig-info-900-contrast);border-color:var(--ig-info-300)}.igx-chip--success.igx-chip--outlined .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-500)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-400)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item{color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item{border-color:var(--ig-info-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item{border-color:var(--ig-success-500);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item{border-color:var(--ig-warn-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{border-color:var(--ig-error-400);color:var(--ig-gray-100-contrast)}}}\n"] }]
696
696
  }], ctorParameters: () => [], propDecorators: { variant: [{
@@ -1094,10 +1094,10 @@ class IgxChipsAreaComponent {
1094
1094
  owner: this
1095
1095
  });
1096
1096
  }
1097
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1098
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-chip-area{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%}.igx-chip-area:empty{display:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip-area{padding:.25rem;gap:.5rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1097
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1098
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-chip-area{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%}.igx-chip-area:empty{display:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip-area{padding:.25rem;gap:.5rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1099
1099
  }
1100
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
1100
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
1101
1101
  type: Component,
1102
1102
  args: [{ selector: 'igx-chips-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-chip-area{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%}.igx-chip-area:empty{display:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip-area{padding:.25rem;gap:.5rem}}}\n"] }]
1103
1103
  }], ctorParameters: () => [], propDecorators: { role: [{
@@ -1145,11 +1145,11 @@ const IGX_CHIPS_DIRECTIVES = [
1145
1145
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
1146
1146
  */
1147
1147
  class IgxChipsModule {
1148
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1149
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
1150
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
1148
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1149
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
1150
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
1151
1151
  }
1152
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxChipsModule, decorators: [{
1152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxChipsModule, decorators: [{
1153
1153
  type: NgModule,
1154
1154
  args: [{
1155
1155
  exports: [