npm - cax-design-system - Versions diffs - 2.8.4 → 2.8.5 - Mend

cax-design-system 2.8.4 → 2.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (171) hide show

package/fesm2022/cax-design-system-avatargroup.mjs CHANGED Viewed

@@ -19,10 +19,10 @@ class AvatarGroup {
      * @group Props
      */
     style;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: AvatarGroup, isStandalone: false, selector: "cax-avatarGroup", inputs: { styleClass: "styleClass", style: "style" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"'cax-avatar-group cax-component'\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@layer cax{.cax-avatar-group cax-avatar+cax-avatar{margin-left:-1rem}.cax-avatar-group{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AvatarGroup, isStandalone: false, selector: "cax-avatarGroup", inputs: { styleClass: "styleClass", style: "style" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"'cax-avatar-group cax-component'\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@layer cax{.cax-avatar-group cax-avatar+cax-avatar{margin-left:-1rem}.cax-avatar-group{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AvatarGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroup, decorators: [{
             type: Component,
             args: [{ selector: 'cax-avatarGroup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -34,11 +34,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 class AvatarGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AvatarGroupModule, declarations: [AvatarGroup], imports: [CommonModule, AvatarModule], exports: [AvatarGroup, AvatarModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarGroupModule, imports: [CommonModule, AvatarModule, AvatarModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroupModule, declarations: [AvatarGroup], imports: [CommonModule, AvatarModule], exports: [AvatarGroup, AvatarModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroupModule, imports: [CommonModule, AvatarModule, AvatarModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AvatarModule],

package/fesm2022/cax-design-system-badge.mjs CHANGED Viewed

@@ -29,10 +29,10 @@ class Badge {
             [`cax-badge-${this.severity}`]: this.severity
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Badge, isStandalone: false, selector: "cax-badge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: "badgeDisabled", size: "size" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}.cax-badge-button-wrapper{position:relative;display:inline-flex}.cax-badge-button-wrapper .cax-badge{position:absolute;top:-8px;right:-8px;transform:none;min-width:20px;height:20px;line-height:20px;font-size:12px;z-index:1}.cax-button-badge{position:relative!important}.cax-button-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;min-width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.75rem}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Badge, isStandalone: false, selector: "cax-badge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: "badgeDisabled", size: "size" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}.cax-badge-button-wrapper{position:relative;display:inline-flex}.cax-badge-button-wrapper .cax-badge{position:absolute;top:-8px;right:-8px;transform:none;min-width:20px;height:20px;line-height:20px;font-size:12px;z-index:1}.cax-button-badge{position:relative!important}.cax-button-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;min-width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.75rem}}\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.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: Badge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Badge, decorators: [{
             type: Component,
             args: [{ selector: 'cax-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -206,10 +206,10 @@ class BadgeDirective {
             this.renderBadgeContent();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BadgeDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: BadgeDirective, isStandalone: false, selector: "[caxBadge]", inputs: { disabled: ["badgeDisabled", "disabled"], badgeSize: "badgeSize", size: "size", caxBadge: "caxBadge", value: "value", badgeSeverity: "badgeSeverity", severity: "severity", badgeStyle: "badgeStyle", badgeStyleClass: "badgeStyleClass" }, host: { classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: BadgeDirective, isStandalone: false, selector: "[caxBadge]", inputs: { disabled: ["badgeDisabled", "disabled"], badgeSize: "badgeSize", size: "size", caxBadge: "caxBadge", value: "value", badgeSeverity: "badgeSeverity", severity: "severity", badgeStyle: "badgeStyle", badgeStyleClass: "badgeStyleClass" }, host: { classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxBadge]',
@@ -243,11 +243,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 class BadgeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: BadgeModule, declarations: [Badge, BadgeDirective], imports: [CommonModule, SharedModule], exports: [Badge, BadgeDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BadgeModule, imports: [CommonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: BadgeModule, declarations: [Badge, BadgeDirective], imports: [CommonModule, SharedModule], exports: [Badge, BadgeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeModule, imports: [CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule],

package/fesm2022/cax-design-system-baseicon.mjs CHANGED Viewed

@@ -21,10 +21,10 @@ class BaseIcon {
     getClassNames() {
         return `cax-icon ${this.styleClass ? this.styleClass + ' ' : ''}${this.spin ? 'cax-icon-spin' : ''}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BaseIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: BaseIcon, isStandalone: true, selector: "ng-component", inputs: { label: "label", spin: ["spin", "spin", booleanAttribute], styleClass: "styleClass" }, host: { classAttribute: "cax-element cax-icon-wrapper" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: BaseIcon, isStandalone: true, selector: "ng-component", inputs: { label: "label", spin: ["spin", "spin", booleanAttribute], styleClass: "styleClass" }, host: { classAttribute: "cax-element cax-icon-wrapper" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BaseIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseIcon, decorators: [{
             type: Component,
             args: [{
                     template: ` <ng-content></ng-content> `,

package/fesm2022/cax-design-system-blockui.mjs CHANGED Viewed

@@ -132,8 +132,8 @@ class BlockUI {
         this.unblock();
         this.destroyModal();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BlockUI, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: BlockUI, isStandalone: false, selector: "p-blockUI", inputs: { target: "target", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], styleClass: "styleClass", blocked: "blocked" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BlockUI, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: BlockUI, isStandalone: false, selector: "p-blockUI", inputs: { target: "target", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], styleClass: "styleClass", blocked: "blocked" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: `
         <div
             #mask
             [class]="styleClass"
@@ -148,7 +148,7 @@ class BlockUI {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-blockui{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;transition-property:background-color;display:flex;align-items:center;justify-content:center}.p-blockui.p-component-overlay{position:absolute}.p-blockui-document.p-component-overlay{position:fixed}.p-blockui-leave.p-component-overlay{background-color:transparent}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: BlockUI, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BlockUI, decorators: [{
             type: Component,
             args: [{ selector: 'p-blockUI', template: `
         <div
@@ -192,11 +192,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: ['mask']
             }] } });
 class BlockUIModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BlockUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: BlockUIModule, declarations: [BlockUI], imports: [CommonModule], exports: [BlockUI] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BlockUIModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BlockUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: BlockUIModule, declarations: [BlockUI], imports: [CommonModule], exports: [BlockUI] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BlockUIModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BlockUIModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BlockUIModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/cax-design-system-breadcrumb.mjs CHANGED Viewed

@@ -99,10 +99,10 @@ class Breadcrumb {
         const lastPath = this.router ? this.router.url : '';
         return routerLink === lastPath ? 'page' : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Breadcrumb, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Breadcrumb, isStandalone: false, selector: "cax-breadcrumb", inputs: { model: "model", style: "style", styleClass: "styleClass", home: "home", homeAriaLabel: "homeAriaLabel" }, outputs: { onItemClick: "onItemClick" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<nav [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'cax-breadcrumb cax-component'\" [attr.data-pc-name]=\"'breadcrumb'\" [attr.data-pc-section]=\"'root'\">\r\n    <ol [attr.data-pc-section]=\"'menu'\" class=\"cax-breadcrumb-list\">\r\n        <li\r\n            [class]=\"home.styleClass\"\r\n            [attr.id]=\"home.id\"\r\n            [ngClass]=\"{ 'cax-breadcrumb-home': true, 'cax-disabled': home.disabled }\"\r\n            [ngStyle]=\"home.style\"\r\n            *ngIf=\"home\"\r\n            caxTooltip\r\n            [tooltipOptions]=\"home.tooltipOptions\"\r\n            [attr.data-pc-section]=\"'home'\"\r\n            [attr.aria-disabled]=\"home.disabled\"\r\n        >\r\n            <a\r\n                [href]=\"home.url ? home.url : null\"\r\n                *ngIf=\"!home.routerLink\"\r\n                [attr.aria-label]=\"homeAriaLabel\"\r\n                class=\"cax-menuitem-link\"\r\n                (click)=\"onClick($event, home)\"\r\n                [target]=\"home.target\"\r\n                [attr.title]=\"home.title\"\r\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\r\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\r\n            >\r\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iprivateyle\"></span>\r\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\r\n                <ng-container *ngIf=\"home.label\">\r\n                    <span *ngIf=\"home.escape !== false; else htmlHomeLabel\" class=\"cax-menuitem-text\">{{ home.label }}</span>\r\n                    <ng-template #htmlHomeLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"home.label\"></span></ng-template>\r\n                </ng-container>\r\n            </a>\r\n            <a\r\n                *ngIf=\"home.routerLink\"\r\n                [routerLink]=\"home.routerLink\"\r\n                [attr.aria-label]=\"homeAriaLabel\"\r\n                [queryParams]=\"home.queryParams\"\r\n                [routerLinkActive]=\"'cax-menuitem-link-active'\"\r\n                [routerLinkActiveOptions]=\"home.routerLinkActiveOptions || { exact: false }\"\r\n                class=\"cax-menuitem-link\"\r\n                (click)=\"onClick($event, home)\"\r\n                [target]=\"home.target\"\r\n                [attr.title]=\"home.title\"\r\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\r\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\r\n                [fragment]=\"home.fragment\"\r\n                [queryParamsHandling]=\"home.queryParamsHandling\"\r\n                [preserveFragment]=\"home.preserveFragment\"\r\n                [skipLocationChange]=\"home.skipLocationChange\"\r\n                [replaceUrl]=\"home.replaceUrl\"\r\n                [state]=\"home.state\"\r\n            >\r\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iconStyle\"></span>\r\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\r\n                <ng-container *ngIf=\"home.label\">\r\n                    <span *ngIf=\"home.escape !== false; else htmlHomeRouteLabel\" class=\"cax-menuitem-text\">{{ home.label }}</span>\r\n                    <ng-template #htmlHomeRouteLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"home.label\"></span></ng-template>\r\n                </ng-container>\r\n            </a>\r\n        </li>\r\n        <li *ngIf=\"model && home\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\r\n            <ChevronRightIcon *ngIf=\"!separatorTemplate\" />\r\n            <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\r\n        </li>\r\n        <ng-template ngFor let-item let-end=\"last\" [ngForOf]=\"model\">\r\n            <li\r\n                [class]=\"item.styleClass\"\r\n                [attr.id]=\"item.id\"\r\n                [attr.aria-disabled]=\"item.disabled\"\r\n                [ngStyle]=\"item.style\"\r\n                [ngClass]=\"{ 'cax-disabled': item.disabled }\"\r\n                caxTooltip\r\n                [tooltipOptions]=\"item.tooltipOptions\"\r\n                [attr.data-pc-section]=\"'menuitem'\"\r\n            >\r\n                <a\r\n                    *ngIf=\"!item.routerLink\"\r\n                    [attr.href]=\"item.url ? item.url : null\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onClick($event, item)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.title]=\"item.title\"\r\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\r\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\r\n                >\r\n                    <ng-container *ngIf=\"!itemTemplate\">\r\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\r\n                        <ng-container *ngIf=\"item.label\">\r\n                            <span *ngIf=\"item.escape !== false; else htmlLabel\" class=\"cax-menuitem-text\">{{ item.label }}</span>\r\n                            <ng-template #htmlLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"itemTemplate\">\r\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\r\n                    </ng-container>\r\n                </a>\r\n                <a\r\n                    *ngIf=\"item.routerLink\"\r\n                    [routerLink]=\"item.routerLink\"\r\n                    [queryParams]=\"item.queryParams\"\r\n                    [routerLinkActive]=\"'cax-menuitem-link-active'\"\r\n                    [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onClick($event, item)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.title]=\"item.title\"\r\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\r\n                    [fragment]=\"item.fragment\"\r\n                    [queryParamsHandling]=\"item.queryParamsHandling\"\r\n                    [preserveFragment]=\"item.preserveFragment\"\r\n                    [skipLocationChange]=\"item.skipLocationChange\"\r\n                    [replaceUrl]=\"item.replaceUrl\"\r\n                    [state]=\"item.state\"\r\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\r\n                >\r\n                    <ng-container *ngIf=\"!itemTemplate\">\r\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\r\n                        <ng-container *ngIf=\"item.label\">\r\n                            <span *ngIf=\"item.escape !== false; else htmlRouteLabel\" class=\"cax-menuitem-text\">{{ item.label }}</span>\r\n                            <ng-template #htmlRouteLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"itemTemplate\">\r\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\r\n                    </ng-container>\r\n                </a>\r\n            </li>\r\n            <li *ngIf=\"!end\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\r\n                <ChevronRightIcon *ngIf=\"!separatorTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\r\n            </li>\r\n        </ng-template>\r\n    </ol>\r\n</nav>\r\n", styles: ["@layer cax{.cax-breadcrumb{overflow-x:auto}.cax-breadcrumb .cax-breadcrumb-list{margin:0;padding:0;list-style-type:none;display:flex;align-items:center;flex-wrap:nowrap}.cax-breadcrumb .cax-menuitem-text{line-height:1}.cax-breadcrumb .cax-menuitem-link{text-decoration:none;display:flex;align-items:center}.cax-breadcrumb .cax-menuitem-separator{display:flex;align-items:center}.cax-breadcrumb::-webkit-scrollbar{display:none}}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "component", type: i4.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: i5.HomeIcon, selector: "HomeIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Breadcrumb, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Breadcrumb, isStandalone: false, selector: "cax-breadcrumb", inputs: { model: "model", style: "style", styleClass: "styleClass", home: "home", homeAriaLabel: "homeAriaLabel" }, outputs: { onItemClick: "onItemClick" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<nav [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'cax-breadcrumb cax-component'\" [attr.data-pc-name]=\"'breadcrumb'\" [attr.data-pc-section]=\"'root'\">\r\n    <ol [attr.data-pc-section]=\"'menu'\" class=\"cax-breadcrumb-list\">\r\n        <li\r\n            [class]=\"home.styleClass\"\r\n            [attr.id]=\"home.id\"\r\n            [ngClass]=\"{ 'cax-breadcrumb-home': true, 'cax-disabled': home.disabled }\"\r\n            [ngStyle]=\"home.style\"\r\n            *ngIf=\"home\"\r\n            caxTooltip\r\n            [tooltipOptions]=\"home.tooltipOptions\"\r\n            [attr.data-pc-section]=\"'home'\"\r\n            [attr.aria-disabled]=\"home.disabled\"\r\n        >\r\n            <a\r\n                [href]=\"home.url ? home.url : null\"\r\n                *ngIf=\"!home.routerLink\"\r\n                [attr.aria-label]=\"homeAriaLabel\"\r\n                class=\"cax-menuitem-link\"\r\n                (click)=\"onClick($event, home)\"\r\n                [target]=\"home.target\"\r\n                [attr.title]=\"home.title\"\r\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\r\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\r\n            >\r\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iprivateyle\"></span>\r\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\r\n                <ng-container *ngIf=\"home.label\">\r\n                    <span *ngIf=\"home.escape !== false; else htmlHomeLabel\" class=\"cax-menuitem-text\">{{ home.label }}</span>\r\n                    <ng-template #htmlHomeLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"home.label\"></span></ng-template>\r\n                </ng-container>\r\n            </a>\r\n            <a\r\n                *ngIf=\"home.routerLink\"\r\n                [routerLink]=\"home.routerLink\"\r\n                [attr.aria-label]=\"homeAriaLabel\"\r\n                [queryParams]=\"home.queryParams\"\r\n                [routerLinkActive]=\"'cax-menuitem-link-active'\"\r\n                [routerLinkActiveOptions]=\"home.routerLinkActiveOptions || { exact: false }\"\r\n                class=\"cax-menuitem-link\"\r\n                (click)=\"onClick($event, home)\"\r\n                [target]=\"home.target\"\r\n                [attr.title]=\"home.title\"\r\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\r\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\r\n                [fragment]=\"home.fragment\"\r\n                [queryParamsHandling]=\"home.queryParamsHandling\"\r\n                [preserveFragment]=\"home.preserveFragment\"\r\n                [skipLocationChange]=\"home.skipLocationChange\"\r\n                [replaceUrl]=\"home.replaceUrl\"\r\n                [state]=\"home.state\"\r\n            >\r\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iconStyle\"></span>\r\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\r\n                <ng-container *ngIf=\"home.label\">\r\n                    <span *ngIf=\"home.escape !== false; else htmlHomeRouteLabel\" class=\"cax-menuitem-text\">{{ home.label }}</span>\r\n                    <ng-template #htmlHomeRouteLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"home.label\"></span></ng-template>\r\n                </ng-container>\r\n            </a>\r\n        </li>\r\n        <li *ngIf=\"model && home\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\r\n            <ChevronRightIcon *ngIf=\"!separatorTemplate\" />\r\n            <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\r\n        </li>\r\n        <ng-template ngFor let-item let-end=\"last\" [ngForOf]=\"model\">\r\n            <li\r\n                [class]=\"item.styleClass\"\r\n                [attr.id]=\"item.id\"\r\n                [attr.aria-disabled]=\"item.disabled\"\r\n                [ngStyle]=\"item.style\"\r\n                [ngClass]=\"{ 'cax-disabled': item.disabled }\"\r\n                caxTooltip\r\n                [tooltipOptions]=\"item.tooltipOptions\"\r\n                [attr.data-pc-section]=\"'menuitem'\"\r\n            >\r\n                <a\r\n                    *ngIf=\"!item.routerLink\"\r\n                    [attr.href]=\"item.url ? item.url : null\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onClick($event, item)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.title]=\"item.title\"\r\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\r\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\r\n                >\r\n                    <ng-container *ngIf=\"!itemTemplate\">\r\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\r\n                        <ng-container *ngIf=\"item.label\">\r\n                            <span *ngIf=\"item.escape !== false; else htmlLabel\" class=\"cax-menuitem-text\">{{ item.label }}</span>\r\n                            <ng-template #htmlLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"itemTemplate\">\r\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\r\n                    </ng-container>\r\n                </a>\r\n                <a\r\n                    *ngIf=\"item.routerLink\"\r\n                    [routerLink]=\"item.routerLink\"\r\n                    [queryParams]=\"item.queryParams\"\r\n                    [routerLinkActive]=\"'cax-menuitem-link-active'\"\r\n                    [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onClick($event, item)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.title]=\"item.title\"\r\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\r\n                    [fragment]=\"item.fragment\"\r\n                    [queryParamsHandling]=\"item.queryParamsHandling\"\r\n                    [preserveFragment]=\"item.preserveFragment\"\r\n                    [skipLocationChange]=\"item.skipLocationChange\"\r\n                    [replaceUrl]=\"item.replaceUrl\"\r\n                    [state]=\"item.state\"\r\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\r\n                >\r\n                    <ng-container *ngIf=\"!itemTemplate\">\r\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\r\n                        <ng-container *ngIf=\"item.label\">\r\n                            <span *ngIf=\"item.escape !== false; else htmlRouteLabel\" class=\"cax-menuitem-text\">{{ item.label }}</span>\r\n                            <ng-template #htmlRouteLabel><span class=\"cax-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"itemTemplate\">\r\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\r\n                    </ng-container>\r\n                </a>\r\n            </li>\r\n            <li *ngIf=\"!end\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\r\n                <ChevronRightIcon *ngIf=\"!separatorTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\r\n            </li>\r\n        </ng-template>\r\n    </ol>\r\n</nav>\r\n", styles: ["@layer cax{.cax-breadcrumb{overflow-x:auto}.cax-breadcrumb .cax-breadcrumb-list{margin:0;padding:0;list-style-type:none;display:flex;align-items:center;flex-wrap:nowrap}.cax-breadcrumb .cax-menuitem-text{line-height:1}.cax-breadcrumb .cax-menuitem-link{text-decoration:none;display:flex;align-items:center}.cax-breadcrumb .cax-menuitem-separator{display:flex;align-items:center}.cax-breadcrumb::-webkit-scrollbar{display:none}}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "component", type: i4.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: i5.HomeIcon, selector: "HomeIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Breadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Breadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'cax-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -125,11 +125,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 class BreadcrumbModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: BreadcrumbModule, declarations: [Breadcrumb], imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule], exports: [Breadcrumb, RouterModule, TooltipModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbModule, declarations: [Breadcrumb], imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule], exports: [Breadcrumb, RouterModule, TooltipModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: BreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule],

package/fesm2022/cax-design-system-button.mjs CHANGED Viewed

@@ -112,10 +112,10 @@ class Button {
     focus() {
         this.el.nativeElement.firstChild.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Button, isStandalone: true, selector: "cax-button", inputs: { type: "type", iconPos: "iconPos", icon: "icon", badge: "badge", rightIcon: "rightIcon", leftIcon: "leftIcon", label: "label", disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], plain: ["plain", "plain", booleanAttribute], severity: "severity", outlined: ["outlined", "outlined", booleanAttribute], link: ["link", "link", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], size: "size", style: "style", styleClass: "styleClass", badgeClass: "badgeClass", ariaLabel: "ariaLabel", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-disabled": "disabled || loading" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<button\r\n    [attr.type]=\"type\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"style\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"buttonClass\"\r\n    (click)=\"onClick.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n    (blur)=\"onBlur.emit($event)\"\r\n    caxRipple\r\n    [attr.data-pc-name]=\"'button'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n    [attr.tabindex]=\"tabindex\"\r\n    caxAutoFocus\r\n    [autofocus]=\"autofocus\"\r\n>\r\n    <ng-container *ngIf=\"loading\" class=\"cax-button-content-wrapper\">\r\n        <ng-container class=\"cax-button-loading-container\">\r\n            <SpinnerIcon [styleClass]=\"spinnerIconClass()\" class=\"cax-main-loader cax-button-label\" [spin]=\"true\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'loadingicon'\" />\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading\">\r\n        <!-- Center Icon when there's no label -->\r\n        <ng-container *ngIf=\"!label\">\r\n            <span *ngIf=\"icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\r\n        </ng-container>\r\n\r\n        <!-- Left and Right Icons with Label -->\r\n        <ng-container class=\"cax-button-content-wrapper\" *ngIf=\"label\">\r\n            <!-- Left Icon -->\r\n            <ng-container *ngIf=\"leftIcon\">\r\n                <span class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\r\n            </ng-container>\r\n            <!-- Label -->\r\n            <span class=\"cax-button-label\">{{ label }}</span>\r\n            <!-- Right Icon -->\r\n            <ng-container *ngIf=\"rightIcon\">\r\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <!-- Badge -->\r\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: Ripple, selector: "[caxRipple]" }, { kind: "directive", type: AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Button, isStandalone: true, selector: "cax-button", inputs: { type: "type", iconPos: "iconPos", icon: "icon", badge: "badge", rightIcon: "rightIcon", leftIcon: "leftIcon", label: "label", disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], plain: ["plain", "plain", booleanAttribute], severity: "severity", outlined: ["outlined", "outlined", booleanAttribute], link: ["link", "link", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], size: "size", style: "style", styleClass: "styleClass", badgeClass: "badgeClass", ariaLabel: "ariaLabel", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-disabled": "disabled || loading" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<button\r\n    [attr.type]=\"type\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"style\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"buttonClass\"\r\n    (click)=\"onClick.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n    (blur)=\"onBlur.emit($event)\"\r\n    caxRipple\r\n    [attr.data-pc-name]=\"'button'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n    [attr.tabindex]=\"tabindex\"\r\n    caxAutoFocus\r\n    [autofocus]=\"autofocus\"\r\n>\r\n    <ng-container *ngIf=\"loading\" class=\"cax-button-content-wrapper\">\r\n        <ng-container class=\"cax-button-loading-container\">\r\n            <SpinnerIcon [styleClass]=\"spinnerIconClass()\" class=\"cax-main-loader cax-button-label\" [spin]=\"true\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'loadingicon'\" />\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading\">\r\n        <!-- Center Icon when there's no label -->\r\n        <ng-container *ngIf=\"!label\">\r\n            <span *ngIf=\"icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\r\n        </ng-container>\r\n\r\n        <!-- Left and Right Icons with Label -->\r\n        <ng-container class=\"cax-button-content-wrapper\" *ngIf=\"label\">\r\n            <!-- Left Icon -->\r\n            <ng-container *ngIf=\"leftIcon\">\r\n                <span class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\r\n            </ng-container>\r\n            <!-- Label -->\r\n            <span class=\"cax-button-label\">{{ label }}</span>\r\n            <!-- Right Icon -->\r\n            <ng-container *ngIf=\"rightIcon\">\r\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <!-- Badge -->\r\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: Ripple, selector: "[caxRipple]" }, { kind: "directive", type: AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{ selector: 'cax-button', standalone: true, imports: [NgIf, NgTemplateOutlet, NgStyle, NgClass, Ripple, AutoFocus, SpinnerIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element',
@@ -394,10 +394,10 @@ class ButtonDirective {
     ngOnDestroy() {
         this.initialized = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: ButtonDirective, isStandalone: true, selector: "[caxButton]", inputs: { iconPos: "iconPos", loadingIcon: "loadingIcon", label: "label", icon: "icon", loading: "loading", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], link: ["link", "link", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: ButtonDirective, isStandalone: true, selector: "[caxButton]", inputs: { iconPos: "iconPos", loadingIcon: "loadingIcon", label: "label", icon: "icon", loading: "loading", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], link: ["link", "link", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxButton]',
@@ -444,11 +444,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ButtonModule, imports: [ButtonDirective, Button], exports: [ButtonDirective, Button, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonModule, imports: [Button, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ButtonModule, imports: [ButtonDirective, Button], exports: [ButtonDirective, Button, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonModule, imports: [Button, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonDirective, Button],

package/fesm2022/cax-design-system-buttongroup.mjs CHANGED Viewed

@@ -3,14 +3,14 @@ import * as i0 from '@angular/core';
 import { ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 class ButtonGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ButtonGroup, isStandalone: false, selector: "p-buttonGroup", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ButtonGroup, isStandalone: false, selector: "p-buttonGroup", ngImport: i0, template: `
         <span class="p-button-group p-component" role="group">
             <ng-content></ng-content>
         </span>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-buttonGroup',
@@ -25,11 +25,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 }]
         }] });
 class ButtonGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroup], imports: [CommonModule], exports: [ButtonGroup] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroupModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroup], imports: [CommonModule], exports: [ButtonGroup] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroupModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/cax-design-system-calendar.mjs CHANGED Viewed

@@ -2983,8 +2983,8 @@ class Calendar {
         }
         this.onInlineCancelled.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Calendar, isStandalone: true, selector: "cax-calendar", inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: ["inline", "inline", booleanAttribute], showOtherMonths: ["showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: ["selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: ["readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: ["monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: ["yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: ["timeOnly", "timeOnly", booleanAttribute], stepYearPicker: ["stepYearPicker", "stepYearPicker", numberAttribute], stepHour: ["stepHour", "stepHour", numberAttribute], stepMinute: ["stepMinute", "stepMinute", numberAttribute], stepSecond: ["stepSecond", "stepSecond", numberAttribute], showSeconds: ["showSeconds", "showSeconds", booleanAttribute], required: ["required", "required", booleanAttribute], showOnFocus: ["showOnFocus", "showOnFocus", booleanAttribute], showWeek: ["showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: ["showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: ["maxDateCount", "maxDateCount", numberAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: ["keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: ["hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: ["touchUI", "touchUI", booleanAttribute], labelText: "labelText", timeSeparator: "timeSeparator", leftIcon: "leftIcon", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onInlineSaved: "onInlineSaved", onInlineCancelled: "onInlineCancelled", onShow: "onShow" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focus", "class.cax-calendar-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-calendar-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<span\r\n    #container\r\n    [ngClass]=\"{\r\n                'cax-calendar': true,\r\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\r\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\r\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\r\n                'cax-calendar-timeonly': timeOnly,\r\n                'cax-calendar-disabled': disabled,\r\n                'cax-focus': focus || overlayVisible\r\n            }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n>\r\n    <ng-template [ngIf]=\"!inline\">\r\n        <input\r\n            #inputfield\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.name]=\"name\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-required]=\"required\"\r\n            aria-autocomplete=\"none\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [value]=\"inputFieldValue\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (keydown)=\"onInputKeydown($event)\"\r\n            (click)=\"onInputClick()\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [readonly]=\"readonlyInput\"\r\n            (input)=\"onUserInput($event)\"\r\n            [ngStyle]=\"inputStyle\"\r\n            [class]=\"inputStyleClass\"\r\n            [placeholder]=\"placeholder || ''\"\r\n            [disabled]=\"disabled\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\r\n            [ngClass]=\"inputClass\"\r\n            autocomplete=\"off\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\r\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\r\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\r\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"iconButtonAriaLabel\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            caxButton\r\n            caxRipple\r\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\r\n            (click)=\"onButtonClick($event, inputfield)\"\r\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"0\"\r\n        >\r\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\r\n            <ng-container *ngIf=\"!icon\">\r\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n            <i class=\"cax cax-calendar-icon\"\r\n                (click)=\"onButtonClick($event)\"\r\n                *ngIf=\"!inputIconTemplate\"\r\n                [ngClass]=\"{\r\n                            'cax-datepicker-icon': showOnFocus\r\n                        }\"\r\n            ></i>\r\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\r\n        </ng-container>\r\n    \r\n    <div\r\n        #contentWrapper\r\n        [attr.id]=\"panelId\"\r\n        [class]=\"panelStyleClass\"\r\n        [ngStyle]=\"panelStyle\"\r\n        [ngClass]=\"{\r\n                    'cax-datepicker cax-component': true,\r\n                    'cax-datepicker-inline': inline,\r\n                    'cax-disabled': disabled,\r\n                    'cax-datepicker-timeonly': timeOnly,\r\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\r\n                    'cax-datepicker-monthpicker': view === 'month',\r\n                    'cax-datepicker-touch-ui': touchUI\r\n                }\"\r\n        [@overlayAnimation]=\"\r\n                    touchUI\r\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                \"\r\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\r\n        [attr.role]=\"inline ? null : 'dialog'\"\r\n        [attr.aria-modal]=\"inline ? null : 'true'\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        *ngIf=\"inline || overlayVisible\"\r\n    >\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        <ng-container *ngIf=\"!timeOnly\">\r\n            <div class=\"cax-datepicker-group-container\">\r\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\r\n                    <div class=\"cax-datepicker-header\">\r\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\r\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\r\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                        <div class=\"cax-datepicker-title\">\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToMonthView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView === 'date'\"\r\n                                class=\"cax-datepicker-month cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\r\n                            >\r\n                                {{ getMonthName(month.month) }}\r\n                            </button>\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToYearView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView !== 'year'\"\r\n                                class=\"cax-datepicker-year cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\r\n                            >\r\n                                {{ getYear(month) }}\r\n                            </button>\r\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\r\n                                Year\r\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\r\n                            </span>\r\n                        </div>\r\n                        <button\r\n                            (keydown)=\"onContainerButtonKeydown($event)\"\r\n                            class=\"cax-datepicker-next cax-link\"\r\n                            (click)=\"onNextButtonClick($event)\"\r\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\r\n                            type=\"button\"\r\n                            [attr.aria-label]=\"nextIconAriaLabel\"\r\n                            caxRipple\r\n                        >\r\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\r\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\r\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\r\n                                        <span>{{ getTranslation('weekHeader') }}</span>\r\n                                    </th>\r\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\r\n                                        <span>{{ weekDay }}</span>\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\r\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\r\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\r\n                                    </td>\r\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\r\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\r\n                                            <span\r\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\r\n                                                (click)=\"onDateSelect($event, date)\"\r\n                                                draggable=\"false\"\r\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\r\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\r\n                                                caxRipple\r\n                                            >\r\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\r\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\r\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"!date.selectable\">\r\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\r\n                                        </ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\r\n                <span\r\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\r\n                    (click)=\"onMonthSelect($event, i)\"\r\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\r\n                    class=\"cax-monthpicker-month\"\r\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ m }}\r\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\r\n                </span>\r\n            </div>\r\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\r\n                <span\r\n                    *ngFor=\"let y of yearPickerValues()\"\r\n                    (click)=\"onYearSelect($event, y)\"\r\n                    (keydown)=\"onYearCellKeydown($event, y)\"\r\n                    class=\"cax-yearpicker-year\"\r\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ y }}\r\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\r\n            <div class=\"cax-hour-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementHour($event)\"\r\n                    (keydown.space)=\"incrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementHour($event)\"\r\n                    (keydown.space)=\"decrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-minute-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementMinute($event)\"\r\n                    (keydown.space)=\"incrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementMinute($event)\"\r\n                    (keydown.space)=\"decrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementSecond($event)\"\r\n                    (keydown.space)=\"incrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementSecond($event)\"\r\n                    (keydown.space)=\"decrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\r\n            <cax-button\r\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\r\n                type=\"button\"\r\n                [link]=\"true\"\r\n                [label]=\"getTranslation('clear')\"\r\n                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                (onClick)=\"onClearButtonClick($event)\"\r\n                caxRipple\r\n            ></cax-button>\r\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\r\n        </div>\r\n         <!-- For the inline  -->\r\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\r\n                        <cax-button\r\n                        [label]=\"'Cancel'\"\r\n                        [severity]=\"'secondary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineCancel()\">\r\n                        </cax-button>\r\n            <div class=\"left-side\">\r\n            <div class=\"cax-datepicker-inline-input\">\r\n                <i class=\"cax cax-calendar-minimalistic\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [value]=\"formattedInlineDate\"\r\n                    readonly\r\n                    class=\"cax-datepicker-inline-display\"\r\n                />\r\n            </div>\r\n            <div class=\"cax-datepicker-inline-buttons\">\r\n                <cax-button\r\n                        [label]=\"'Save'\"\r\n                        [severity]=\"'Primary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineSave()\">\r\n                </cax-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n        <ng-content select=\"cax-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-calendar{position:relative;display:inline-flex;width:100%}.cax-calendar-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;height:40px;padding-left:1.8rem!important;padding-right:1.8rem!important}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-fluid .cax-calendar{display:flex}.cax-fluid .cax-calendar .cax-inputtext{width:1%}.cax-calendar .cax-datepicker{min-width:100%}.cax-datepicker{width:auto;position:absolute;top:0;left:0}.cax-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between}.cax-datepicker-header .cax-datepicker-title{margin:0 auto}.cax-datepicker-prev,.cax-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.cax-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-datepicker-icon{pointer-events:none}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;left:1.67px;margin-top:1px!important}.cax-input-icon-left{order:-1}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;margin-top:13px;padding:10px}.cax-datepicker-inline-actions .cax-datepicker-inline-input{margin-bottom:10px;position:relative;display:inline-block}.cax-datepicker-inline-actions .cax-datepicker-inline-input input{width:130px;height:32px;padding-left:2rem;border-radius:8px;font-size:14px;font-weight:500}.cax-datepicker-inline-actions .cax-datepicker-inline-input .cax-calendar-minimalistic{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}.left-side{display:flex;justify-content:space-between;gap:15px}}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i3.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Calendar, isStandalone: true, selector: "cax-calendar", inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: ["inline", "inline", booleanAttribute], showOtherMonths: ["showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: ["selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: ["readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: ["monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: ["yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: ["timeOnly", "timeOnly", booleanAttribute], stepYearPicker: ["stepYearPicker", "stepYearPicker", numberAttribute], stepHour: ["stepHour", "stepHour", numberAttribute], stepMinute: ["stepMinute", "stepMinute", numberAttribute], stepSecond: ["stepSecond", "stepSecond", numberAttribute], showSeconds: ["showSeconds", "showSeconds", booleanAttribute], required: ["required", "required", booleanAttribute], showOnFocus: ["showOnFocus", "showOnFocus", booleanAttribute], showWeek: ["showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: ["showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: ["maxDateCount", "maxDateCount", numberAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: ["keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: ["hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: ["touchUI", "touchUI", booleanAttribute], labelText: "labelText", timeSeparator: "timeSeparator", leftIcon: "leftIcon", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onInlineSaved: "onInlineSaved", onInlineCancelled: "onInlineCancelled", onShow: "onShow" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focus", "class.cax-calendar-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-calendar-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<span\r\n    #container\r\n    [ngClass]=\"{\r\n                'cax-calendar': true,\r\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\r\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\r\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\r\n                'cax-calendar-timeonly': timeOnly,\r\n                'cax-calendar-disabled': disabled,\r\n                'cax-focus': focus || overlayVisible\r\n            }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n>\r\n    <ng-template [ngIf]=\"!inline\">\r\n        <input\r\n            #inputfield\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.name]=\"name\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-required]=\"required\"\r\n            aria-autocomplete=\"none\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [value]=\"inputFieldValue\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (keydown)=\"onInputKeydown($event)\"\r\n            (click)=\"onInputClick()\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [readonly]=\"readonlyInput\"\r\n            (input)=\"onUserInput($event)\"\r\n            [ngStyle]=\"inputStyle\"\r\n            [class]=\"inputStyleClass\"\r\n            [placeholder]=\"placeholder || ''\"\r\n            [disabled]=\"disabled\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\r\n            [ngClass]=\"inputClass\"\r\n            autocomplete=\"off\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\r\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\r\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\r\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"iconButtonAriaLabel\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            caxButton\r\n            caxRipple\r\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\r\n            (click)=\"onButtonClick($event, inputfield)\"\r\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"0\"\r\n        >\r\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\r\n            <ng-container *ngIf=\"!icon\">\r\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n            <i class=\"cax cax-calendar-icon\"\r\n                (click)=\"onButtonClick($event)\"\r\n                *ngIf=\"!inputIconTemplate\"\r\n                [ngClass]=\"{\r\n                            'cax-datepicker-icon': showOnFocus\r\n                        }\"\r\n            ></i>\r\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\r\n        </ng-container>\r\n    \r\n    <div\r\n        #contentWrapper\r\n        [attr.id]=\"panelId\"\r\n        [class]=\"panelStyleClass\"\r\n        [ngStyle]=\"panelStyle\"\r\n        [ngClass]=\"{\r\n                    'cax-datepicker cax-component': true,\r\n                    'cax-datepicker-inline': inline,\r\n                    'cax-disabled': disabled,\r\n                    'cax-datepicker-timeonly': timeOnly,\r\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\r\n                    'cax-datepicker-monthpicker': view === 'month',\r\n                    'cax-datepicker-touch-ui': touchUI\r\n                }\"\r\n        [@overlayAnimation]=\"\r\n                    touchUI\r\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                \"\r\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\r\n        [attr.role]=\"inline ? null : 'dialog'\"\r\n        [attr.aria-modal]=\"inline ? null : 'true'\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        *ngIf=\"inline || overlayVisible\"\r\n    >\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        <ng-container *ngIf=\"!timeOnly\">\r\n            <div class=\"cax-datepicker-group-container\">\r\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\r\n                    <div class=\"cax-datepicker-header\">\r\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\r\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\r\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                        <div class=\"cax-datepicker-title\">\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToMonthView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView === 'date'\"\r\n                                class=\"cax-datepicker-month cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\r\n                            >\r\n                                {{ getMonthName(month.month) }}\r\n                            </button>\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToYearView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView !== 'year'\"\r\n                                class=\"cax-datepicker-year cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\r\n                            >\r\n                                {{ getYear(month) }}\r\n                            </button>\r\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\r\n                                Year\r\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\r\n                            </span>\r\n                        </div>\r\n                        <button\r\n                            (keydown)=\"onContainerButtonKeydown($event)\"\r\n                            class=\"cax-datepicker-next cax-link\"\r\n                            (click)=\"onNextButtonClick($event)\"\r\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\r\n                            type=\"button\"\r\n                            [attr.aria-label]=\"nextIconAriaLabel\"\r\n                            caxRipple\r\n                        >\r\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\r\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\r\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\r\n                                        <span>{{ getTranslation('weekHeader') }}</span>\r\n                                    </th>\r\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\r\n                                        <span>{{ weekDay }}</span>\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\r\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\r\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\r\n                                    </td>\r\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\r\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\r\n                                            <span\r\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\r\n                                                (click)=\"onDateSelect($event, date)\"\r\n                                                draggable=\"false\"\r\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\r\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\r\n                                                caxRipple\r\n                                            >\r\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\r\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\r\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"!date.selectable\">\r\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\r\n                                        </ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\r\n                <span\r\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\r\n                    (click)=\"onMonthSelect($event, i)\"\r\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\r\n                    class=\"cax-monthpicker-month\"\r\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ m }}\r\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\r\n                </span>\r\n            </div>\r\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\r\n                <span\r\n                    *ngFor=\"let y of yearPickerValues()\"\r\n                    (click)=\"onYearSelect($event, y)\"\r\n                    (keydown)=\"onYearCellKeydown($event, y)\"\r\n                    class=\"cax-yearpicker-year\"\r\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ y }}\r\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\r\n            <div class=\"cax-hour-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementHour($event)\"\r\n                    (keydown.space)=\"incrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementHour($event)\"\r\n                    (keydown.space)=\"decrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-minute-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementMinute($event)\"\r\n                    (keydown.space)=\"incrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementMinute($event)\"\r\n                    (keydown.space)=\"decrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementSecond($event)\"\r\n                    (keydown.space)=\"incrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementSecond($event)\"\r\n                    (keydown.space)=\"decrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\r\n            <cax-button\r\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\r\n                type=\"button\"\r\n                [link]=\"true\"\r\n                [label]=\"getTranslation('clear')\"\r\n                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                (onClick)=\"onClearButtonClick($event)\"\r\n                caxRipple\r\n            ></cax-button>\r\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\r\n        </div>\r\n         <!-- For the inline  -->\r\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\r\n                        <cax-button\r\n                        [label]=\"'Cancel'\"\r\n                        [severity]=\"'secondary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineCancel()\">\r\n                        </cax-button>\r\n            <div class=\"left-side\">\r\n            <div class=\"cax-datepicker-inline-input\">\r\n                <i class=\"cax cax-calendar-minimalistic\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [value]=\"formattedInlineDate\"\r\n                    readonly\r\n                    class=\"cax-datepicker-inline-display\"\r\n                />\r\n            </div>\r\n            <div class=\"cax-datepicker-inline-buttons\">\r\n                <cax-button\r\n                        [label]=\"'Save'\"\r\n                        [severity]=\"'Primary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineSave()\">\r\n                </cax-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n        <ng-content select=\"cax-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-calendar{position:relative;display:inline-flex;width:100%}.cax-calendar-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;height:40px;padding-left:1.8rem!important;padding-right:1.8rem!important}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-fluid .cax-calendar{display:flex}.cax-fluid .cax-calendar .cax-inputtext{width:1%}.cax-calendar .cax-datepicker{min-width:100%}.cax-datepicker{width:auto;position:absolute;top:0;left:0}.cax-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between}.cax-datepicker-header .cax-datepicker-title{margin:0 auto}.cax-datepicker-prev,.cax-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.cax-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-datepicker-icon{pointer-events:none}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;left:1.67px;margin-top:1px!important}.cax-input-icon-left{order:-1}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;margin-top:13px;padding:10px}.cax-datepicker-inline-actions .cax-datepicker-inline-input{margin-bottom:10px;position:relative;display:inline-block}.cax-datepicker-inline-actions .cax-datepicker-inline-input input{width:130px;height:32px;padding-left:2rem;border-radius:8px;font-size:14px;font-weight:500}.cax-datepicker-inline-actions .cax-datepicker-inline-input .cax-calendar-minimalistic{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}.left-side{display:flex;justify-content:space-between;gap:15px}}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i3.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], animations: [
             trigger('overlayAnimation', [
                 state('visibleTouchUI', style({
                     transform: 'translate(-50%,-50%)',
@@ -3002,7 +3002,7 @@ class Calendar {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'cax-calendar', animations: [
                         trigger('overlayAnimation', [
@@ -3242,11 +3242,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 class CalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule], exports: [Calendar, ButtonModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule], exports: [Calendar, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Calendar, ButtonModule, SharedModule],