cax-design-system 2.7.12 → 2.8.0

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

@@ -83,13 +83,13 @@ class Card {
         return this.el.nativeElement.children[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Card, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Card, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Card, 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'\">\n  <div  [ngClass]=\"{\n    'cax-card-header': true,\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\n    'cax-card-header-with-image': imageUrl && !iconClass,\n    'cax-card-header-with-icon': iconClass && !imageUrl\n\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\n    <ng-content select=\"cax-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\n    <div *ngIf=\"activeCard\">\n      <cax-badge\n        [value]=\"badgeValue\"\n        [severity]=\"badgeSeverity\">\n      </cax-badge>\n    </div>\n </div>\n  <div class=\"cax-card-body\">\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\n          {{ header }}\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\n          {{ subheader }}\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-content\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\n          <ng-content select=\"cax-footer\"></ng-content>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n  </div>\n</div>\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: "18.2.9", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{ selector: 'cax-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, 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"] }]
+                    }, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\n  <div  [ngClass]=\"{\n    'cax-card-header': true,\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\n    'cax-card-header-with-image': imageUrl && !iconClass,\n    'cax-card-header-with-icon': iconClass && !imageUrl\n\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\n    <ng-content select=\"cax-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\n    <div *ngIf=\"activeCard\">\n      <cax-badge\n        [value]=\"badgeValue\"\n        [severity]=\"badgeSeverity\">\n      </cax-badge>\n    </div>\n </div>\n  <div class=\"cax-card-body\">\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\n          {{ header }}\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\n          {{ subheader }}\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-content\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\n          <ng-content select=\"cax-footer\"></ng-content>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n  </div>\n</div>\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { header: [{
                 type: Input
             }], activeCard: [{

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-card.mjs","sources":["../../src/app/components/card/card.ts","../../src/app/components/card/card.html","../../src/app/components/card/card.module.ts","../../src/app/components/card/cax-design-system-card.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, Input, QueryList, TemplateRef, ViewEncapsulation, signal } from '@angular/core';\nimport { BlockableUI, Footer, Header, CaxTemplate } from 'cax-design-system/api';\nimport { ObjectUtils } from 'cax-design-system/utils';\n\n/**\n * Card is a flexible container component.\n * @group Components\n */\n@Component({\n    selector: 'cax-card',\n    templateUrl: './card.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./card.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Card implements AfterContentInit, BlockableUI {\n    /**\n     * Header of the card.\n     * @group Props\n     */\n    @Input() header: string | undefined;\n    @Input() activeCard: boolean;\n    @Input() imageUrl: string;\n    @Input() badgeSeverity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input() badgeValue: string | number | null | undefined = 'Active';\n    @Input() iconClass!: string;\n\n    /**\n     * Subheader of the card.\n     * @group Props\n     */\n\n    @Input() subheader: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n\n    @Input() set style(value: { [klass: string]: any } | null | undefined) {\n        if (!ObjectUtils.equals(this._style(), value)) {\n            this._style.set(value);\n        }\n    }\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild(Footer) footerFacet: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    headerTemplate: TemplateRef<any> | undefined;\n\n    titleTemplate: TemplateRef<any> | undefined;\n\n    subtitleTemplate: TemplateRef<any> | undefined;\n\n    contentTemplate: TemplateRef<any> | undefined;\n\n    footerTemplate: TemplateRef<any> | undefined;\n\n    _style = signal<{ [klass: string]: any } | null | undefined>(null);\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'title':\n                    this.titleTemplate = item.template;\n                    break;\n\n                case 'subtitle':\n                    this.subtitleTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n}\n","<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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { Card } from './card';\nimport { Button, ButtonModule } from 'cax-design-system/button';\nimport { BadgeModule } from 'cax-design-system/badge';\n\n@NgModule({\n    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],\n    declarations: [Card],\n    exports: [Card, SharedModule]\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-card.mjs","sources":["../../src/app/components/card/card.ts","../../src/app/components/card/card.html","../../src/app/components/card/card.module.ts","../../src/app/components/card/cax-design-system-card.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, Input, QueryList, TemplateRef, ViewEncapsulation, signal } from '@angular/core';\nimport { BlockableUI, Footer, Header, CaxTemplate } from 'cax-design-system/api';\nimport { ObjectUtils } from 'cax-design-system/utils';\n\n/**\n * Card is a flexible container component.\n * @group Components\n */\n@Component({\n    selector: 'cax-card',\n    templateUrl: './card.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./card.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Card implements AfterContentInit, BlockableUI {\n    /**\n     * Header of the card.\n     * @group Props\n     */\n    @Input() header: string | undefined;\n    @Input() activeCard: boolean;\n    @Input() imageUrl: string;\n    @Input() badgeSeverity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input() badgeValue: string | number | null | undefined = 'Active';\n    @Input() iconClass!: string;\n\n    /**\n     * Subheader of the card.\n     * @group Props\n     */\n\n    @Input() subheader: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n\n    @Input() set style(value: { [klass: string]: any } | null | undefined) {\n        if (!ObjectUtils.equals(this._style(), value)) {\n            this._style.set(value);\n        }\n    }\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;\n\n    @ContentChild(Footer) footerFacet: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    headerTemplate: TemplateRef<any> | undefined;\n\n    titleTemplate: TemplateRef<any> | undefined;\n\n    subtitleTemplate: TemplateRef<any> | undefined;\n\n    contentTemplate: TemplateRef<any> | undefined;\n\n    footerTemplate: TemplateRef<any> | undefined;\n\n    _style = signal<{ [klass: string]: any } | null | undefined>(null);\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'title':\n                    this.titleTemplate = item.template;\n                    break;\n\n                case 'subtitle':\n                    this.subtitleTemplate = item.template;\n                    break;\n\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n}\n","<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\n  <div  [ngClass]=\"{\n    'cax-card-header': true,\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\n    'cax-card-header-with-image': imageUrl && !iconClass,\n    'cax-card-header-with-icon': iconClass && !imageUrl\n\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\n    <ng-content select=\"cax-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\n    <div *ngIf=\"activeCard\">\n      <cax-badge\n        [value]=\"badgeValue\"\n        [severity]=\"badgeSeverity\">\n      </cax-badge>\n    </div>\n </div>\n  <div class=\"cax-card-body\">\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\n          {{ header }}\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\n          {{ subheader }}\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-content\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\n          <ng-content select=\"cax-footer\"></ng-content>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { Card } from './card';\nimport { Button, ButtonModule } from 'cax-design-system/button';\nimport { BadgeModule } from 'cax-design-system/badge';\n\n@NgModule({\n    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],\n    declarations: [Card],\n    exports: [Card, SharedModule]\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -117,11 +117,11 @@ class CascadeSelectSub {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CascadeSelectSub, deps: [{ token: i0.ElementRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: CascadeSelectSub, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: CascadeSelectSub, 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\">\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n        <li\n            [ngClass]=\"getItemClass(processedOption)\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"level + 1\"\n            [attr.aria-setsize]=\"options.length\"\n            [attr.data-pc-section]=\"'item'\"\n            [id]=\"getOptionId(processedOption)\"\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n            [attr.aria-posinset]=\"i + 1\"\n        >\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultOptionTemplate>\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\n                </ng-template>\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\n                </span>\n            </div>\n            <cax-cascadeSelectSub\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                [role]=\"'group'\"\n                class=\"cax-cascadeselect-sublist\"\n                [selectId]=\"selectId\"\n                [focusedOptionId]=\"focusedOptionId\"\n                [activeOptionPath]=\"activeOptionPath\"\n                [options]=\"getOptionGroupChildren(processedOption)\"\n                [optionLabel]=\"optionLabel\"\n                [optionValue]=\"optionValue\"\n                [level]=\"level + 1\"\n                (onChange)=\"onOptionChange($event)\"\n                [optionGroupLabel]=\"optionGroupLabel\"\n                [optionGroupChildren]=\"optionGroupChildren\"\n                [dirty]=\"dirty\"\n                [optionTemplate]=\"optionTemplate\"\n            >\n            </cax-cascadeSelectSub>\n        </li>\n    </ng-template>\n</ul>\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: "18.2.9", ngImport: i0, type: CascadeSelectSub, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-cascadeSelectSub', encapsulation: ViewEncapsulation.None, 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" }]
+            args: [{ selector: 'cax-cascadeSelectSub', encapsulation: ViewEncapsulation.None, 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\">\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n        <li\n            [ngClass]=\"getItemClass(processedOption)\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"level + 1\"\n            [attr.aria-setsize]=\"options.length\"\n            [attr.data-pc-section]=\"'item'\"\n            [id]=\"getOptionId(processedOption)\"\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n            [attr.aria-posinset]=\"i + 1\"\n        >\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultOptionTemplate>\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\n                </ng-template>\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\n                </span>\n            </div>\n            <cax-cascadeSelectSub\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                [role]=\"'group'\"\n                class=\"cax-cascadeselect-sublist\"\n                [selectId]=\"selectId\"\n                [focusedOptionId]=\"focusedOptionId\"\n                [activeOptionPath]=\"activeOptionPath\"\n                [options]=\"getOptionGroupChildren(processedOption)\"\n                [optionLabel]=\"optionLabel\"\n                [optionValue]=\"optionValue\"\n                [level]=\"level + 1\"\n                (onChange)=\"onOptionChange($event)\"\n                [optionGroupLabel]=\"optionGroupLabel\"\n                [optionGroupChildren]=\"optionGroupChildren\"\n                [dirty]=\"dirty\"\n                [optionTemplate]=\"optionTemplate\"\n            >\n            </cax-cascadeSelectSub>\n        </li>\n    </ng-template>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.caxConfig }], propDecorators: { role: [{
                 type: Input
             }], selectId: [{
@@ -1015,7 +1015,7 @@ class CascadeSelect {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: CascadeSelect, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: CascadeSelect, 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'\">\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n        <input\n            #focusInput\n            readonly\n            type=\"text\"\n            role=\"combobox\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [tabindex]=\"!disabled ? tabindex : -1\"\n            [attr.id]=\"inputId\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (keydown)=\"onInputKeyDown($event)\"\n            pAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n    </div>\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n        </span>\n    </ng-container>\n\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\">\n        <ng-container *ngIf=\"loading; else elseBlock\">\n            <ng-container *ngIf=\"loadingIconTemplate\">\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!loadingIconTemplate\">\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n            </ng-container>\n        </ng-container>\n        <ng-template #elseBlock>\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </span>\n        </ng-template>\n    </div>\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\n    <cax-overlay\n        #overlay\n        [(visible)]=\"overlayVisible\"\n        [options]=\"overlayOptions\"\n        [target]=\"'@parent'\"\n        [appendTo]=\"appendTo\"\n        [showTransitionOptions]=\"showTransitionOptions\"\n        [hideTransitionOptions]=\"hideTransitionOptions\"\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\n        (onShow)=\"show($event)\"\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\n        (onHide)=\"hide($event)\"\n    >\n        <ng-template caxTemplate=\"content\">\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                    <cax-cascadeSelectSub\n                        [options]=\"processedOptions\"\n                        [selectId]=\"id\"\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\n                        [activeOptionPath]=\"activeOptionPath()\"\n                        [optionLabel]=\"optionLabel\"\n                        [optionValue]=\"optionValue\"\n                        [level]=\"0\"\n                        [optionTemplate]=\"optionTemplate\"\n                        [groupIconTemplate]=\"groupIconTemplate\"\n                        [optionGroupLabel]=\"optionGroupLabel\"\n                        [optionGroupChildren]=\"optionGroupChildren\"\n                        [optionDisabled]=\"optionDisabled\"\n                        [optionValue]=\"optionValue\"\n                        [optionLabel]=\"optionLabel\"\n                        [root]=\"true\"\n                        (onChange)=\"onOptionChange($event)\"\n                        [dirty]=\"dirty\"\n                        [role]=\"'tree'\"\n                    >\n                    </cax-cascadeSelectSub>\n                </div>\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n            </div>\n        </ng-template>\n    </cax-overlay>\n</div>\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: "18.2.9", ngImport: i0, type: CascadeSelect, decorators: [{
             type: Component,
@@ -1024,7 +1024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focused || overlayVisible',
                         '[class.cax-cascadeselect-clearable]': 'showClear && !disabled'
-                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n        <input\n            #focusInput\n            readonly\n            type=\"text\"\n            role=\"combobox\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [tabindex]=\"!disabled ? tabindex : -1\"\n            [attr.id]=\"inputId\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (keydown)=\"onInputKeyDown($event)\"\n            pAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n    </div>\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n        </span>\n    </ng-container>\n\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\">\n        <ng-container *ngIf=\"loading; else elseBlock\">\n            <ng-container *ngIf=\"loadingIconTemplate\">\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!loadingIconTemplate\">\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n            </ng-container>\n        </ng-container>\n        <ng-template #elseBlock>\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </span>\n        </ng-template>\n    </div>\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\n    <cax-overlay\n        #overlay\n        [(visible)]=\"overlayVisible\"\n        [options]=\"overlayOptions\"\n        [target]=\"'@parent'\"\n        [appendTo]=\"appendTo\"\n        [showTransitionOptions]=\"showTransitionOptions\"\n        [hideTransitionOptions]=\"hideTransitionOptions\"\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\n        (onShow)=\"show($event)\"\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\n        (onHide)=\"hide($event)\"\n    >\n        <ng-template caxTemplate=\"content\">\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                    <cax-cascadeSelectSub\n                        [options]=\"processedOptions\"\n                        [selectId]=\"id\"\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\n                        [activeOptionPath]=\"activeOptionPath()\"\n                        [optionLabel]=\"optionLabel\"\n                        [optionValue]=\"optionValue\"\n                        [level]=\"0\"\n                        [optionTemplate]=\"optionTemplate\"\n                        [groupIconTemplate]=\"groupIconTemplate\"\n                        [optionGroupLabel]=\"optionGroupLabel\"\n                        [optionGroupChildren]=\"optionGroupChildren\"\n                        [optionDisabled]=\"optionDisabled\"\n                        [optionValue]=\"optionValue\"\n                        [optionLabel]=\"optionLabel\"\n                        [root]=\"true\"\n                        (onChange)=\"onOptionChange($event)\"\n                        [dirty]=\"dirty\"\n                        [role]=\"'tree'\"\n                    >\n                    </cax-cascadeSelectSub>\n                </div>\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n            </div>\n        </ng-template>\n    </cax-overlay>\n</div>\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }, { type: i1.OverlayService }], propDecorators: { id: [{
                 type: Input
             }], selectOnFocus: [{