cax-design-system 2.8.0 → 2.8.2

package/fesm2022/cax-design-system-checkbox.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Input, ContentChildren, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
@@ -243,13 +243,13 @@ class Checkbox {
         return !this.indeterminate && (this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Checkbox, selector: "cax-checkbox", inputs: { size: "size", value: "value", name: "name", disabled: ["disabled", "disabled", booleanAttribute], binary: ["binary", "binary", booleanAttribute], label: "label", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", style: "style", styleClass: "styleClass", labelStyleClass: "labelStyleClass", formControl: "formControl", checkboxIcon: "checkboxIcon", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", variant: "variant", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], model: "model" }, outputs: { indeterminateChange: "indeterminateChange", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "cax-element" }, providers: [CHECKBOX_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n    [ngStyle]=\"style\"\n    [ngClass]=\"{\n    'cax-checkbox cax-component': true,\n    'cax-checkbox-checked': checked(),\n    'cax-checkbox-indeterminate': indeterminate,\n    'cax-checkbox-disabled': disabled,\n    'cax-checkbox-focused': focused,\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\n}\"\n    [class]=\"styleClass\"\n    [attr.data-pc-name]=\"'checkbox'\"\n    [attr.data-pc-section]=\"'root'\"\n>\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\n        <input\n            #input\n            [attr.id]=\"inputId\"\n            type=\"checkbox\"\n            [value]=\"value\"\n            [attr.name]=\"name\"\n            [checked]=\"checked()\"\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\n            [attr.tabindex]=\"tabindex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.required]=\"required\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-checked]=\"checked()\"\n            (change)=\"handleChange($event)\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            [attr.data-pc-section]=\"'hiddenInput'\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n    </div>\n    <div\n        class=\"cax-checkbox-box\"\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\n        'cax-checkbox-indeterminate': indeterminate, \n        'cax-checkbox-sm': size == 'sm',\n        'cax-checkbox-md': size == 'md',\n        'cax-checkbox-lg': size == 'lg', }\"\n        (click)=\"onClick($event, input, true)\"\n        [attr.data-cax-highlight]=\"checked()\"\n        [attr.data-cax-disabled]=\"disabled\"\n        [attr.data-cax-focused]=\"focused\"\n        [attr.data-pc-section]=\"'input'\"\n    >\n    <ng-container *ngIf=\"indeterminate\">\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \n    </ng-container>\n        <ng-container *ngIf=\"checked() && !indeterminate\">\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\n                <ng-container *ngIf=\"!checkboxIcon\" >\n                  <svg\n                  width=\"11\"\n                  height=\"10\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  [attr.aria-label]=\"ariaLabel\"\n                  [attr.aria-hidden]=\"ariaHidden\"\n                  [attr.role]=\"role\"\n                >\n                  <path\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1\"\n                  />\n                </svg>\n\n              </ng-container>\n            </ng-container>\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n    </div>\n</div>\n<label\n    (click)=\"onClick($event, input, true)\"\n    [class]=\"labelStyleClass\"\n    [ngClass]=\"{\n        'cax-checkbox-label': true, \n        'cax-checkbox-label-active': checked(), \n        'cax-disabled': disabled, \n        'cax-checkbox-label-focus': focused,\n        'cax-checkbox-label-sm': size === 'sm',\n        'cax-checkbox-label-md': size === 'md',\n        'cax-checkbox-label-lg': size === 'lg'\n      }\"\n    *ngIf=\"label\"\n    [attr.for]=\"inputId\"\n    [attr.data-pc-section]=\"'label'\"\n>\n    {{ label }}</label\n>\n", styles: ["@layer cax{.cax-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}.cax-checkbox-disabled{cursor:default!important;pointer-events:none}.cax-checkbox-box{display:flex;justify-content:center;align-items:center}cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.cax-checkbox-label{line-height:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Checkbox, selector: "cax-checkbox", inputs: { size: "size", value: "value", name: "name", disabled: ["disabled", "disabled", booleanAttribute], binary: ["binary", "binary", booleanAttribute], label: "label", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", style: "style", styleClass: "styleClass", labelStyleClass: "labelStyleClass", formControl: "formControl", checkboxIcon: "checkboxIcon", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", variant: "variant", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], model: "model" }, outputs: { indeterminateChange: "indeterminateChange", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "cax-element" }, providers: [CHECKBOX_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\r\n    [ngStyle]=\"style\"\r\n    [ngClass]=\"{\r\n    'cax-checkbox cax-component': true,\r\n    'cax-checkbox-checked': checked(),\r\n    'cax-checkbox-indeterminate': indeterminate,\r\n    'cax-checkbox-disabled': disabled,\r\n    'cax-checkbox-focused': focused,\r\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\r\n}\"\r\n    [class]=\"styleClass\"\r\n    [attr.data-pc-name]=\"'checkbox'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\r\n        <input\r\n            #input\r\n            [attr.id]=\"inputId\"\r\n            type=\"checkbox\"\r\n            [value]=\"value\"\r\n            [attr.name]=\"name\"\r\n            [checked]=\"checked()\"\r\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-checked]=\"checked()\"\r\n            (change)=\"handleChange($event)\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [attr.data-pc-section]=\"'hiddenInput'\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <div\r\n        class=\"cax-checkbox-box\"\r\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\r\n        'cax-checkbox-indeterminate': indeterminate, \r\n        'cax-checkbox-sm': size == 'sm',\r\n        'cax-checkbox-md': size == 'md',\r\n        'cax-checkbox-lg': size == 'lg', }\"\r\n        (click)=\"onClick($event, input, true)\"\r\n        [attr.data-cax-highlight]=\"checked()\"\r\n        [attr.data-cax-disabled]=\"disabled\"\r\n        [attr.data-cax-focused]=\"focused\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n    >\r\n    <ng-container *ngIf=\"indeterminate\">\r\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \r\n    </ng-container>\r\n        <ng-container *ngIf=\"checked() && !indeterminate\">\r\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\r\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\r\n                <ng-container *ngIf=\"!checkboxIcon\" >\r\n                  <svg\r\n                  width=\"11\"\r\n                  height=\"10\"\r\n                  viewBox=\"0 0 14 14\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  [attr.aria-label]=\"ariaLabel\"\r\n                  [attr.aria-hidden]=\"ariaHidden\"\r\n                  [attr.role]=\"role\"\r\n                >\r\n                  <path\r\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\r\n                    fill=\"currentColor\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"1\"\r\n                  />\r\n                </svg>\r\n\r\n              </ng-container>\r\n            </ng-container>\r\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\r\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<label\r\n    (click)=\"onClick($event, input, true)\"\r\n    [class]=\"labelStyleClass\"\r\n    [ngClass]=\"{\r\n        'cax-checkbox-label': true, \r\n        'cax-checkbox-label-active': checked(), \r\n        'cax-disabled': disabled, \r\n        'cax-checkbox-label-focus': focused,\r\n        'cax-checkbox-label-sm': size === 'sm',\r\n        'cax-checkbox-label-md': size === 'md',\r\n        'cax-checkbox-label-lg': size === 'lg'\r\n      }\"\r\n    *ngIf=\"label\"\r\n    [attr.for]=\"inputId\"\r\n    [attr.data-pc-section]=\"'label'\"\r\n>\r\n    {{ label }}</label\r\n>\r\n", styles: ["@layer cax{.cax-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}.cax-checkbox-disabled{cursor:default!important;pointer-events:none}.cax-checkbox-box{display:flex;justify-content:center;align-items:center}cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.cax-checkbox-label{line-height:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
             args: [{ selector: 'cax-checkbox', providers: [CHECKBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<div\n    [ngStyle]=\"style\"\n    [ngClass]=\"{\n    'cax-checkbox cax-component': true,\n    'cax-checkbox-checked': checked(),\n    'cax-checkbox-indeterminate': indeterminate,\n    'cax-checkbox-disabled': disabled,\n    'cax-checkbox-focused': focused,\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\n}\"\n    [class]=\"styleClass\"\n    [attr.data-pc-name]=\"'checkbox'\"\n    [attr.data-pc-section]=\"'root'\"\n>\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\n        <input\n            #input\n            [attr.id]=\"inputId\"\n            type=\"checkbox\"\n            [value]=\"value\"\n            [attr.name]=\"name\"\n            [checked]=\"checked()\"\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\n            [attr.tabindex]=\"tabindex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.required]=\"required\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-checked]=\"checked()\"\n            (change)=\"handleChange($event)\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            [attr.data-pc-section]=\"'hiddenInput'\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n    </div>\n    <div\n        class=\"cax-checkbox-box\"\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\n        'cax-checkbox-indeterminate': indeterminate, \n        'cax-checkbox-sm': size == 'sm',\n        'cax-checkbox-md': size == 'md',\n        'cax-checkbox-lg': size == 'lg', }\"\n        (click)=\"onClick($event, input, true)\"\n        [attr.data-cax-highlight]=\"checked()\"\n        [attr.data-cax-disabled]=\"disabled\"\n        [attr.data-cax-focused]=\"focused\"\n        [attr.data-pc-section]=\"'input'\"\n    >\n    <ng-container *ngIf=\"indeterminate\">\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \n    </ng-container>\n        <ng-container *ngIf=\"checked() && !indeterminate\">\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\n                <ng-container *ngIf=\"!checkboxIcon\" >\n                  <svg\n                  width=\"11\"\n                  height=\"10\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  [attr.aria-label]=\"ariaLabel\"\n                  [attr.aria-hidden]=\"ariaHidden\"\n                  [attr.role]=\"role\"\n                >\n                  <path\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1\"\n                  />\n                </svg>\n\n              </ng-container>\n            </ng-container>\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n    </div>\n</div>\n<label\n    (click)=\"onClick($event, input, true)\"\n    [class]=\"labelStyleClass\"\n    [ngClass]=\"{\n        'cax-checkbox-label': true, \n        'cax-checkbox-label-active': checked(), \n        'cax-disabled': disabled, \n        'cax-checkbox-label-focus': focused,\n        'cax-checkbox-label-sm': size === 'sm',\n        'cax-checkbox-label-md': size === 'md',\n        'cax-checkbox-label-lg': size === 'lg'\n      }\"\n    *ngIf=\"label\"\n    [attr.for]=\"inputId\"\n    [attr.data-pc-section]=\"'label'\"\n>\n    {{ label }}</label\n>\n", styles: ["@layer cax{.cax-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}.cax-checkbox-disabled{cursor:default!important;pointer-events:none}.cax-checkbox-box{display:flex;justify-content:center;align-items:center}cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.cax-checkbox-label{line-height:1}}\n"] }]
+                    }, template: "<div\r\n    [ngStyle]=\"style\"\r\n    [ngClass]=\"{\r\n    'cax-checkbox cax-component': true,\r\n    'cax-checkbox-checked': checked(),\r\n    'cax-checkbox-indeterminate': indeterminate,\r\n    'cax-checkbox-disabled': disabled,\r\n    'cax-checkbox-focused': focused,\r\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\r\n}\"\r\n    [class]=\"styleClass\"\r\n    [attr.data-pc-name]=\"'checkbox'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\r\n        <input\r\n            #input\r\n            [attr.id]=\"inputId\"\r\n            type=\"checkbox\"\r\n            [value]=\"value\"\r\n            [attr.name]=\"name\"\r\n            [checked]=\"checked()\"\r\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-checked]=\"checked()\"\r\n            (change)=\"handleChange($event)\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [attr.data-pc-section]=\"'hiddenInput'\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <div\r\n        class=\"cax-checkbox-box\"\r\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\r\n        'cax-checkbox-indeterminate': indeterminate, \r\n        'cax-checkbox-sm': size == 'sm',\r\n        'cax-checkbox-md': size == 'md',\r\n        'cax-checkbox-lg': size == 'lg', }\"\r\n        (click)=\"onClick($event, input, true)\"\r\n        [attr.data-cax-highlight]=\"checked()\"\r\n        [attr.data-cax-disabled]=\"disabled\"\r\n        [attr.data-cax-focused]=\"focused\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n    >\r\n    <ng-container *ngIf=\"indeterminate\">\r\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \r\n    </ng-container>\r\n        <ng-container *ngIf=\"checked() && !indeterminate\">\r\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\r\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\r\n                <ng-container *ngIf=\"!checkboxIcon\" >\r\n                  <svg\r\n                  width=\"11\"\r\n                  height=\"10\"\r\n                  viewBox=\"0 0 14 14\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  [attr.aria-label]=\"ariaLabel\"\r\n                  [attr.aria-hidden]=\"ariaHidden\"\r\n                  [attr.role]=\"role\"\r\n                >\r\n                  <path\r\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\r\n                    fill=\"currentColor\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"1\"\r\n                  />\r\n                </svg>\r\n\r\n              </ng-container>\r\n            </ng-container>\r\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\r\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<label\r\n    (click)=\"onClick($event, input, true)\"\r\n    [class]=\"labelStyleClass\"\r\n    [ngClass]=\"{\r\n        'cax-checkbox-label': true, \r\n        'cax-checkbox-label-active': checked(), \r\n        'cax-disabled': disabled, \r\n        'cax-checkbox-label-focus': focused,\r\n        'cax-checkbox-label-sm': size === 'sm',\r\n        'cax-checkbox-label-md': size === 'md',\r\n        'cax-checkbox-label-lg': size === 'lg'\r\n      }\"\r\n    *ngIf=\"label\"\r\n    [attr.for]=\"inputId\"\r\n    [attr.data-pc-section]=\"'label'\"\r\n>\r\n    {{ label }}</label\r\n>\r\n", styles: ["@layer cax{.cax-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}.cax-checkbox-disabled{cursor:default!important;pointer-events:none}.cax-checkbox-box{display:flex;justify-content:center;align-items:center}cax-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.cax-checkbox-label{line-height:1}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i1.caxConfig }], propDecorators: { size: [{
                 type: Input
             }], value: [{

package/fesm2022/cax-design-system-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-checkbox.mjs","sources":["../../src/app/components/checkbox/checkbox.ts","../../src/app/components/checkbox/checkbox.html","../../src/app/components/checkbox/checkbox.module.ts","../../src/app/components/checkbox/cax-design-system-checkbox.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Injector,\n    Input,\n    numberAttribute,\n    Output,\n    QueryList,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { CaxTemplate, caxConfig } from 'cax-design-system/api';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { ObjectUtils } from 'cax-design-system/utils';\nimport { CheckboxChangeEvent } from './checkbox.interface';\n\nexport const CHECKBOX_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Checkbox),\n    multi: true\n};\n/**\n * Checkbox is an extension to standard checkbox element with theming.\n * @group Components\n */\n@Component({\n    selector: 'cax-checkbox',\n    templateUrl: './checkbox.html',\n    providers: [CHECKBOX_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./checkbox.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Checkbox implements ControlValueAccessor {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    /**\n     * Value of the checkbox.\n     * @group Props\n     */\n    @Input() value: any;\n    /**\n     * Name of the checkbox group.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * When present, it specifies that the element should be disabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * Allows to select a boolean value instead of multiple values.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) binary: boolean | undefined;\n    /**\n     * Label of the checkbox.\n     * @group Props\n     */\n    @Input() label: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Used to define a string that labels the input element.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Style class of the label.\n     * @group Props\n     */\n    @Input() labelStyleClass: string | undefined;\n    /**\n     * Form control value.\n     * @group Props\n     */\n    @Input() formControl: FormControl | undefined;\n    /**\n     * Icon class of the checkbox icon.\n     * @group Props\n     */\n    @Input() checkboxIcon: string | undefined;\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean | undefined;\n    /**\n     * When present, it specifies that checkbox must be checked before submitting the form.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) required: boolean | undefined;\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Value in checked state.\n     * @group Props\n     */\n    @Input() trueValue: any = true;\n    /**\n     * Value in unchecked state.\n     * @group Props\n     */\n    @Input() falseValue: any = false;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Callback to invoke on value change.\n     * @param {CheckboxChangeEvent} event - Custom value change event.\n     * @group Emits\n     */\n    @Input({ transform: booleanAttribute }) indeterminate: boolean = false;\n\n    // New event emitter for indeterminate change\n    @Output() indeterminateChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n    @Output() onChange: EventEmitter<CheckboxChangeEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when the receives focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when the loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();\n\n    @ViewChild('input') inputViewChild: Nullable<ElementRef>;\n\n    @ContentChildren(CaxTemplate) templates: Nullable<QueryList<CaxTemplate>>;\n\n    checkboxIconTemplate: TemplateRef<any>;\n\n    @Input() model: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    focused: boolean = false;\n\n    constructor(\n        public cd: ChangeDetectorRef,\n        private readonly injector: Injector,\n        public config: caxConfig\n    ) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'icon':\n                    this.checkboxIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onClick(event, checkbox, focus: boolean) {\n        event.preventDefault();\n\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.updateModel(event);\n\n        if (focus) {\n            checkbox.focus();\n        }\n    }\n\n    updateModel(event) {\n        let newModelValue;\n\n        /*\n         * When `formControlName` or `formControl` is used - `writeValue` is not called after control changes.\n         * Otherwise it is causing multiple references to the actual value: there is one array reference inside the component and another one in the control value.\n         * `selfControl` is the source of truth of references, it is made to avoid reference loss.\n         * */\n        const selfControl = this.injector.get<NgControl | null>(NgControl, null, { optional: true, self: true });\n\n        const currentModelValue = selfControl && !this.formControl ? selfControl.value : this.model;\n\n        if (!this.binary) {\n            if (this.checked()) newModelValue = currentModelValue.filter((val) => !ObjectUtils.equals(val, this.value));\n            else newModelValue = currentModelValue ? [...currentModelValue, this.value] : [this.value];\n\n            this.onModelChange(newModelValue);\n            this.model = newModelValue;\n\n            if (this.formControl) {\n                this.formControl.setValue(newModelValue);\n            }\n        } else {\n            if (this.indeterminate) {\n                this.indeterminate = false; // Reset indeterminate state on user interaction\n                this.indeterminateChange.emit(this.indeterminate);\n            }\n            newModelValue = this.checked() ? this.falseValue : this.trueValue;\n            this.model = newModelValue;\n            this.onModelChange(newModelValue);\n        }\n\n        this.onChange.emit({ checked: newModelValue, originalEvent: event });\n    }\n\n    handleChange(event) {\n        if (!this.readonly) {\n            this.updateModel(event);\n        }\n    }\n\n    onInputFocus(event) {\n        this.focused = true;\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event) {\n        this.focused = false;\n        this.onBlur.emit(event);\n        this.onModelTouched();\n    }\n\n    focus() {\n        this.inputViewChild.nativeElement.focus();\n    }\n\n    writeValue(model: any): void {\n        this.model = model;\n        this.cd.markForCheck();\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        setTimeout(() => {\n            this.disabled = val;\n            this.cd.markForCheck();\n        });\n    }\n\n    checked() {\n        return !this.indeterminate && (this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model));\n    }\n}\n","<div\n    [ngStyle]=\"style\"\n    [ngClass]=\"{\n    'cax-checkbox cax-component': true,\n    'cax-checkbox-checked': checked(),\n    'cax-checkbox-indeterminate': indeterminate,\n    'cax-checkbox-disabled': disabled,\n    'cax-checkbox-focused': focused,\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\n}\"\n    [class]=\"styleClass\"\n    [attr.data-pc-name]=\"'checkbox'\"\n    [attr.data-pc-section]=\"'root'\"\n>\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\n        <input\n            #input\n            [attr.id]=\"inputId\"\n            type=\"checkbox\"\n            [value]=\"value\"\n            [attr.name]=\"name\"\n            [checked]=\"checked()\"\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\n            [attr.tabindex]=\"tabindex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.required]=\"required\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-checked]=\"checked()\"\n            (change)=\"handleChange($event)\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            [attr.data-pc-section]=\"'hiddenInput'\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n    </div>\n    <div\n        class=\"cax-checkbox-box\"\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\n        'cax-checkbox-indeterminate': indeterminate, \n        'cax-checkbox-sm': size == 'sm',\n        'cax-checkbox-md': size == 'md',\n        'cax-checkbox-lg': size == 'lg', }\"\n        (click)=\"onClick($event, input, true)\"\n        [attr.data-cax-highlight]=\"checked()\"\n        [attr.data-cax-disabled]=\"disabled\"\n        [attr.data-cax-focused]=\"focused\"\n        [attr.data-pc-section]=\"'input'\"\n    >\n    <ng-container *ngIf=\"indeterminate\">\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \n    </ng-container>\n        <ng-container *ngIf=\"checked() && !indeterminate\">\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\n                <ng-container *ngIf=\"!checkboxIcon\" >\n                  <svg\n                  width=\"11\"\n                  height=\"10\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  [attr.aria-label]=\"ariaLabel\"\n                  [attr.aria-hidden]=\"ariaHidden\"\n                  [attr.role]=\"role\"\n                >\n                  <path\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1\"\n                  />\n                </svg>\n\n              </ng-container>\n            </ng-container>\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n    </div>\n</div>\n<label\n    (click)=\"onClick($event, input, true)\"\n    [class]=\"labelStyleClass\"\n    [ngClass]=\"{\n        'cax-checkbox-label': true, \n        'cax-checkbox-label-active': checked(), \n        'cax-disabled': disabled, \n        'cax-checkbox-label-focus': focused,\n        'cax-checkbox-label-sm': size === 'sm',\n        'cax-checkbox-label-md': size === 'md',\n        'cax-checkbox-label-lg': size === 'lg'\n      }\"\n    *ngIf=\"label\"\n    [attr.for]=\"inputId\"\n    [attr.data-pc-section]=\"'label'\"\n>\n    {{ label }}</label\n>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { Checkbox } from './checkbox';\n\n@NgModule({\n    imports: [CommonModule, AutoFocusModule, SharedModule],\n    exports: [Checkbox, SharedModule],\n    declarations: [Checkbox]\n})\nexport class CheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-checkbox.mjs","sources":["../../src/app/components/checkbox/checkbox.ts","../../src/app/components/checkbox/checkbox.html","../../src/app/components/checkbox/checkbox.module.ts","../../src/app/components/checkbox/cax-design-system-checkbox.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Injector,\n    Input,\n    numberAttribute,\n    Output,\n    QueryList,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { CaxTemplate, caxConfig } from 'cax-design-system/api';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { ObjectUtils } from 'cax-design-system/utils';\nimport { CheckboxChangeEvent } from './checkbox.interface';\n\nexport const CHECKBOX_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Checkbox),\n    multi: true\n};\n/**\n * Checkbox is an extension to standard checkbox element with theming.\n * @group Components\n */\n@Component({\n    selector: 'cax-checkbox',\n    templateUrl: './checkbox.html',\n    providers: [CHECKBOX_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./checkbox.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Checkbox implements ControlValueAccessor {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    /**\n     * Value of the checkbox.\n     * @group Props\n     */\n    @Input() value: any;\n    /**\n     * Name of the checkbox group.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * When present, it specifies that the element should be disabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * Allows to select a boolean value instead of multiple values.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) binary: boolean | undefined;\n    /**\n     * Label of the checkbox.\n     * @group Props\n     */\n    @Input() label: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Used to define a string that labels the input element.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Style class of the label.\n     * @group Props\n     */\n    @Input() labelStyleClass: string | undefined;\n    /**\n     * Form control value.\n     * @group Props\n     */\n    @Input() formControl: FormControl | undefined;\n    /**\n     * Icon class of the checkbox icon.\n     * @group Props\n     */\n    @Input() checkboxIcon: string | undefined;\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean | undefined;\n    /**\n     * When present, it specifies that checkbox must be checked before submitting the form.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) required: boolean | undefined;\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Value in checked state.\n     * @group Props\n     */\n    @Input() trueValue: any = true;\n    /**\n     * Value in unchecked state.\n     * @group Props\n     */\n    @Input() falseValue: any = false;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Callback to invoke on value change.\n     * @param {CheckboxChangeEvent} event - Custom value change event.\n     * @group Emits\n     */\n    @Input({ transform: booleanAttribute }) indeterminate: boolean = false;\n\n    // New event emitter for indeterminate change\n    @Output() indeterminateChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n    @Output() onChange: EventEmitter<CheckboxChangeEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when the receives focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when the loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();\n\n    @ViewChild('input') inputViewChild: Nullable<ElementRef>;\n\n    @ContentChildren(CaxTemplate) templates: Nullable<QueryList<CaxTemplate>>;\n\n    checkboxIconTemplate: TemplateRef<any>;\n\n    @Input() model: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    focused: boolean = false;\n\n    constructor(\n        public cd: ChangeDetectorRef,\n        private readonly injector: Injector,\n        public config: caxConfig\n    ) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'icon':\n                    this.checkboxIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onClick(event, checkbox, focus: boolean) {\n        event.preventDefault();\n\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.updateModel(event);\n\n        if (focus) {\n            checkbox.focus();\n        }\n    }\n\n    updateModel(event) {\n        let newModelValue;\n\n        /*\n         * When `formControlName` or `formControl` is used - `writeValue` is not called after control changes.\n         * Otherwise it is causing multiple references to the actual value: there is one array reference inside the component and another one in the control value.\n         * `selfControl` is the source of truth of references, it is made to avoid reference loss.\n         * */\n        const selfControl = this.injector.get<NgControl | null>(NgControl, null, { optional: true, self: true });\n\n        const currentModelValue = selfControl && !this.formControl ? selfControl.value : this.model;\n\n        if (!this.binary) {\n            if (this.checked()) newModelValue = currentModelValue.filter((val) => !ObjectUtils.equals(val, this.value));\n            else newModelValue = currentModelValue ? [...currentModelValue, this.value] : [this.value];\n\n            this.onModelChange(newModelValue);\n            this.model = newModelValue;\n\n            if (this.formControl) {\n                this.formControl.setValue(newModelValue);\n            }\n        } else {\n            if (this.indeterminate) {\n                this.indeterminate = false; // Reset indeterminate state on user interaction\n                this.indeterminateChange.emit(this.indeterminate);\n            }\n            newModelValue = this.checked() ? this.falseValue : this.trueValue;\n            this.model = newModelValue;\n            this.onModelChange(newModelValue);\n        }\n\n        this.onChange.emit({ checked: newModelValue, originalEvent: event });\n    }\n\n    handleChange(event) {\n        if (!this.readonly) {\n            this.updateModel(event);\n        }\n    }\n\n    onInputFocus(event) {\n        this.focused = true;\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event) {\n        this.focused = false;\n        this.onBlur.emit(event);\n        this.onModelTouched();\n    }\n\n    focus() {\n        this.inputViewChild.nativeElement.focus();\n    }\n\n    writeValue(model: any): void {\n        this.model = model;\n        this.cd.markForCheck();\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        setTimeout(() => {\n            this.disabled = val;\n            this.cd.markForCheck();\n        });\n    }\n\n    checked() {\n        return !this.indeterminate && (this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model));\n    }\n}\n","<div\r\n    [ngStyle]=\"style\"\r\n    [ngClass]=\"{\r\n    'cax-checkbox cax-component': true,\r\n    'cax-checkbox-checked': checked(),\r\n    'cax-checkbox-indeterminate': indeterminate,\r\n    'cax-checkbox-disabled': disabled,\r\n    'cax-checkbox-focused': focused,\r\n    'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'\r\n}\"\r\n    [class]=\"styleClass\"\r\n    [attr.data-pc-name]=\"'checkbox'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\" [attr.data-cax-hidden-accessible]=\"true\">\r\n        <input\r\n            #input\r\n            [attr.id]=\"inputId\"\r\n            type=\"checkbox\"\r\n            [value]=\"value\"\r\n            [attr.name]=\"name\"\r\n            [checked]=\"checked()\"\r\n            [attr.indeterminate]=\"indeterminate ? 'true' : null\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-checked]=\"checked()\"\r\n            (change)=\"handleChange($event)\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [attr.data-pc-section]=\"'hiddenInput'\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <div\r\n        class=\"cax-checkbox-box\"\r\n        [ngClass]=\"{ 'cax-highlight': checked(), 'cax-disabled': disabled, 'cax-focus': focused,\r\n        'cax-checkbox-indeterminate': indeterminate, \r\n        'cax-checkbox-sm': size == 'sm',\r\n        'cax-checkbox-md': size == 'md',\r\n        'cax-checkbox-lg': size == 'lg', }\"\r\n        (click)=\"onClick($event, input, true)\"\r\n        [attr.data-cax-highlight]=\"checked()\"\r\n        [attr.data-cax-disabled]=\"disabled\"\r\n        [attr.data-cax-focused]=\"focused\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n    >\r\n    <ng-container *ngIf=\"indeterminate\">\r\n        <span class=\"cax cax-minus cax-checkbox-leaf-indeterminate cax-checkbox-icon\"></span>  \r\n    </ng-container>\r\n        <ng-container *ngIf=\"checked() && !indeterminate\">\r\n            <ng-container *ngIf=\"!checkboxIconTemplate\">\r\n                <span *ngIf=\"checkboxIcon\" class=\"cax-checkbox-icon\" [ngClass]=\"checkboxIcon\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                <!-- <CheckIcon *ngIf=\"!checkboxIcon\" [styleClass]=\"'cax-checkbox-icon'\" [attr.data-pc-section]=\"'icon'\" /> -->\r\n                <ng-container *ngIf=\"!checkboxIcon\" >\r\n                  <svg\r\n                  width=\"11\"\r\n                  height=\"10\"\r\n                  viewBox=\"0 0 14 14\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  [attr.aria-label]=\"ariaLabel\"\r\n                  [attr.aria-hidden]=\"ariaHidden\"\r\n                  [attr.role]=\"role\"\r\n                >\r\n                  <path\r\n                    d=\"M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z\"\r\n                    fill=\"currentColor\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"1\"\r\n                  />\r\n                </svg>\r\n\r\n              </ng-container>\r\n            </ng-container>\r\n            <span *ngIf=\"checkboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.data-pc-section]=\"'icon'\">\r\n                <ng-template *ngTemplateOutlet=\"checkboxIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<label\r\n    (click)=\"onClick($event, input, true)\"\r\n    [class]=\"labelStyleClass\"\r\n    [ngClass]=\"{\r\n        'cax-checkbox-label': true, \r\n        'cax-checkbox-label-active': checked(), \r\n        'cax-disabled': disabled, \r\n        'cax-checkbox-label-focus': focused,\r\n        'cax-checkbox-label-sm': size === 'sm',\r\n        'cax-checkbox-label-md': size === 'md',\r\n        'cax-checkbox-label-lg': size === 'lg'\r\n      }\"\r\n    *ngIf=\"label\"\r\n    [attr.for]=\"inputId\"\r\n    [attr.data-pc-section]=\"'label'\"\r\n>\r\n    {{ label }}</label\r\n>\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { Checkbox } from './checkbox';\n\n@NgModule({\n    imports: [CommonModule, AutoFocusModule, SharedModule],\n    exports: [Checkbox, SharedModule],\n    declarations: [Checkbox]\n})\nexport class CheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-chip.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, inject, booleanAttribute, ContentChildren, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { caxConfig, TranslationKeys, CaxTemplate, SharedModule } from 'cax-design-system/api';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -54,13 +54,13 @@ class Chip {
         this.onImageError.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Chip, selector: "cax-chip", inputs: { label: "label", icon: "icon", image: "image", alt: "alt", style: "style", styleClass: "styleClass", removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", size: "size", severity: "severity" }, outputs: { onRemove: "onRemove", onImageError: "onImageError" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\n  [ngClass]=\"containerClass()\"\n  [class]=\"styleClass\"\n  [ngStyle]=\"style\"\n  *ngIf=\"visible\"\n  [attr.data-pc-name]=\"'chip'\"\n  [attr.aria-label]=\"label\"\n  [attr.data-pc-section]=\"'root'\"\n>\n  <ng-content></ng-content>\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\n  <ng-template #iconTemplate>\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\n  </ng-template>\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\n  <ng-container *ngIf=\"removable\">\n    <ng-container *ngIf=\"!removeIconTemplate\">\n      <span\n        tabindex=\"0\"\n        *ngIf=\"removeIcon\"\n        [class]=\"removeIcon\"\n        [ngClass]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      ></span>\n      <TimesCircleIcon\n        tabindex=\"0\"\n        *ngIf=\"!removeIcon\"\n        [class]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      />\n    </ng-container>\n    <span\n      *ngIf=\"removeIconTemplate\"\n      tabindex=\"0\"\n      [attr.data-pc-section]=\"'removeicon'\"\n      class=\"cax-chip-remove-icon\"\n      (click)=\"close($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [attr.aria-label]=\"removeAriaLabel\"\n      role=\"button\"\n    >\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n    </span>\n  </ng-container>\n</div>\n", styles: ["@layer cax{.cax-chip{display:inline-flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.TimesCircleIcon, selector: "TimesCircleIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Chip, selector: "cax-chip", inputs: { label: "label", icon: "icon", image: "image", alt: "alt", style: "style", styleClass: "styleClass", removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", size: "size", severity: "severity" }, outputs: { onRemove: "onRemove", onImageError: "onImageError" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  *ngIf=\"visible\"\r\n  [attr.data-pc-name]=\"'chip'\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <ng-content></ng-content>\r\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\r\n  <ng-template #iconTemplate>\r\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n  </ng-template>\r\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\r\n  <ng-container *ngIf=\"removable\">\r\n    <ng-container *ngIf=\"!removeIconTemplate\">\r\n      <span\r\n        tabindex=\"0\"\r\n        *ngIf=\"removeIcon\"\r\n        [class]=\"removeIcon\"\r\n        [ngClass]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      ></span>\r\n      <TimesCircleIcon\r\n        tabindex=\"0\"\r\n        *ngIf=\"!removeIcon\"\r\n        [class]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      />\r\n    </ng-container>\r\n    <span\r\n      *ngIf=\"removeIconTemplate\"\r\n      tabindex=\"0\"\r\n      [attr.data-pc-section]=\"'removeicon'\"\r\n      class=\"cax-chip-remove-icon\"\r\n      (click)=\"close($event)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      [attr.aria-label]=\"removeAriaLabel\"\r\n      role=\"button\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n    </span>\r\n  </ng-container>\r\n</div>\r\n", styles: ["@layer cax{.cax-chip{display:inline-flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.TimesCircleIcon, selector: "TimesCircleIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Chip, decorators: [{
             type: Component,
             args: [{ selector: 'cax-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<div\n  [ngClass]=\"containerClass()\"\n  [class]=\"styleClass\"\n  [ngStyle]=\"style\"\n  *ngIf=\"visible\"\n  [attr.data-pc-name]=\"'chip'\"\n  [attr.aria-label]=\"label\"\n  [attr.data-pc-section]=\"'root'\"\n>\n  <ng-content></ng-content>\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\n  <ng-template #iconTemplate>\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\n  </ng-template>\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\n  <ng-container *ngIf=\"removable\">\n    <ng-container *ngIf=\"!removeIconTemplate\">\n      <span\n        tabindex=\"0\"\n        *ngIf=\"removeIcon\"\n        [class]=\"removeIcon\"\n        [ngClass]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      ></span>\n      <TimesCircleIcon\n        tabindex=\"0\"\n        *ngIf=\"!removeIcon\"\n        [class]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      />\n    </ng-container>\n    <span\n      *ngIf=\"removeIconTemplate\"\n      tabindex=\"0\"\n      [attr.data-pc-section]=\"'removeicon'\"\n      class=\"cax-chip-remove-icon\"\n      (click)=\"close($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [attr.aria-label]=\"removeAriaLabel\"\n      role=\"button\"\n    >\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n    </span>\n  </ng-container>\n</div>\n", styles: ["@layer cax{.cax-chip{display:inline-flex;align-items:center}}\n"] }]
+                    }, template: "<div\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  *ngIf=\"visible\"\r\n  [attr.data-pc-name]=\"'chip'\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <ng-content></ng-content>\r\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\r\n  <ng-template #iconTemplate>\r\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n  </ng-template>\r\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\r\n  <ng-container *ngIf=\"removable\">\r\n    <ng-container *ngIf=\"!removeIconTemplate\">\r\n      <span\r\n        tabindex=\"0\"\r\n        *ngIf=\"removeIcon\"\r\n        [class]=\"removeIcon\"\r\n        [ngClass]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      ></span>\r\n      <TimesCircleIcon\r\n        tabindex=\"0\"\r\n        *ngIf=\"!removeIcon\"\r\n        [class]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      />\r\n    </ng-container>\r\n    <span\r\n      *ngIf=\"removeIconTemplate\"\r\n      tabindex=\"0\"\r\n      [attr.data-pc-section]=\"'removeicon'\"\r\n      class=\"cax-chip-remove-icon\"\r\n      (click)=\"close($event)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      [attr.aria-label]=\"removeAriaLabel\"\r\n      role=\"button\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n    </span>\r\n  </ng-container>\r\n</div>\r\n", styles: ["@layer cax{.cax-chip{display:inline-flex;align-items:center}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{

package/fesm2022/cax-design-system-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-chip.mjs","sources":["../../src/app/components/chip/chip.ts","../../src/app/components/chip/chip.html","../../src/app/components/chip/chip.module.ts","../../src/app/components/chip/cax-design-system-chip.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, inject, booleanAttribute } from '@angular/core';\nimport { caxConfig, CaxTemplate, TranslationKeys } from 'cax-design-system/api';\n\ntype ChipSeverity = 'primary' | 'secondary' | 'success' | 'warning' | 'error';\n\n@Component({\n    selector: 'cax-chip',\n    templateUrl: './chip.html',\n    styleUrls: ['./chip.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Chip implements AfterContentInit {\n    @Input() label: string | undefined;\n    @Input() icon: string | undefined;\n    @Input() image: string | undefined;\n    @Input() alt: string | undefined;\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() styleClass: string | undefined;\n    @Input({ transform: booleanAttribute }) removable: boolean | undefined = false;\n    @Input() removeIcon: string | undefined;\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() severity: ChipSeverity = 'primary';\n    @Output() onRemove: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n    @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();\n    config = inject(caxConfig);\n    visible: boolean = true;\n    removeIconTemplate: TemplateRef<any> | undefined;\n\n    get removeAriaLabel() {\n        return this.config.getTranslation(TranslationKeys.ARIA)['removeLabel'];\n    }\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            if (item.getType() === 'removeicon') {\n                this.removeIconTemplate = item.template;\n            }\n        });\n    }\n\n    containerClass() {\n        return {\n            'cax-chip cax-component': true,\n            'cax-chip-image': this.image != null,\n            [`cax-chip-${this.severity}`]: !!this.severity,\n            [`cax-chip-${this.size}`]: !!this.size\n        };\n    }\n\n    close(event: Event) {\n        this.visible = false;\n        this.onRemove.emit(event as MouseEvent); // Cast if necessary for MouseEvent-specific handlers\n    }\n\n    onKeydown(event: KeyboardEvent) {\n        if (event.key === 'Enter' || event.key === 'Backspace') {\n            this.close(event);\n        }\n    }\n\n    imageError(event: Event) {\n        this.onImageError.emit(event);\n    }\n}\n","<div\n  [ngClass]=\"containerClass()\"\n  [class]=\"styleClass\"\n  [ngStyle]=\"style\"\n  *ngIf=\"visible\"\n  [attr.data-pc-name]=\"'chip'\"\n  [attr.aria-label]=\"label\"\n  [attr.data-pc-section]=\"'root'\"\n>\n  <ng-content></ng-content>\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\n  <ng-template #iconTemplate>\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\n  </ng-template>\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\n  <ng-container *ngIf=\"removable\">\n    <ng-container *ngIf=\"!removeIconTemplate\">\n      <span\n        tabindex=\"0\"\n        *ngIf=\"removeIcon\"\n        [class]=\"removeIcon\"\n        [ngClass]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      ></span>\n      <TimesCircleIcon\n        tabindex=\"0\"\n        *ngIf=\"!removeIcon\"\n        [class]=\"'cax-chip-remove-icon'\"\n        [attr.data-pc-section]=\"'removeicon'\"\n        (click)=\"close($event)\"\n        (keydown)=\"onKeydown($event)\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        role=\"button\"\n      />\n    </ng-container>\n    <span\n      *ngIf=\"removeIconTemplate\"\n      tabindex=\"0\"\n      [attr.data-pc-section]=\"'removeicon'\"\n      class=\"cax-chip-remove-icon\"\n      (click)=\"close($event)\"\n      (keydown)=\"onKeydown($event)\"\n      [attr.aria-label]=\"removeAriaLabel\"\n      role=\"button\"\n    >\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n    </span>\n  </ng-container>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Chip } from './chip';\nimport { TimesCircleIcon } from 'cax-design-system/icons/timescircle';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [CommonModule, TimesCircleIcon, SharedModule],\n    declarations: [Chip],\n    exports: [Chip, SharedModule]\n})\nexport class ChipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-chip.mjs","sources":["../../src/app/components/chip/chip.ts","../../src/app/components/chip/chip.html","../../src/app/components/chip/chip.module.ts","../../src/app/components/chip/cax-design-system-chip.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, inject, booleanAttribute } from '@angular/core';\nimport { caxConfig, CaxTemplate, TranslationKeys } from 'cax-design-system/api';\n\ntype ChipSeverity = 'primary' | 'secondary' | 'success' | 'warning' | 'error';\n\n@Component({\n    selector: 'cax-chip',\n    templateUrl: './chip.html',\n    styleUrls: ['./chip.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Chip implements AfterContentInit {\n    @Input() label: string | undefined;\n    @Input() icon: string | undefined;\n    @Input() image: string | undefined;\n    @Input() alt: string | undefined;\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() styleClass: string | undefined;\n    @Input({ transform: booleanAttribute }) removable: boolean | undefined = false;\n    @Input() removeIcon: string | undefined;\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() severity: ChipSeverity = 'primary';\n    @Output() onRemove: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n    @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();\n    config = inject(caxConfig);\n    visible: boolean = true;\n    removeIconTemplate: TemplateRef<any> | undefined;\n\n    get removeAriaLabel() {\n        return this.config.getTranslation(TranslationKeys.ARIA)['removeLabel'];\n    }\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            if (item.getType() === 'removeicon') {\n                this.removeIconTemplate = item.template;\n            }\n        });\n    }\n\n    containerClass() {\n        return {\n            'cax-chip cax-component': true,\n            'cax-chip-image': this.image != null,\n            [`cax-chip-${this.severity}`]: !!this.severity,\n            [`cax-chip-${this.size}`]: !!this.size\n        };\n    }\n\n    close(event: Event) {\n        this.visible = false;\n        this.onRemove.emit(event as MouseEvent); // Cast if necessary for MouseEvent-specific handlers\n    }\n\n    onKeydown(event: KeyboardEvent) {\n        if (event.key === 'Enter' || event.key === 'Backspace') {\n            this.close(event);\n        }\n    }\n\n    imageError(event: Event) {\n        this.onImageError.emit(event);\n    }\n}\n","<div\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  *ngIf=\"visible\"\r\n  [attr.data-pc-name]=\"'chip'\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <ng-content></ng-content>\r\n  <img [src]=\"image\" *ngIf=\"image; else iconTemplate\" (error)=\"imageError($event)\" [alt]=\"alt\" />\r\n  <ng-template #iconTemplate>\r\n    <span *ngIf=\"icon\" [class]=\"icon\" [ngClass]=\"'cax-chip-icon'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n  </ng-template>\r\n  <div class=\"-chip-text\" *ngIf=\"label\" [attr.data-pc-section]=\"'label'\">{{ label }}</div>\r\n  <ng-container *ngIf=\"removable\">\r\n    <ng-container *ngIf=\"!removeIconTemplate\">\r\n      <span\r\n        tabindex=\"0\"\r\n        *ngIf=\"removeIcon\"\r\n        [class]=\"removeIcon\"\r\n        [ngClass]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      ></span>\r\n      <TimesCircleIcon\r\n        tabindex=\"0\"\r\n        *ngIf=\"!removeIcon\"\r\n        [class]=\"'cax-chip-remove-icon'\"\r\n        [attr.data-pc-section]=\"'removeicon'\"\r\n        (click)=\"close($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.aria-label]=\"removeAriaLabel\"\r\n        role=\"button\"\r\n      />\r\n    </ng-container>\r\n    <span\r\n      *ngIf=\"removeIconTemplate\"\r\n      tabindex=\"0\"\r\n      [attr.data-pc-section]=\"'removeicon'\"\r\n      class=\"cax-chip-remove-icon\"\r\n      (click)=\"close($event)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      [attr.aria-label]=\"removeAriaLabel\"\r\n      role=\"button\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n    </span>\r\n  </ng-container>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Chip } from './chip';\nimport { TimesCircleIcon } from 'cax-design-system/icons/timescircle';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [CommonModule, TimesCircleIcon, SharedModule],\n    declarations: [Chip],\n    exports: [Chip, SharedModule]\n})\nexport class ChipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-chips.mjs

@@ -1,10 +1,10 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Input, ContentChildren, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
-import { CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { SharedModule, CaxTemplate } from 'cax-design-system/api';
 import { UniqueComponentId } from 'cax-design-system/utils';
 import * as i3 from 'cax-design-system/autofocus';
 import { AutoFocusModule } from 'cax-design-system/autofocus';
@@ -501,7 +501,7 @@ class Chips {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Chips, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Chips, isStandalone: true, selector: "cax-chips", inputs: { leftIconClass: "leftIconClass", leftIcon: "leftIcon", rightIconClass: "rightIconClass", rightIcon: "rightIcon", chipIcon: "chipIcon", label: "label", style: "style", styleClass: "styleClass", disabled: ["disabled", "disabled", booleanAttribute], field: "field", placeholder: "placeholder", max: ["max", "max", numberAttribute], maxLength: "maxLength", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", allowDuplicate: ["allowDuplicate", "allowDuplicate", booleanAttribute], caseSensitiveDuplication: ["caseSensitiveDuplication", "caseSensitiveDuplication", booleanAttribute], inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", addOnTab: ["addOnTab", "addOnTab", booleanAttribute], addOnBlur: ["addOnBlur", "addOnBlur", booleanAttribute], separator: "separator", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], variant: "variant", size: "size", value: "value", severity: "severity" }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", onChipClick: "onChipClick", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-chips-clearable": "showClear" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CHIPS_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "chipsScrollable", first: true, predicate: ["chipsScrollable"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["inputtext"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-chips': true, 'cax-chips-size-sm': size === 'sm', 'cax-chips-size-md': size === 'md', 'cax-chips-size-lg': size === 'lg', 'cax-chips-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <label *ngIf=\"label\" class=\"cax-chips-label\">{{label}}</label>\n\n    <div class=\"cax-chips-container\" [ngClass]=\"{'cax-focus': focused && !disabled, 'no-chips': !value?.length}\">\n        <span *ngIf=\"leftIcon\" class=\"cax-chips-icon-left\">\n            <i [ngClass]=\"leftIconClass\"></i>\n        </span>\n\n        <div class=\"cax-chips-content\" #chipsScrollable>\n            <div class=\"cax-chips-list\">\n                <cax-chip\n                    *ngFor=\"let item of value; let i = index\"\n                    [label]=\"field ? resolveFieldData(item, field) : item\"\n                    [removable]=\"true\"\n                    [size]=\"size\"\n                    [icon]=\"chipIcon\"\n                    [severity]=\"severity\"\n                    (onRemove)=\"removeItem($event, i)\"\n                    (click)=\"onItemClick($event, item)\"\n                    [class.cax-focus]=\"focusedIndex === i\"\n                >\n                </cax-chip>\n                <input\n                    #inputtext\n                    class=\"cax-chips-input\"\n                    [attr.placeholder]=\"(!value || !value.length) ? placeholder : ''\"\n                    (keydown)=\"onKeyDown($event)\"\n                    (input)=\"onInput()\"\n                    (paste)=\"onPaste($event)\"\n                    (focus)=\"onInputFocus($event)\"\n                    (blur)=\"onInputBlur($event)\"\n                    type=\"text\"\n                    [attr.id]=\"inputId\"\n                    [attr.maxlength]=\"maxLength\"\n                    [attr.tabindex]=\"tabindex\"\n                    [disabled]=\"disabled || isMaxedOut\"\n                    [ngStyle]=\"inputStyle\"\n                    [class]=\"inputStyleClass\"\n                    caxAutoFocus\n                    [autofocus]=\"autofocus\"\n                />\n            </div>\n        </div>\n\n        <span *ngIf=\"showClear && value?.length\" class=\"cax-chips-clear-icon\" (click)=\"clear()\">\n            <i class=\"cax cax-close-circle\"></i>\n        </span>\n        <span *ngIf=\"rightIcon\" class=\"cax-chips-icon-right\">\n            <i [ngClass]=\"rightIconClass\"></i>\n        </span>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-chips{display:inline-flex;flex-direction:column}.cax-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%;border-radius:8px;padding:0 10px;background:var(--neutral-100);border:1px solid var(--neutral-200);scroll-snap-align:end;scroll-snap-stop:always}.cax-chips-token:hover{border-color:var(--neutral-300)}.cax-chips-token-label{min-width:0%;overflow:auto}.cax-chips-token-label::-webkit-scrollbar{display:none}.cax-chips-input-token{flex:1 1 auto;display:inline-flex}.cax-chips-token-icon{cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.cax-chips-token-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-token-icon:hover{color:var(--neutral-900)}.cax-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-chips{display:flex}.cax-chips-clear-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px;cursor:pointer}.cax-chips-clear-icon:hover{color:var(--neutral-900)}.cax-chips-clear-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-clearable .cax-inputtext{position:relative}.cax-cax-edit-icon{margin-right:5px;height:15px;width:auto}.cax-chips-wrapper{display:flex;align-items:center;flex:1;min-width:0;position:relative}.cax-chips-content{display:flex;flex:1;min-width:0;overflow:hidden}.cax-input-icon-left{margin-right:10px}.cax-chips-multiple-container{display:flex;align-items:center;width:100%}.cax-chips-input-token{display:inline-flex;align-items:center;min-width:120px;flex:0 0 auto;height:100%}.cax-chips-input-token input{width:100%;background:transparent;border:none;outline:none;padding:4px;font-family:inherit;font-size:inherit}.cax-chips-icon-left{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-right:8px}.cax-chips-icon-left i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px}.cax-chips-icon-right i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right:hover{color:var(--neutral-900)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i4.Chip, selector: "cax-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "size", "severity"], outputs: ["onRemove", "onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Chips, isStandalone: true, selector: "cax-chips", inputs: { leftIconClass: "leftIconClass", leftIcon: "leftIcon", rightIconClass: "rightIconClass", rightIcon: "rightIcon", chipIcon: "chipIcon", label: "label", style: "style", styleClass: "styleClass", disabled: ["disabled", "disabled", booleanAttribute], field: "field", placeholder: "placeholder", max: ["max", "max", numberAttribute], maxLength: "maxLength", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", allowDuplicate: ["allowDuplicate", "allowDuplicate", booleanAttribute], caseSensitiveDuplication: ["caseSensitiveDuplication", "caseSensitiveDuplication", booleanAttribute], inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", addOnTab: ["addOnTab", "addOnTab", booleanAttribute], addOnBlur: ["addOnBlur", "addOnBlur", booleanAttribute], separator: "separator", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], variant: "variant", size: "size", value: "value", severity: "severity" }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", onChipClick: "onChipClick", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-chips-clearable": "showClear" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CHIPS_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "chipsScrollable", first: true, predicate: ["chipsScrollable"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["inputtext"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-chips': true, 'cax-chips-size-sm': size === 'sm', 'cax-chips-size-md': size === 'md', 'cax-chips-size-lg': size === 'lg', 'cax-chips-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n    <label *ngIf=\"label\" class=\"cax-chips-label\">{{label}}</label>\r\n\r\n    <div class=\"cax-chips-container\" [ngClass]=\"{'cax-focus': focused && !disabled, 'no-chips': !value?.length}\">\r\n        <span *ngIf=\"leftIcon\" class=\"cax-chips-icon-left\">\r\n            <i [ngClass]=\"leftIconClass\"></i>\r\n        </span>\r\n\r\n        <div class=\"cax-chips-content\" #chipsScrollable>\r\n            <div class=\"cax-chips-list\">\r\n                <cax-chip\r\n                    *ngFor=\"let item of value; let i = index\"\r\n                    [label]=\"field ? resolveFieldData(item, field) : item\"\r\n                    [removable]=\"true\"\r\n                    [size]=\"size\"\r\n                    [icon]=\"chipIcon\"\r\n                    [severity]=\"severity\"\r\n                    (onRemove)=\"removeItem($event, i)\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [class.cax-focus]=\"focusedIndex === i\"\r\n                >\r\n                </cax-chip>\r\n                <input\r\n                    #inputtext\r\n                    class=\"cax-chips-input\"\r\n                    [attr.placeholder]=\"(!value || !value.length) ? placeholder : ''\"\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (input)=\"onInput()\"\r\n                    (paste)=\"onPaste($event)\"\r\n                    (focus)=\"onInputFocus($event)\"\r\n                    (blur)=\"onInputBlur($event)\"\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [attr.maxlength]=\"maxLength\"\r\n                    [attr.tabindex]=\"tabindex\"\r\n                    [disabled]=\"disabled || isMaxedOut\"\r\n                    [ngStyle]=\"inputStyle\"\r\n                    [class]=\"inputStyleClass\"\r\n                    caxAutoFocus\r\n                    [autofocus]=\"autofocus\"\r\n                />\r\n            </div>\r\n        </div>\r\n\r\n        <span *ngIf=\"showClear && value?.length\" class=\"cax-chips-clear-icon\" (click)=\"clear()\">\r\n            <i class=\"cax cax-close-circle\"></i>\r\n        </span>\r\n        <span *ngIf=\"rightIcon\" class=\"cax-chips-icon-right\">\r\n            <i [ngClass]=\"rightIconClass\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-chips{display:inline-flex;flex-direction:column}.cax-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%;border-radius:8px;padding:0 10px;background:var(--neutral-100);border:1px solid var(--neutral-200);scroll-snap-align:end;scroll-snap-stop:always}.cax-chips-token:hover{border-color:var(--neutral-300)}.cax-chips-token-label{min-width:0%;overflow:auto}.cax-chips-token-label::-webkit-scrollbar{display:none}.cax-chips-input-token{flex:1 1 auto;display:inline-flex}.cax-chips-token-icon{cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.cax-chips-token-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-token-icon:hover{color:var(--neutral-900)}.cax-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-chips{display:flex}.cax-chips-clear-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px;cursor:pointer}.cax-chips-clear-icon:hover{color:var(--neutral-900)}.cax-chips-clear-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-clearable .cax-inputtext{position:relative}.cax-cax-edit-icon{margin-right:5px;height:15px;width:auto}.cax-chips-wrapper{display:flex;align-items:center;flex:1;min-width:0;position:relative}.cax-chips-content{display:flex;flex:1;min-width:0;overflow:hidden}.cax-input-icon-left{margin-right:10px}.cax-chips-multiple-container{display:flex;align-items:center;width:100%}.cax-chips-input-token{display:inline-flex;align-items:center;min-width:120px;flex:0 0 auto;height:100%}.cax-chips-input-token input{width:100%;background:transparent;border:none;outline:none;padding:4px;font-family:inherit;font-size:inherit}.cax-chips-icon-left{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-right:8px}.cax-chips-icon-left i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px}.cax-chips-icon-right i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right:hover{color:var(--neutral-900)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i4.Chip, selector: "cax-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "size", "severity"], outputs: ["onRemove", "onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Chips, decorators: [{
             type: Component,
@@ -510,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focused',
                         '[class.cax-chips-clearable]': 'showClear'
-                    }, providers: [CHIPS_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{'cax-chips': true, 'cax-chips-size-sm': size === 'sm', 'cax-chips-size-md': size === 'md', 'cax-chips-size-lg': size === 'lg', 'cax-chips-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <label *ngIf=\"label\" class=\"cax-chips-label\">{{label}}</label>\n\n    <div class=\"cax-chips-container\" [ngClass]=\"{'cax-focus': focused && !disabled, 'no-chips': !value?.length}\">\n        <span *ngIf=\"leftIcon\" class=\"cax-chips-icon-left\">\n            <i [ngClass]=\"leftIconClass\"></i>\n        </span>\n\n        <div class=\"cax-chips-content\" #chipsScrollable>\n            <div class=\"cax-chips-list\">\n                <cax-chip\n                    *ngFor=\"let item of value; let i = index\"\n                    [label]=\"field ? resolveFieldData(item, field) : item\"\n                    [removable]=\"true\"\n                    [size]=\"size\"\n                    [icon]=\"chipIcon\"\n                    [severity]=\"severity\"\n                    (onRemove)=\"removeItem($event, i)\"\n                    (click)=\"onItemClick($event, item)\"\n                    [class.cax-focus]=\"focusedIndex === i\"\n                >\n                </cax-chip>\n                <input\n                    #inputtext\n                    class=\"cax-chips-input\"\n                    [attr.placeholder]=\"(!value || !value.length) ? placeholder : ''\"\n                    (keydown)=\"onKeyDown($event)\"\n                    (input)=\"onInput()\"\n                    (paste)=\"onPaste($event)\"\n                    (focus)=\"onInputFocus($event)\"\n                    (blur)=\"onInputBlur($event)\"\n                    type=\"text\"\n                    [attr.id]=\"inputId\"\n                    [attr.maxlength]=\"maxLength\"\n                    [attr.tabindex]=\"tabindex\"\n                    [disabled]=\"disabled || isMaxedOut\"\n                    [ngStyle]=\"inputStyle\"\n                    [class]=\"inputStyleClass\"\n                    caxAutoFocus\n                    [autofocus]=\"autofocus\"\n                />\n            </div>\n        </div>\n\n        <span *ngIf=\"showClear && value?.length\" class=\"cax-chips-clear-icon\" (click)=\"clear()\">\n            <i class=\"cax cax-close-circle\"></i>\n        </span>\n        <span *ngIf=\"rightIcon\" class=\"cax-chips-icon-right\">\n            <i [ngClass]=\"rightIconClass\"></i>\n        </span>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-chips{display:inline-flex;flex-direction:column}.cax-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%;border-radius:8px;padding:0 10px;background:var(--neutral-100);border:1px solid var(--neutral-200);scroll-snap-align:end;scroll-snap-stop:always}.cax-chips-token:hover{border-color:var(--neutral-300)}.cax-chips-token-label{min-width:0%;overflow:auto}.cax-chips-token-label::-webkit-scrollbar{display:none}.cax-chips-input-token{flex:1 1 auto;display:inline-flex}.cax-chips-token-icon{cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.cax-chips-token-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-token-icon:hover{color:var(--neutral-900)}.cax-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-chips{display:flex}.cax-chips-clear-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px;cursor:pointer}.cax-chips-clear-icon:hover{color:var(--neutral-900)}.cax-chips-clear-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-clearable .cax-inputtext{position:relative}.cax-cax-edit-icon{margin-right:5px;height:15px;width:auto}.cax-chips-wrapper{display:flex;align-items:center;flex:1;min-width:0;position:relative}.cax-chips-content{display:flex;flex:1;min-width:0;overflow:hidden}.cax-input-icon-left{margin-right:10px}.cax-chips-multiple-container{display:flex;align-items:center;width:100%}.cax-chips-input-token{display:inline-flex;align-items:center;min-width:120px;flex:0 0 auto;height:100%}.cax-chips-input-token input{width:100%;background:transparent;border:none;outline:none;padding:4px;font-family:inherit;font-size:inherit}.cax-chips-icon-left{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-right:8px}.cax-chips-icon-left i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px}.cax-chips-icon-right i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right:hover{color:var(--neutral-900)}}\n"] }]
+                    }, providers: [CHIPS_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{'cax-chips': true, 'cax-chips-size-sm': size === 'sm', 'cax-chips-size-md': size === 'md', 'cax-chips-size-lg': size === 'lg', 'cax-chips-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n    <label *ngIf=\"label\" class=\"cax-chips-label\">{{label}}</label>\r\n\r\n    <div class=\"cax-chips-container\" [ngClass]=\"{'cax-focus': focused && !disabled, 'no-chips': !value?.length}\">\r\n        <span *ngIf=\"leftIcon\" class=\"cax-chips-icon-left\">\r\n            <i [ngClass]=\"leftIconClass\"></i>\r\n        </span>\r\n\r\n        <div class=\"cax-chips-content\" #chipsScrollable>\r\n            <div class=\"cax-chips-list\">\r\n                <cax-chip\r\n                    *ngFor=\"let item of value; let i = index\"\r\n                    [label]=\"field ? resolveFieldData(item, field) : item\"\r\n                    [removable]=\"true\"\r\n                    [size]=\"size\"\r\n                    [icon]=\"chipIcon\"\r\n                    [severity]=\"severity\"\r\n                    (onRemove)=\"removeItem($event, i)\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [class.cax-focus]=\"focusedIndex === i\"\r\n                >\r\n                </cax-chip>\r\n                <input\r\n                    #inputtext\r\n                    class=\"cax-chips-input\"\r\n                    [attr.placeholder]=\"(!value || !value.length) ? placeholder : ''\"\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (input)=\"onInput()\"\r\n                    (paste)=\"onPaste($event)\"\r\n                    (focus)=\"onInputFocus($event)\"\r\n                    (blur)=\"onInputBlur($event)\"\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [attr.maxlength]=\"maxLength\"\r\n                    [attr.tabindex]=\"tabindex\"\r\n                    [disabled]=\"disabled || isMaxedOut\"\r\n                    [ngStyle]=\"inputStyle\"\r\n                    [class]=\"inputStyleClass\"\r\n                    caxAutoFocus\r\n                    [autofocus]=\"autofocus\"\r\n                />\r\n            </div>\r\n        </div>\r\n\r\n        <span *ngIf=\"showClear && value?.length\" class=\"cax-chips-clear-icon\" (click)=\"clear()\">\r\n            <i class=\"cax cax-close-circle\"></i>\r\n        </span>\r\n        <span *ngIf=\"rightIcon\" class=\"cax-chips-icon-right\">\r\n            <i [ngClass]=\"rightIconClass\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-chips{display:inline-flex;flex-direction:column}.cax-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;max-width:100%;border-radius:8px;padding:0 10px;background:var(--neutral-100);border:1px solid var(--neutral-200);scroll-snap-align:end;scroll-snap-stop:always}.cax-chips-token:hover{border-color:var(--neutral-300)}.cax-chips-token-label{min-width:0%;overflow:auto}.cax-chips-token-label::-webkit-scrollbar{display:none}.cax-chips-input-token{flex:1 1 auto;display:inline-flex}.cax-chips-token-icon{cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.cax-chips-token-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-token-icon:hover{color:var(--neutral-900)}.cax-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-chips{display:flex}.cax-chips-clear-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px;cursor:pointer}.cax-chips-clear-icon:hover{color:var(--neutral-900)}.cax-chips-clear-icon i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-clearable .cax-inputtext{position:relative}.cax-cax-edit-icon{margin-right:5px;height:15px;width:auto}.cax-chips-wrapper{display:flex;align-items:center;flex:1;min-width:0;position:relative}.cax-chips-content{display:flex;flex:1;min-width:0;overflow:hidden}.cax-input-icon-left{margin-right:10px}.cax-chips-multiple-container{display:flex;align-items:center;width:100%}.cax-chips-input-token{display:inline-flex;align-items:center;min-width:120px;flex:0 0 auto;height:100%}.cax-chips-input-token input{width:100%;background:transparent;border:none;outline:none;padding:4px;font-family:inherit;font-size:inherit}.cax-chips-icon-left{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-right:8px}.cax-chips-icon-left i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;color:var(--neutral-750);margin-left:8px}.cax-chips-icon-right i{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.cax-chips-icon-right:hover{color:var(--neutral-900)}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]