igniteui-angular 22.1.0-beta.5 → 22.1.0-beta.6

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 (39) hide show
  1. package/fesm2022/igniteui-angular-button-group.mjs +2 -2
  2. package/fesm2022/igniteui-angular-button-group.mjs.map +1 -1
  3. package/fesm2022/igniteui-angular-directives.mjs +6 -1
  4. package/fesm2022/igniteui-angular-directives.mjs.map +1 -1
  5. package/fesm2022/igniteui-angular-grids-core.mjs +18 -6
  6. package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
  7. package/fesm2022/igniteui-angular-grids-grid.mjs +1 -1
  8. package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
  9. package/lib/grids/core/src/filtering/excel-style/themes/_derived.scss +3 -2
  10. package/migrations/update-22_1_0_import-migration/index.js +88 -60
  11. package/migrations/update-22_1_0_import-migration/index.spec.js +57 -1
  12. package/package.json +1 -1
  13. package/styles/igniteui-angular-dark.css +1 -1
  14. package/styles/igniteui-angular.css +1 -1
  15. package/styles/igniteui-bootstrap-dark.css +1 -1
  16. package/styles/igniteui-bootstrap-light.css +1 -1
  17. package/styles/igniteui-dark-green.css +1 -1
  18. package/styles/igniteui-fluent-dark-excel.css +1 -1
  19. package/styles/igniteui-fluent-dark-word.css +1 -1
  20. package/styles/igniteui-fluent-dark.css +1 -1
  21. package/styles/igniteui-fluent-light-excel.css +1 -1
  22. package/styles/igniteui-fluent-light-word.css +1 -1
  23. package/styles/igniteui-fluent-light.css +1 -1
  24. package/styles/igniteui-indigo-dark.css +1 -1
  25. package/styles/igniteui-indigo-light.css +1 -1
  26. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  27. package/styles/maps/igniteui-angular.css.map +1 -1
  28. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  29. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  30. package/styles/maps/igniteui-dark-green.css.map +1 -1
  31. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  32. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  33. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  34. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  35. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  36. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  37. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  38. package/styles/maps/igniteui-indigo-light.css.map +1 -1
  39. package/types/igniteui-angular-directives.d.ts +1 -1
package/fesm2022/igniteui-angular-button-group.mjs CHANGED
@@ -443,11 +443,11 @@ class IgxButtonGroupComponent {
443
443
  }
444
444
  }
445
445
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
446
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: ["disabled", "disabled", booleanAttribute], alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "class.igx-button-group": "this.cssClass", "style.zIndex": "this.zIndex", "attr.role": "this.role", "class.igx-button-group--vertical": "this.isVertical" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], ngImport: i0, template: "<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{border-color:var(--item-selected-border-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
446
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: ["disabled", "disabled", booleanAttribute], alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "class.igx-button-group": "this.cssClass", "style.zIndex": "this.zIndex", "attr.role": "this.role", "class.igx-button-group--vertical": "this.isVertical" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], ngImport: i0, template: "<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton]:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected[igxButton]:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
447
447
  }
