cax-design-system 2.8.4 → 2.8.5

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

@@ -82,10 +82,10 @@ class Card {
     getBlockableElement() {
         return this.el.nativeElement.children[0];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Card, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Card, isStandalone: false, selector: "cax-card", inputs: { header: "header", activeCard: "activeCard", imageUrl: "imageUrl", badgeSeverity: "badgeSeverity", badgeValue: "badgeValue", iconClass: "iconClass", subheader: "subheader", style: "style", styleClass: "styleClass" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid var(--neutral-100)}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\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.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Card, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Card, isStandalone: false, selector: "cax-card", inputs: { header: "header", activeCard: "activeCard", imageUrl: "imageUrl", badgeSeverity: "badgeSeverity", badgeValue: "badgeValue", iconClass: "iconClass", subheader: "subheader", style: "style", styleClass: "styleClass" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid var(--neutral-100)}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\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.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Card, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{ selector: 'cax-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -120,11 +120,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class CardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CardModule, declarations: [Card], imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule], exports: [Card, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CardModule, imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CardModule, declarations: [Card], imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule], exports: [Card, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CardModule, imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],

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

@@ -679,8 +679,8 @@ class Carousel {
             this.stopAutoplay();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Carousel, isStandalone: false, selector: "p-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", verticalViewPortHeight: "verticalViewPortHeight", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", value: "value", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { onPage: "onPage" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Carousel, isStandalone: false, selector: "p-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", verticalViewPortHeight: "verticalViewPortHeight", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", value: "value", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { onPage: "onPage" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div [attr.id]="id" [ngClass]="{ 'p-carousel p-component': true, 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }" [ngStyle]="style" [class]="styleClass" role="region">
             <div class="p-carousel-header" *ngIf="headerFacet || headerTemplate">
                 <ng-content select="cax-header"></ng-content>
@@ -783,7 +783,7 @@ class Carousel {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-carousel{display:flex;flex-direction:column}.p-carousel-content{display:flex;flex-direction:column;overflow:auto}.p-carousel-prev,.p-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-carousel-container{display:flex;flex-direction:row}.p-carousel-items-content{overflow:hidden;width:100%}.p-carousel-items-container{display:flex;flex-direction:row}.p-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap}.p-carousel-indicator>button{display:flex;align-items:center;justify-content:center}.p-carousel-vertical .p-carousel-container{flex-direction:column}.p-carousel-vertical .p-carousel-items-container{flex-direction:column;height:100%}.p-items-hidden .p-carousel-item{visibility:hidden}.p-items-hidden .p-carousel-item.p-carousel-item-active{visibility:visible}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "ChevronUpIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Carousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Carousel, decorators: [{
             type: Component,
             args: [{ selector: 'p-carousel', template: `
         <div [attr.id]="id" [ngClass]="{ 'p-carousel p-component': true, 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }" [ngStyle]="style" [class]="styleClass" role="region">
@@ -954,11 +954,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [CaxTemplate]
             }] } });
 class CarouselModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CarouselModule, declarations: [Carousel], imports: [CommonModule, SharedModule, RippleModule, ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon], exports: [CommonModule, Carousel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CarouselModule, imports: [CommonModule, SharedModule, RippleModule, ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon, CommonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CarouselModule, declarations: [Carousel], imports: [CommonModule, SharedModule, RippleModule, ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon], exports: [CommonModule, Carousel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CarouselModule, imports: [CommonModule, SharedModule, RippleModule, ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon, CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule, RippleModule, ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon, ChevronUpIcon],

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

@@ -116,10 +116,10 @@ class CascadeSelectSub {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectSub, deps: [{ token: i0.ElementRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: CascadeSelectSub, isStandalone: false, selector: "cax-cascadeSelectSub", inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupIconTemplate: "groupIconTemplate", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute] }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<ul class=\"cax-cascadeselect-panel cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\r\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\r\n        <li\r\n            [ngClass]=\"getItemClass(processedOption)\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"level + 1\"\r\n            [attr.aria-setsize]=\"options.length\"\r\n            [attr.data-pc-section]=\"'item'\"\r\n            [id]=\"getOptionId(processedOption)\"\r\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\r\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n        >\r\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\r\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultOptionTemplate>\r\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\r\n                </ng-template>\r\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\r\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\r\n                </span>\r\n            </div>\r\n            <cax-cascadeSelectSub\r\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\r\n                [role]=\"'group'\"\r\n                class=\"cax-cascadeselect-sublist\"\r\n                [selectId]=\"selectId\"\r\n                [focusedOptionId]=\"focusedOptionId\"\r\n                [activeOptionPath]=\"activeOptionPath\"\r\n                [options]=\"getOptionGroupChildren(processedOption)\"\r\n                [optionLabel]=\"optionLabel\"\r\n                [optionValue]=\"optionValue\"\r\n                [level]=\"level + 1\"\r\n                (onChange)=\"onOptionChange($event)\"\r\n                [optionGroupLabel]=\"optionGroupLabel\"\r\n                [optionGroupChildren]=\"optionGroupChildren\"\r\n                [dirty]=\"dirty\"\r\n                [optionTemplate]=\"optionTemplate\"\r\n            >\r\n            </cax-cascadeSelectSub>\r\n        </li>\r\n    </ng-template>\r\n</ul>\r\n", dependencies: [{ 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectSub, deps: [{ token: i0.ElementRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: CascadeSelectSub, isStandalone: false, selector: "cax-cascadeSelectSub", inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupIconTemplate: "groupIconTemplate", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute] }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<ul class=\"cax-cascadeselect-panel cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\r\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\r\n        <li\r\n            [ngClass]=\"getItemClass(processedOption)\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"level + 1\"\r\n            [attr.aria-setsize]=\"options.length\"\r\n            [attr.data-pc-section]=\"'item'\"\r\n            [id]=\"getOptionId(processedOption)\"\r\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\r\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n        >\r\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\r\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultOptionTemplate>\r\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\r\n                </ng-template>\r\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\r\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\r\n                </span>\r\n            </div>\r\n            <cax-cascadeSelectSub\r\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\r\n                [role]=\"'group'\"\r\n                class=\"cax-cascadeselect-sublist\"\r\n                [selectId]=\"selectId\"\r\n                [focusedOptionId]=\"focusedOptionId\"\r\n                [activeOptionPath]=\"activeOptionPath\"\r\n                [options]=\"getOptionGroupChildren(processedOption)\"\r\n                [optionLabel]=\"optionLabel\"\r\n                [optionValue]=\"optionValue\"\r\n                [level]=\"level + 1\"\r\n                (onChange)=\"onOptionChange($event)\"\r\n                [optionGroupLabel]=\"optionGroupLabel\"\r\n                [optionGroupChildren]=\"optionGroupChildren\"\r\n                [dirty]=\"dirty\"\r\n                [optionTemplate]=\"optionTemplate\"\r\n            >\r\n            </cax-cascadeSelectSub>\r\n        </li>\r\n    </ng-template>\r\n</ul>\r\n", dependencies: [{ 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectSub, decorators: [{
             type: Component,
             args: [{ selector: 'cax-cascadeSelectSub', encapsulation: ViewEncapsulation.None, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cax-cascadeselect-panel cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\r\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\r\n        <li\r\n            [ngClass]=\"getItemClass(processedOption)\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"level + 1\"\r\n            [attr.aria-setsize]=\"options.length\"\r\n            [attr.data-pc-section]=\"'item'\"\r\n            [id]=\"getOptionId(processedOption)\"\r\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\r\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n        >\r\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\r\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultOptionTemplate>\r\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\r\n                </ng-template>\r\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\r\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\r\n                </span>\r\n            </div>\r\n            <cax-cascadeSelectSub\r\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\r\n                [role]=\"'group'\"\r\n                class=\"cax-cascadeselect-sublist\"\r\n                [selectId]=\"selectId\"\r\n                [focusedOptionId]=\"focusedOptionId\"\r\n                [activeOptionPath]=\"activeOptionPath\"\r\n                [options]=\"getOptionGroupChildren(processedOption)\"\r\n                [optionLabel]=\"optionLabel\"\r\n                [optionValue]=\"optionValue\"\r\n                [level]=\"level + 1\"\r\n                (onChange)=\"onOptionChange($event)\"\r\n                [optionGroupLabel]=\"optionGroupLabel\"\r\n                [optionGroupChildren]=\"optionGroupChildren\"\r\n                [dirty]=\"dirty\"\r\n                [optionTemplate]=\"optionTemplate\"\r\n            >\r\n            </cax-cascadeSelectSub>\r\n        </li>\r\n    </ng-template>\r\n</ul>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.caxConfig }], propDecorators: { role: [{
@@ -1014,10 +1014,10 @@ class CascadeSelect {
         this.disabled = val;
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: CascadeSelect, isStandalone: false, selector: "cax-cascadeSelect", inputs: { id: "id", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\r\n        <input\r\n            #focusInput\r\n            readonly\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [tabindex]=\"!disabled ? tabindex : -1\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            aria-haspopup=\"tree\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\r\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            (keydown)=\"onInputKeyDown($event)\"\r\n            pAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\r\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\r\n    </span>\r\n\r\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\r\n        <ng-container *ngIf=\"loading; else elseBlock\">\r\n            <ng-container *ngIf=\"loadingIconTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseBlock>\r\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\r\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\r\n    <cax-overlay\r\n        #overlay\r\n        [(visible)]=\"overlayVisible\"\r\n        [options]=\"overlayOptions\"\r\n        [target]=\"'@parent'\"\r\n        [appendTo]=\"appendTo\"\r\n        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\r\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\r\n        (onShow)=\"show($event)\"\r\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\r\n        (onHide)=\"hide($event)\"\r\n    >\r\n        <ng-template caxTemplate=\"content\">\r\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\r\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\r\n                    <cax-cascadeSelectSub\r\n                        [options]=\"processedOptions\"\r\n                        [selectId]=\"id\"\r\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\r\n                        [activeOptionPath]=\"activeOptionPath()\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [level]=\"0\"\r\n                        [optionTemplate]=\"optionTemplate\"\r\n                        [groupIconTemplate]=\"groupIconTemplate\"\r\n                        [optionGroupLabel]=\"optionGroupLabel\"\r\n                        [optionGroupChildren]=\"optionGroupChildren\"\r\n                        [optionDisabled]=\"optionDisabled\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [root]=\"true\"\r\n                        (onChange)=\"onOptionChange($event)\"\r\n                        [dirty]=\"dirty\"\r\n                        [role]=\"'tree'\"\r\n                    >\r\n                    </cax-cascadeSelectSub>\r\n                </div>\r\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\r\n            </div>\r\n        </ng-template>\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\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: "component", type: i4.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i5.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i6.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: CascadeSelect, isStandalone: false, selector: "cax-cascadeSelect", inputs: { id: "id", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\r\n        <input\r\n            #focusInput\r\n            readonly\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [tabindex]=\"!disabled ? tabindex : -1\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            aria-haspopup=\"tree\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\r\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            (keydown)=\"onInputKeyDown($event)\"\r\n            pAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\r\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\r\n    </span>\r\n\r\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\r\n        <ng-container *ngIf=\"loading; else elseBlock\">\r\n            <ng-container *ngIf=\"loadingIconTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseBlock>\r\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\r\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\r\n    <cax-overlay\r\n        #overlay\r\n        [(visible)]=\"overlayVisible\"\r\n        [options]=\"overlayOptions\"\r\n        [target]=\"'@parent'\"\r\n        [appendTo]=\"appendTo\"\r\n        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\r\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\r\n        (onShow)=\"show($event)\"\r\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\r\n        (onHide)=\"hide($event)\"\r\n    >\r\n        <ng-template caxTemplate=\"content\">\r\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\r\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\r\n                    <cax-cascadeSelectSub\r\n                        [options]=\"processedOptions\"\r\n                        [selectId]=\"id\"\r\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\r\n                        [activeOptionPath]=\"activeOptionPath()\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [level]=\"0\"\r\n                        [optionTemplate]=\"optionTemplate\"\r\n                        [groupIconTemplate]=\"groupIconTemplate\"\r\n                        [optionGroupLabel]=\"optionGroupLabel\"\r\n                        [optionGroupChildren]=\"optionGroupChildren\"\r\n                        [optionDisabled]=\"optionDisabled\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [root]=\"true\"\r\n                        (onChange)=\"onOptionChange($event)\"\r\n                        [dirty]=\"dirty\"\r\n                        [role]=\"'tree'\"\r\n                    >\r\n                    </cax-cascadeSelectSub>\r\n                </div>\r\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\r\n            </div>\r\n        </ng-template>\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\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: "component", type: i4.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i5.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i6.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'cax-cascadeSelect', host: {
                         class: 'cax-element cax-inputwrapper',
@@ -1142,11 +1142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class CascadeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon], exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon, OverlayModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon], exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon, OverlayModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CascadeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon],

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

@@ -144,8 +144,8 @@ class UIChart {
             this.chart = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UIChart, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: UIChart, isStandalone: false, selector: "p-chart", inputs: { type: "type", plugins: "plugins", width: "width", height: "height", responsive: ["responsive", "responsive", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", data: "data", options: "options" }, outputs: { onDataSelect: "onDataSelect" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UIChart, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: UIChart, isStandalone: false, selector: "p-chart", inputs: { type: "type", plugins: "plugins", width: "width", height: "height", responsive: ["responsive", "responsive", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", data: "data", options: "options" }, outputs: { onDataSelect: "onDataSelect" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: `
         <div
             [ngStyle]="{
                 position: 'relative',
@@ -166,7 +166,7 @@ class UIChart {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UIChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UIChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-chart',
@@ -223,11 +223,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Output
             }] } });
 class ChartModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ChartModule, declarations: [UIChart], imports: [CommonModule], exports: [UIChart] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChartModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ChartModule, declarations: [UIChart], imports: [CommonModule], exports: [UIChart] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChartModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -242,10 +242,10 @@ class Checkbox {
     checked() {
         return !this.indeterminate && (this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", 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: "19.2.16", type: Checkbox, isStandalone: false, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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: "19.2.17", type: Checkbox, isStandalone: false, 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: "19.2.16", ngImport: i0, type: Checkbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
             args: [{ selector: 'cax-checkbox', providers: [CHECKBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -320,11 +320,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class CheckboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CheckboxModule, declarations: [Checkbox], imports: [CommonModule, AutoFocusModule, SharedModule], exports: [Checkbox, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CheckboxModule, imports: [CommonModule, AutoFocusModule, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CheckboxModule, declarations: [Checkbox], imports: [CommonModule, AutoFocusModule, SharedModule], exports: [Checkbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxModule, imports: [CommonModule, AutoFocusModule, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AutoFocusModule, SharedModule],

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

@@ -53,10 +53,10 @@ class Chip {
     imageError(event) {
         this.onImageError.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Chip, isStandalone: false, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Chip, isStandalone: false, 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: "19.2.16", ngImport: i0, type: Chip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Chip, decorators: [{
             type: Component,
             args: [{ selector: 'cax-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -92,11 +92,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class ChipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ChipModule, declarations: [Chip], imports: [CommonModule, TimesCircleIcon, SharedModule], exports: [Chip, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipModule, imports: [CommonModule, TimesCircleIcon, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ChipModule, declarations: [Chip], imports: [CommonModule, TimesCircleIcon, SharedModule], exports: [Chip, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipModule, imports: [CommonModule, TimesCircleIcon, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TimesCircleIcon, SharedModule],

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

@@ -500,10 +500,10 @@ class Chips {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", 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: "19.2.16", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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: "19.2.17", 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: "19.2.16", ngImport: i0, type: Chips, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Chips, decorators: [{
             type: Component,
             args: [{ selector: 'cax-chips', standalone: true, imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, ChipModule], host: {
                         class: 'cax-element cax-inputwrapper',
@@ -610,11 +610,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class ChipsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ChipsModule, imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, Chips, ChipModule], exports: [Chips, InputTextModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipsModule, imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, Chips, ChipModule, InputTextModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ChipsModule, imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, Chips, ChipModule], exports: [Chips, InputTextModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipsModule, imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, Chips, ChipModule, InputTextModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, InputTextModule, SharedModule, AutoFocusModule, TimesCircleIcon, TimesIcon, Chips, ChipModule],

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

@@ -644,10 +644,10 @@ class ColorPicker {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColorPicker, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: ColorPicker, isStandalone: false, selector: "cax-colorPicker", inputs: { style: "style", styleClass: "styleClass", inline: ["inline", "inline", booleanAttribute], format: "format", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", inputId: "inputId", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, providers: [COLORPICKER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }, { propertyName: "colorSelector", first: true, predicate: ["colorSelector"], descendants: true }, { propertyName: "colorHandle", first: true, predicate: ["colorHandle"], descendants: true }, { propertyName: "hue", first: true, predicate: ["hue"], descendants: true }, { propertyName: "hueHandle", first: true, predicate: ["hueHandle"], descendants: true }], ngImport: i0, template: "<div\r\n    #container\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [ngClass]=\"{ 'cax-colorpicker cax-component': true, 'cax-colorpicker-overlay': !inline, 'cax-colorpicker-dragging': colorDragging || hueDragging }\"\r\n    [attr.data-pc-name]=\"'colorpicker'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <input\r\n        *ngIf=\"!inline\"\r\n        #input\r\n        type=\"text\"\r\n        class=\"cax-colorpicker-preview cax-inputtext\"\r\n        [ngClass]=\"{ 'cax-disabled': disabled }\"\r\n        readonly=\"readonly\"\r\n        [attr.tabindex]=\"tabindex\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onInputClick()\"\r\n        (keydown)=\"onInputKeydown($event)\"\r\n        (focus)=\"onInputFocus()\"\r\n        [attr.id]=\"inputId\"\r\n        [style.backgroundColor]=\"inputBgColor\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        pAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n    />\r\n    <div\r\n        *ngIf=\"inline || overlayVisible\"\r\n        [ngClass]=\"{ 'cax-colorpicker-panel': true, 'cax-colorpicker-overlay-panel': !inline, 'cax-disabled': disabled }\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        [@overlayAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        [attr.data-pc-section]=\"'panel'\"\r\n    >\r\n        <div class=\"cax-colorpicker-content\" [attr.data-pc-section]=\"'content'\">\r\n            <div #colorSelector class=\"cax-colorpicker-color-selector\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [attr.data-pc-section]=\"'selector'\">\r\n                <div class=\"cax-colorpicker-color\" [attr.data-pc-section]=\"'color'\">\r\n                    <div #colorHandle class=\"cax-colorpicker-color-handle\" [attr.data-pc-section]=\"'colorHandle'\"></div>\r\n                </div>\r\n            </div>\r\n            <div #hue class=\"cax-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [attr.data-pc-section]=\"'hue'\">\r\n                <div #hueHandle class=\"cax-colorpicker-hue-handle\" [attr.data-pc-section]=\"'hueHandle'\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-colorpicker{display:inline-block}.cax-colorpicker-dragging{cursor:pointer}.cax-colorpicker-overlay{position:relative}.cax-colorpicker-panel{position:relative;min-width:198px;min-height:174px;border-radius:var(--radius-100)}.cax-colorpicker-overlay-panel{position:absolute;top:0;left:0}.cax-colorpicker-preview{cursor:pointer}.cax-colorpicker-panel .cax-colorpicker-content{position:relative;margin:var(--space-100)}.cax-colorpicker-panel .cax-colorpicker-color-selector{width:150px;height:150px;position:absolute}.cax-colorpicker-panel .cax-colorpicker-color{width:150px;height:150px}.cax-colorpicker-panel .cax-colorpicker-color-handle{position:absolute;top:0;left:150px;border-radius:100%;width:10px;height:10px;border-width:1px;border-style:solid;margin:-5px 0 0 -5px;cursor:pointer;opacity:.85}.cax-colorpicker-panel .cax-colorpicker-hue{width:16px;height:150px;left:165px;position:absolute;opacity:.85}.cax-colorpicker-panel .cax-colorpicker-hue-handle{position:absolute;top:150px;left:0;width:20px;margin-left:-2px;margin-top:-5px;height:10px;border-width:2px;border-style:solid;opacity:.85;cursor:pointer}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColorPicker, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: ColorPicker, isStandalone: false, selector: "cax-colorPicker", inputs: { style: "style", styleClass: "styleClass", inline: ["inline", "inline", booleanAttribute], format: "format", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", inputId: "inputId", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, providers: [COLORPICKER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }, { propertyName: "colorSelector", first: true, predicate: ["colorSelector"], descendants: true }, { propertyName: "colorHandle", first: true, predicate: ["colorHandle"], descendants: true }, { propertyName: "hue", first: true, predicate: ["hue"], descendants: true }, { propertyName: "hueHandle", first: true, predicate: ["hueHandle"], descendants: true }], ngImport: i0, template: "<div\r\n    #container\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [ngClass]=\"{ 'cax-colorpicker cax-component': true, 'cax-colorpicker-overlay': !inline, 'cax-colorpicker-dragging': colorDragging || hueDragging }\"\r\n    [attr.data-pc-name]=\"'colorpicker'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <input\r\n        *ngIf=\"!inline\"\r\n        #input\r\n        type=\"text\"\r\n        class=\"cax-colorpicker-preview cax-inputtext\"\r\n        [ngClass]=\"{ 'cax-disabled': disabled }\"\r\n        readonly=\"readonly\"\r\n        [attr.tabindex]=\"tabindex\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onInputClick()\"\r\n        (keydown)=\"onInputKeydown($event)\"\r\n        (focus)=\"onInputFocus()\"\r\n        [attr.id]=\"inputId\"\r\n        [style.backgroundColor]=\"inputBgColor\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        pAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n    />\r\n    <div\r\n        *ngIf=\"inline || overlayVisible\"\r\n        [ngClass]=\"{ 'cax-colorpicker-panel': true, 'cax-colorpicker-overlay-panel': !inline, 'cax-disabled': disabled }\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        [@overlayAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        [attr.data-pc-section]=\"'panel'\"\r\n    >\r\n        <div class=\"cax-colorpicker-content\" [attr.data-pc-section]=\"'content'\">\r\n            <div #colorSelector class=\"cax-colorpicker-color-selector\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [attr.data-pc-section]=\"'selector'\">\r\n                <div class=\"cax-colorpicker-color\" [attr.data-pc-section]=\"'color'\">\r\n                    <div #colorHandle class=\"cax-colorpicker-color-handle\" [attr.data-pc-section]=\"'colorHandle'\"></div>\r\n                </div>\r\n            </div>\r\n            <div #hue class=\"cax-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [attr.data-pc-section]=\"'hue'\">\r\n                <div #hueHandle class=\"cax-colorpicker-hue-handle\" [attr.data-pc-section]=\"'hueHandle'\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-colorpicker{display:inline-block}.cax-colorpicker-dragging{cursor:pointer}.cax-colorpicker-overlay{position:relative}.cax-colorpicker-panel{position:relative;min-width:198px;min-height:174px;border-radius:var(--radius-100)}.cax-colorpicker-overlay-panel{position:absolute;top:0;left:0}.cax-colorpicker-preview{cursor:pointer}.cax-colorpicker-panel .cax-colorpicker-content{position:relative;margin:var(--space-100)}.cax-colorpicker-panel .cax-colorpicker-color-selector{width:150px;height:150px;position:absolute}.cax-colorpicker-panel .cax-colorpicker-color{width:150px;height:150px}.cax-colorpicker-panel .cax-colorpicker-color-handle{position:absolute;top:0;left:150px;border-radius:100%;width:10px;height:10px;border-width:1px;border-style:solid;margin:-5px 0 0 -5px;cursor:pointer;opacity:.85}.cax-colorpicker-panel .cax-colorpicker-hue{width:16px;height:150px;left:165px;position:absolute;opacity:.85}.cax-colorpicker-panel .cax-colorpicker-hue-handle{position:absolute;top:150px;left:0;width:20px;margin-left:-2px;margin-top:-5px;height:10px;border-width:2px;border-style:solid;opacity:.85;cursor:pointer}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{ selector: 'cax-colorPicker', animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], providers: [COLORPICKER_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -716,11 +716,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class ColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ColorPickerModule, declarations: [ColorPicker], imports: [CommonModule, AutoFocusModule], exports: [ColorPicker] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColorPickerModule, imports: [CommonModule, AutoFocusModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ColorPickerModule, declarations: [ColorPicker], imports: [CommonModule, AutoFocusModule], exports: [ColorPicker] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColorPickerModule, imports: [CommonModule, AutoFocusModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AutoFocusModule],