448
448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupComponent, decorators: [{
449
449
  type: Component,
450
- args: [{ selector: 'igx-buttongroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent], template: "<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{border-color:var(--item-selected-border-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"] }]
450
+ args: [{ selector: 'igx-buttongroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent], template: "<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton]:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected[igxButton]:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"] }]
451
451
  }], propDecorators: { id: [{
452
452
  type: HostBinding,
453
453
  args: ['attr.id']
package/fesm2022/igniteui-angular-button-group.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"igniteui-angular-button-group.mjs","sources":["../../../projects/igniteui-angular/button-group/src/button-group/button-group.component.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group-content.component.html","../../../projects/igniteui-angular/button-group/src/button-group/public_api.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group.module.ts","../../../projects/igniteui-angular/button-group/src/igniteui-angular-button-group.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n ContentChildren,\n ChangeDetectorRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChildren,\n OnDestroy,\n ElementRef,\n booleanAttribute,\n inject,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\n\nimport { takeUntil } from 'rxjs/operators';\nimport { IBaseEventArgs } from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\n/**\n * Determines the Button Group alignment\n */\nexport const ButtonGroupAlignment = {\n horizontal: 'horizontal',\n vertical: 'vertical'\n} as const;\nexport type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Button Group** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)\n *\n * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports\n * single, multi and singleRequired selection.\n *\n * Example:\n * ```html\n * <igx-buttongroup selectionMode=\"multi\" [values]=\"fontOptions\">\n * </igx-buttongroup>\n * ```\n * The `fontOptions` value shown above is defined as:\n * ```typescript\n * this.fontOptions = [\n * { icon: 'format_bold', selected: false },\n * { icon: 'format_italic', selected: false },\n * { icon: 'format_underlined', selected: false }];\n * ```\n */\n@Component({\n selector: 'igx-buttongroup',\n templateUrl: 'button-group-content.component.html',\n styleUrl: 'buttongroup-content.component.css',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.Eager,\n imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]\n})\nexport class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {\n private _cdr = inject(ChangeDetectorRef);\n private _renderer = inject(Renderer2);\n private _el = inject(ElementRef);\n\n /**\n * A collection containing all buttons inside the button group.\n */\n public get buttons(): IgxButtonDirective[] {\n return [...this.viewButtons.toArray(), ...this.templateButtons.toArray()];\n }\n\n /**\n * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.\n * ```html\n * <igx-buttongroup [id]=\"'igx-dialog-56'\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n * ```\n */\n @HostBinding('attr.id')\n @Input()\n public id = `igx-buttongroup-${NEXT_ID++}`;\n\n /** @hidden @internal */\n @HostBinding('class.igx-button-group')\n public cssClass = 'igx-button-group';\n\n /** @hidden @internal */\n\n /**\n * @hidden\n */\n @HostBinding('style.zIndex')\n public zIndex = 0;\n\n /**\n * Sets/gets the role attribute value.\n *\n * @example\n * ```typescript\n * @ViewChild(\"MyButtonGroup\", { read: IgxButtonGroupComponent })\n * public badge: IgxButtonGroupComponent;\n *\n * buttonGroup.role = 'group';\n * ```\n */\n @HostBinding('attr.role')\n public role = 'group';\n\n /**\n * Allows you to set a style using the `itemContentCssClass` input.\n * The value should be the CSS class name that will be applied to the button group.\n * ```typescript\n * public style1 = \"styleClass\";\n * //..\n * ```\n * ```html\n * <igx-buttongroup [itemContentCssClass]=\"style1\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n * ```\n */\n @Input()\n public set itemContentCssClass(value: string) {\n this._itemContentCssClass = value || this._itemContentCssClass;\n }\n\n /**\n * Returns the CSS class of the item content of the button group.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * public buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let buttonSelect = this.buttonG.itemContentCssClass;\n * }\n * ```\n */\n public get itemContentCssClass(): string {\n return this._itemContentCssClass;\n }\n\n /**\n * Enables selecting multiple buttons. By default, multi-selection is false.\n *\n * @deprecated in version 16.1.0. Use the `selectionMode` property instead.\n */\n @Input()\n public get multiSelection() {\n if (this.selectionMode === 'multi') {\n return true;\n } else {\n return false;\n }\n }\n public set multiSelection(selectionMode: boolean) {\n if (selectionMode) {\n this.selectionMode = 'multi';\n } else {\n this.selectionMode = 'single';\n }\n }\n\n /**\n * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.\n * ```html\n * <igx-buttongroup [selectionMode]=\"'multi'\" [alignment]=\"alignment\"></igx-buttongroup>\n * ```\n */\n @Input()\n public get selectionMode() {\n return this._selectionMode;\n }\n public set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi') {\n if (this.viewButtons && selectionMode !== this._selectionMode) {\n this.buttons.forEach((_b, i) => {\n this.deselectButton(i);\n });\n this._selectionMode = selectionMode;\n } else {\n this._selectionMode = selectionMode;\n }\n }\n\n /**\n * Property that configures the buttons in the button group using a collection of `Button` objects.\n * ```typescript\n * public ngOnInit() {\n * this.cities = [\n * new Button({\n * label: \"Sofia\"\n * }),\n * new Button({\n * label: \"London\"\n * }),\n * new Button({\n * label: \"New York\",\n * selected: true\n * }),\n * new Button({\n * label: \"Tokyo\"\n * })\n * ];\n * }\n * //..\n * ```\n * ```html\n * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\"></igx-buttongroup>\n * ```\n */\n @Input() public values: any;\n\n /**\n * Disables the `igx-buttongroup` component. By default it's false.\n * ```html\n * <igx-buttongroup [disabled]=\"true\" [selectionMode]=\"'multi'\" [values]=\"fontOptions\"></igx-buttongroup>\n * ```\n */\n @Input({ transform: booleanAttribute })\n public get disabled(): boolean {\n return this._disabled;\n }\n public set disabled(value: boolean) {\n if (this._disabled !== value) {\n this._disabled = value;\n\n if (this.viewButtons && this.templateButtons) {\n this.buttons.forEach((b) => (b.disabled = this._disabled));\n }\n }\n }\n\n /**\n * Allows you to set the button group alignment.\n * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.\n * ```typescript\n * public alignment = ButtonGroupAlignment.vertical;\n * //..\n * ```\n * ```html\n * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\" [alignment]=\"alignment\"></igx-buttongroup>\n * ```\n */\n @Input()\n public set alignment(value: ButtonGroupAlignment) {\n this._isVertical = value === ButtonGroupAlignment.vertical;\n }\n /**\n * Returns the alignment of the `igx-buttongroup`.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * public buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let buttonAlignment = this.buttonG.alignment;\n * }\n * ```\n */\n public get alignment(): ButtonGroupAlignment {\n return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;\n }\n\n /**\n * An @Ouput property that emits an event when a button is selected.\n * ```typescript\n * @ViewChild(\"toast\")\n * private toast: IgxToastComponent;\n * public selectedHandler(buttongroup) {\n * this.toast.open()\n * }\n * //...\n * ```\n * ```html\n * <igx-buttongroup #MyChild [selectionMode]=\"'multi'\" (selected)=\"selectedHandler($event)\"></igx-buttongroup>\n * <igx-toast #toast>You have made a selection!</igx-toast>\n * ```\n */\n @Output()\n public selected = new EventEmitter<IButtonGroupEventArgs>();\n\n /**\n * An @Ouput property that emits an event when a button is deselected.\n * ```typescript\n * @ViewChild(\"toast\")\n * private toast: IgxToastComponent;\n * public deselectedHandler(buttongroup){\n * this.toast.open()\n * }\n * //...\n * ```\n * ```html\n * <igx-buttongroup> #MyChild [selectionMode]=\"'multi'\" (deselected)=\"deselectedHandler($event)\"></igx-buttongroup>\n * <igx-toast #toast>You have deselected a button!</igx-toast>\n * ```\n */\n @Output()\n public deselected = new EventEmitter<IButtonGroupEventArgs>();\n\n @ViewChildren(IgxButtonDirective) private viewButtons!: QueryList<IgxButtonDirective>;\n @ContentChildren(IgxButtonDirective) private templateButtons!: QueryList<IgxButtonDirective>;\n\n /**\n * Returns true if the `igx-buttongroup` alignment is vertical.\n * Note that in order for the accessor to work correctly the property should be set explicitly.\n * ```html\n * <igx-buttongroup #MyChild [alignment]=\"alignment\" [values]=\"alignOptions\">\n * ```\n * ```typescript\n * //...\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let orientation = this.buttonG.isVertical;\n * }\n * ```\n */\n @HostBinding('class.igx-button-group--vertical')\n public get isVertical(): boolean {\n return this._isVertical;\n }\n\n /**\n * @hidden\n */\n public selectedIndexes: number[] = [];\n\n protected buttonClickNotifier$ = new Subject<void>();\n protected queryListNotifier$ = new Subject<void>();\n\n private _isVertical!: boolean;\n private _itemContentCssClass!: string;\n private _disabled = false;\n private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';\n\n private mutationObserver!: MutationObserver;\n private observerConfig: MutationObserverInit = {\n attributeFilter: [\"data-selected\"],\n childList: true,\n subtree: true,\n };\n\n /**\n * Gets the selected button/buttons.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let selectedButton = this.buttonG.selectedButtons;\n * }\n * ```\n */\n public get selectedButtons(): IgxButtonDirective[] {\n return this.buttons.filter((_, i) => this.selectedIndexes.indexOf(i) !== -1);\n }\n\n /**\n * Selects a button by its index.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * this.buttonG.selectButton(2);\n * this.cdr.detectChanges();\n * }\n * ```\n *\n * @memberOf {@link IgxButtonGroupComponent}\n */\n public selectButton(index: number) {\n if (index >= this.buttons.length || index < 0) {\n return;\n }\n\n const button = this.buttons[index];\n button.select();\n }\n\n /**\n * @hidden\n * @internal\n */\n public updateSelected(index: number) {\n const button = this.buttons[index];\n\n if (this.selectedIndexes.indexOf(index) === -1) {\n this.selectedIndexes.push(index);\n }\n\n this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');\n this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');\n\n const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n if (indexInViewButtons !== -1) {\n this.values[indexInViewButtons].selected = true;\n }\n\n // deselect other buttons if selectionMode is not multi\n if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {\n this.buttons.forEach((_, i) => {\n if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n this.deselectButton(i);\n this.updateDeselected(i);\n }\n });\n }\n\n }\n\n public updateDeselected(index: number) {\n const button = this.buttons[index];\n if (this.selectedIndexes.indexOf(index) !== -1) {\n this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);\n }\n\n this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');\n this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');\n\n const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n if (indexInViewButtons !== -1) {\n this.values[indexInViewButtons].selected = false;\n }\n }\n\n /**\n * Deselects a button by its index.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * this.buttonG.deselectButton(2);\n * this.cdr.detectChanges();\n * }\n * ```\n *\n * @memberOf {@link IgxButtonGroupComponent}\n */\n public deselectButton(index: number) {\n if (index >= this.buttons.length || index < 0) {\n return;\n }\n\n const button = this.buttons[index];\n button.deselect();\n }\n\n /**\n * @hidden\n */\n public ngAfterViewInit() {\n const initButtons = () => {\n // Cancel any existing buttonClick subscriptions\n this.buttonClickNotifier$.next();\n\n this.selectedIndexes.splice(0, this.selectedIndexes.length);\n\n // initial configuration\n this.buttons.forEach((button, index) => {\n const buttonElement = button.nativeElement;\n this._renderer.addClass(buttonElement, 'igx-button-group__item');\n\n if (this.disabled) {\n button.disabled = true;\n }\n\n if (button.selected) {\n this.updateSelected(index);\n }\n\n button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));\n });\n };\n\n this.mutationObserver = this.setMutationsObserver()!;\n\n this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n this.mutationObserver.disconnect();\n initButtons();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n });\n this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n this.mutationObserver.disconnect();\n initButtons();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n });\n\n initButtons();\n this._cdr.detectChanges();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n }\n\n /**\n * @hidden\n */\n public ngOnDestroy() {\n this.buttonClickNotifier$.next();\n this.buttonClickNotifier$.complete();\n\n this.queryListNotifier$.next();\n this.queryListNotifier$.complete();\n\n this.mutationObserver?.disconnect();\n }\n\n /**\n * @hidden\n */\n public _clickHandler(index: number) {\n const button = this.buttons[index];\n const args: IButtonGroupEventArgs = { owner: this, button, index };\n\n if (this.selectionMode !== 'multi') {\n this.buttons.forEach((b, i) => {\n if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n this.deselected.emit({ owner: this, button: b, index: i });\n }\n });\n }\n\n if (this.selectedIndexes.indexOf(index) === -1) {\n this.selectButton(index);\n this.selected.emit(args);\n } else {\n if (this.selectionMode !== 'singleRequired') {\n this.deselectButton(index);\n this.deselected.emit(args);\n }\n }\n }\n\n private setMutationsObserver() {\n if (typeof MutationObserver !== 'undefined') {\n return new MutationObserver((records, observer) => {\n // Stop observing while handling changes\n observer.disconnect();\n\n const updatedButtons = this.getUpdatedButtons(records);\n\n if (updatedButtons.length > 0) {\n updatedButtons.forEach((button) => {\n const index = this.buttons.map((b) => b.nativeElement).indexOf(button);\n\n this.updateButtonSelectionState(index);\n });\n }\n\n // Watch for changes again\n observer.observe(this._el.nativeElement, this.observerConfig);\n });\n }\n }\n\n private getUpdatedButtons(records: MutationRecord[]) {\n const updated: HTMLButtonElement[] = [];\n\n records\n .filter((x) => x.type === 'attributes')\n .reduce((prev, curr) => {\n prev.push(\n curr.target as HTMLButtonElement\n );\n return prev;\n }, updated);\n\n return updated;\n }\n\n private updateButtonSelectionState(index: number) {\n if (this.buttons[index].selected) {\n this.updateSelected(index);\n } else {\n this.updateDeselected(index);\n }\n }\n}\n\nexport interface IButtonGroupEventArgs extends IBaseEventArgs {\n owner: IgxButtonGroupComponent;\n button: IgxButtonDirective;\n index: number;\n}\n","<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n","import { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxButtonGroupComponent } from './button-group.component';\n\nexport * from './button-group.component';\n\n/* Button group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BUTTON_GROUP_DIRECTIVES = [\n IgxButtonGroupComponent,\n IgxButtonDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BUTTON_GROUP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n imports: [...IGX_BUTTON_GROUP_DIRECTIVES],\n exports: [...IGX_BUTTON_GROUP_DIRECTIVES]\n})\nexport class IgxButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxButtonGroupComponent"],"mappings":"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"}
1
+ {"version":3,"file":"igniteui-angular-button-group.mjs","sources":["../../../projects/igniteui-angular/button-group/src/button-group/button-group.component.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group-content.component.html","../../../projects/igniteui-angular/button-group/src/button-group/public_api.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group.module.ts","../../../projects/igniteui-angular/button-group/src/igniteui-angular-button-group.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n ContentChildren,\n ChangeDetectorRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChildren,\n OnDestroy,\n ElementRef,\n booleanAttribute,\n inject,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\n\nimport { takeUntil } from 'rxjs/operators';\nimport { IBaseEventArgs } from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\n/**\n * Determines the Button Group alignment\n */\nexport const ButtonGroupAlignment = {\n horizontal: 'horizontal',\n vertical: 'vertical'\n} as const;\nexport type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Button Group** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)\n *\n * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports\n * single, multi and singleRequired selection.\n *\n * Example:\n * ```html\n * <igx-buttongroup selectionMode=\"multi\" [values]=\"fontOptions\">\n * </igx-buttongroup>\n * ```\n * The `fontOptions` value shown above is defined as:\n * ```typescript\n * this.fontOptions = [\n * { icon: 'format_bold', selected: false },\n * { icon: 'format_italic', selected: false },\n * { icon: 'format_underlined', selected: false }];\n * ```\n */\n@Component({\n selector: 'igx-buttongroup',\n templateUrl: 'button-group-content.component.html',\n styleUrl: 'buttongroup-content.component.css',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.Eager,\n imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]\n})\nexport class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {\n private _cdr = inject(ChangeDetectorRef);\n private _renderer = inject(Renderer2);\n private _el = inject(ElementRef);\n\n /**\n * A collection containing all buttons inside the button group.\n */\n public get buttons(): IgxButtonDirective[] {\n return [...this.viewButtons.toArray(), ...this.templateButtons.toArray()];\n }\n\n /**\n * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.\n * ```html\n * <igx-buttongroup [id]=\"'igx-dialog-56'\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n * ```\n */\n @HostBinding('attr.id')\n @Input()\n public id = `igx-buttongroup-${NEXT_ID++}`;\n\n /** @hidden @internal */\n @HostBinding('class.igx-button-group')\n public cssClass = 'igx-button-group';\n\n /** @hidden @internal */\n\n /**\n * @hidden\n */\n @HostBinding('style.zIndex')\n public zIndex = 0;\n\n /**\n * Sets/gets the role attribute value.\n *\n * @example\n * ```typescript\n * @ViewChild(\"MyButtonGroup\", { read: IgxButtonGroupComponent })\n * public badge: IgxButtonGroupComponent;\n *\n * buttonGroup.role = 'group';\n * ```\n */\n @HostBinding('attr.role')\n public role = 'group';\n\n /**\n * Allows you to set a style using the `itemContentCssClass` input.\n * The value should be the CSS class name that will be applied to the button group.\n * ```typescript\n * public style1 = \"styleClass\";\n * //..\n * ```\n * ```html\n * <igx-buttongroup [itemContentCssClass]=\"style1\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n * ```\n */\n @Input()\n public set itemContentCssClass(value: string) {\n this._itemContentCssClass = value || this._itemContentCssClass;\n }\n\n /**\n * Returns the CSS class of the item content of the button group.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * public buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let buttonSelect = this.buttonG.itemContentCssClass;\n * }\n * ```\n */\n public get itemContentCssClass(): string {\n return this._itemContentCssClass;\n }\n\n /**\n * Enables selecting multiple buttons. By default, multi-selection is false.\n *\n * @deprecated in version 16.1.0. Use the `selectionMode` property instead.\n */\n @Input()\n public get multiSelection() {\n if (this.selectionMode === 'multi') {\n return true;\n } else {\n return false;\n }\n }\n public set multiSelection(selectionMode: boolean) {\n if (selectionMode) {\n this.selectionMode = 'multi';\n } else {\n this.selectionMode = 'single';\n }\n }\n\n /**\n * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.\n * ```html\n * <igx-buttongroup [selectionMode]=\"'multi'\" [alignment]=\"alignment\"></igx-buttongroup>\n * ```\n */\n @Input()\n public get selectionMode() {\n return this._selectionMode;\n }\n public set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi') {\n if (this.viewButtons && selectionMode !== this._selectionMode) {\n this.buttons.forEach((_b, i) => {\n this.deselectButton(i);\n });\n this._selectionMode = selectionMode;\n } else {\n this._selectionMode = selectionMode;\n }\n }\n\n /**\n * Property that configures the buttons in the button group using a collection of `Button` objects.\n * ```typescript\n * public ngOnInit() {\n * this.cities = [\n * new Button({\n * label: \"Sofia\"\n * }),\n * new Button({\n * label: \"London\"\n * }),\n * new Button({\n * label: \"New York\",\n * selected: true\n * }),\n * new Button({\n * label: \"Tokyo\"\n * })\n * ];\n * }\n * //..\n * ```\n * ```html\n * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\"></igx-buttongroup>\n * ```\n */\n @Input() public values: any;\n\n /**\n * Disables the `igx-buttongroup` component. By default it's false.\n * ```html\n * <igx-buttongroup [disabled]=\"true\" [selectionMode]=\"'multi'\" [values]=\"fontOptions\"></igx-buttongroup>\n * ```\n */\n @Input({ transform: booleanAttribute })\n public get disabled(): boolean {\n return this._disabled;\n }\n public set disabled(value: boolean) {\n if (this._disabled !== value) {\n this._disabled = value;\n\n if (this.viewButtons && this.templateButtons) {\n this.buttons.forEach((b) => (b.disabled = this._disabled));\n }\n }\n }\n\n /**\n * Allows you to set the button group alignment.\n * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.\n * ```typescript\n * public alignment = ButtonGroupAlignment.vertical;\n * //..\n * ```\n * ```html\n * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\" [alignment]=\"alignment\"></igx-buttongroup>\n * ```\n */\n @Input()\n public set alignment(value: ButtonGroupAlignment) {\n this._isVertical = value === ButtonGroupAlignment.vertical;\n }\n /**\n * Returns the alignment of the `igx-buttongroup`.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * public buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let buttonAlignment = this.buttonG.alignment;\n * }\n * ```\n */\n public get alignment(): ButtonGroupAlignment {\n return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;\n }\n\n /**\n * An @Ouput property that emits an event when a button is selected.\n * ```typescript\n * @ViewChild(\"toast\")\n * private toast: IgxToastComponent;\n * public selectedHandler(buttongroup) {\n * this.toast.open()\n * }\n * //...\n * ```\n * ```html\n * <igx-buttongroup #MyChild [selectionMode]=\"'multi'\" (selected)=\"selectedHandler($event)\"></igx-buttongroup>\n * <igx-toast #toast>You have made a selection!</igx-toast>\n * ```\n */\n @Output()\n public selected = new EventEmitter<IButtonGroupEventArgs>();\n\n /**\n * An @Ouput property that emits an event when a button is deselected.\n * ```typescript\n * @ViewChild(\"toast\")\n * private toast: IgxToastComponent;\n * public deselectedHandler(buttongroup){\n * this.toast.open()\n * }\n * //...\n * ```\n * ```html\n * <igx-buttongroup> #MyChild [selectionMode]=\"'multi'\" (deselected)=\"deselectedHandler($event)\"></igx-buttongroup>\n * <igx-toast #toast>You have deselected a button!</igx-toast>\n * ```\n */\n @Output()\n public deselected = new EventEmitter<IButtonGroupEventArgs>();\n\n @ViewChildren(IgxButtonDirective) private viewButtons!: QueryList<IgxButtonDirective>;\n @ContentChildren(IgxButtonDirective) private templateButtons!: QueryList<IgxButtonDirective>;\n\n /**\n * Returns true if the `igx-buttongroup` alignment is vertical.\n * Note that in order for the accessor to work correctly the property should be set explicitly.\n * ```html\n * <igx-buttongroup #MyChild [alignment]=\"alignment\" [values]=\"alignOptions\">\n * ```\n * ```typescript\n * //...\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let orientation = this.buttonG.isVertical;\n * }\n * ```\n */\n @HostBinding('class.igx-button-group--vertical')\n public get isVertical(): boolean {\n return this._isVertical;\n }\n\n /**\n * @hidden\n */\n public selectedIndexes: number[] = [];\n\n protected buttonClickNotifier$ = new Subject<void>();\n protected queryListNotifier$ = new Subject<void>();\n\n private _isVertical!: boolean;\n private _itemContentCssClass!: string;\n private _disabled = false;\n private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';\n\n private mutationObserver!: MutationObserver;\n private observerConfig: MutationObserverInit = {\n attributeFilter: [\"data-selected\"],\n childList: true,\n subtree: true,\n };\n\n /**\n * Gets the selected button/buttons.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * let selectedButton = this.buttonG.selectedButtons;\n * }\n * ```\n */\n public get selectedButtons(): IgxButtonDirective[] {\n return this.buttons.filter((_, i) => this.selectedIndexes.indexOf(i) !== -1);\n }\n\n /**\n * Selects a button by its index.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * this.buttonG.selectButton(2);\n * this.cdr.detectChanges();\n * }\n * ```\n *\n * @memberOf {@link IgxButtonGroupComponent}\n */\n public selectButton(index: number) {\n if (index >= this.buttons.length || index < 0) {\n return;\n }\n\n const button = this.buttons[index];\n button.select();\n }\n\n /**\n * @hidden\n * @internal\n */\n public updateSelected(index: number) {\n const button = this.buttons[index];\n\n if (this.selectedIndexes.indexOf(index) === -1) {\n this.selectedIndexes.push(index);\n }\n\n this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');\n this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');\n\n const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n if (indexInViewButtons !== -1) {\n this.values[indexInViewButtons].selected = true;\n }\n\n // deselect other buttons if selectionMode is not multi\n if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {\n this.buttons.forEach((_, i) => {\n if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n this.deselectButton(i);\n this.updateDeselected(i);\n }\n });\n }\n\n }\n\n public updateDeselected(index: number) {\n const button = this.buttons[index];\n if (this.selectedIndexes.indexOf(index) !== -1) {\n this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);\n }\n\n this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');\n this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');\n\n const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n if (indexInViewButtons !== -1) {\n this.values[indexInViewButtons].selected = false;\n }\n }\n\n /**\n * Deselects a button by its index.\n * ```typescript\n * @ViewChild(\"MyChild\")\n * private buttonG: IgxButtonGroupComponent;\n * ngAfterViewInit(){\n * this.buttonG.deselectButton(2);\n * this.cdr.detectChanges();\n * }\n * ```\n *\n * @memberOf {@link IgxButtonGroupComponent}\n */\n public deselectButton(index: number) {\n if (index >= this.buttons.length || index < 0) {\n return;\n }\n\n const button = this.buttons[index];\n button.deselect();\n }\n\n /**\n * @hidden\n */\n public ngAfterViewInit() {\n const initButtons = () => {\n // Cancel any existing buttonClick subscriptions\n this.buttonClickNotifier$.next();\n\n this.selectedIndexes.splice(0, this.selectedIndexes.length);\n\n // initial configuration\n this.buttons.forEach((button, index) => {\n const buttonElement = button.nativeElement;\n this._renderer.addClass(buttonElement, 'igx-button-group__item');\n\n if (this.disabled) {\n button.disabled = true;\n }\n\n if (button.selected) {\n this.updateSelected(index);\n }\n\n button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));\n });\n };\n\n this.mutationObserver = this.setMutationsObserver()!;\n\n this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n this.mutationObserver.disconnect();\n initButtons();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n });\n this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n this.mutationObserver.disconnect();\n initButtons();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n });\n\n initButtons();\n this._cdr.detectChanges();\n this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n }\n\n /**\n * @hidden\n */\n public ngOnDestroy() {\n this.buttonClickNotifier$.next();\n this.buttonClickNotifier$.complete();\n\n this.queryListNotifier$.next();\n this.queryListNotifier$.complete();\n\n this.mutationObserver?.disconnect();\n }\n\n /**\n * @hidden\n */\n public _clickHandler(index: number) {\n const button = this.buttons[index];\n const args: IButtonGroupEventArgs = { owner: this, button, index };\n\n if (this.selectionMode !== 'multi') {\n this.buttons.forEach((b, i) => {\n if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n this.deselected.emit({ owner: this, button: b, index: i });\n }\n });\n }\n\n if (this.selectedIndexes.indexOf(index) === -1) {\n this.selectButton(index);\n this.selected.emit(args);\n } else {\n if (this.selectionMode !== 'singleRequired') {\n this.deselectButton(index);\n this.deselected.emit(args);\n }\n }\n }\n\n private setMutationsObserver() {\n if (typeof MutationObserver !== 'undefined') {\n return new MutationObserver((records, observer) => {\n // Stop observing while handling changes\n observer.disconnect();\n\n const updatedButtons = this.getUpdatedButtons(records);\n\n if (updatedButtons.length > 0) {\n updatedButtons.forEach((button) => {\n const index = this.buttons.map((b) => b.nativeElement).indexOf(button);\n\n this.updateButtonSelectionState(index);\n });\n }\n\n // Watch for changes again\n observer.observe(this._el.nativeElement, this.observerConfig);\n });\n }\n }\n\n private getUpdatedButtons(records: MutationRecord[]) {\n const updated: HTMLButtonElement[] = [];\n\n records\n .filter((x) => x.type === 'attributes')\n .reduce((prev, curr) => {\n prev.push(\n curr.target as HTMLButtonElement\n );\n return prev;\n }, updated);\n\n return updated;\n }\n\n private updateButtonSelectionState(index: number) {\n if (this.buttons[index].selected) {\n this.updateSelected(index);\n } else {\n this.updateDeselected(index);\n }\n }\n}\n\nexport interface IButtonGroupEventArgs extends IBaseEventArgs {\n owner: IgxButtonGroupComponent;\n button: IgxButtonDirective;\n index: number;\n}\n","<div class=\"igx-button-group__buttons-container\">\n @for (button of values; track button) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [selected]=\"button.selected\"\n [attr.data-togglable]=\"button.togglable\"\n [disabled]=\"disabled || button.disabled\"\n [igxLabel]=\"button.label\"\n [igxRipple]=\"button.ripple\"\n >\n <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n @if (button.icon) {\n <igx-icon>{{ button.icon }}</igx-icon>\n }\n @if (button.label) {\n <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n }\n </span>\n </button>\n }\n <ng-content></ng-content>\n</div>\n","import { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxButtonGroupComponent } from './button-group.component';\n\nexport * from './button-group.component';\n\n/* Button group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BUTTON_GROUP_DIRECTIVES = [\n IgxButtonGroupComponent,\n IgxButtonDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BUTTON_GROUP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n imports: [...IGX_BUTTON_GROUP_DIRECTIVES],\n exports: [...IGX_BUTTON_GROUP_DIRECTIVES]\n})\nexport class IgxButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxButtonGroupComponent"],"mappings":"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"}
package/fesm2022/igniteui-angular-directives.mjs CHANGED
@@ -8113,6 +8113,7 @@ function parseTriggers(triggers) {
8113
8113
  return new Set((triggers ?? '').split(TooltipRegexes.triggers).filter((s) => s.trim()));
8114
8114
  }
8115
8115
 
8116
+ const HOVER_SHOW_TRIGGERS = new Set(['mouseenter', 'mouseover', 'pointerenter', 'pointerover']);
8116
8117
  /**
8117
8118
  * **Ignite UI for Angular Tooltip Target** -
8118
8119
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
@@ -8580,8 +8581,12 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
8580
8581
  this._evaluateStickyState();
8581
8582
  this._pendingShowTrigger = triggerEvent?.type ?? null;
8582
8583
  this.target.timeoutId = setTimeout(() => {
8583
- // Call open() of IgxTooltipDirective
8584
+ const isHoverTrigger = this._pendingShowTrigger && HOVER_SHOW_TRIGGERS.has(this._pendingShowTrigger);
8584
8585
  this._pendingShowTrigger = null;
8586
+ this.target.timeoutId = null;
8587
+ if (isHoverTrigger && !this.nativeElement.matches(':hover')) {
8588
+ return;
8589
+ }
8585
8590
  this.target.open(this._mergedOverlaySettings);
8586
8591
  }, withDelay ? this.showDelay : 0);
8587
8592
  }