cax-design-system 2.8.5 → 3.0.1

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

@@ -7,10 +7,9 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from 'cax-design-system/tooltip';
 import { TooltipModule } from 'cax-design-system/tooltip';
-import * as i4 from 'cax-design-system/icons/chevronright';
-import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
-import * as i5 from 'cax-design-system/icons/home';
+import * as i4 from 'cax-design-system/icons/home';
 import { HomeIcon } from 'cax-design-system/icons/home';
+import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
 
 /**
  * Breadcrumb provides contextual information about page hierarchy.
@@ -99,14 +98,14 @@ 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.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Breadcrumb, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", 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'\">\n    <ol [attr.data-pc-section]=\"'menu'\" class=\"cax-breadcrumb-list\">\n        <li\n            [class]=\"home.styleClass\"\n            [attr.id]=\"home.id\"\n            [ngClass]=\"{ 'cax-breadcrumb-home': true, 'cax-disabled': home.disabled }\"\n            [ngStyle]=\"home.style\"\n            *ngIf=\"home\"\n            caxTooltip\n            [tooltipOptions]=\"home.tooltipOptions\"\n            [attr.data-pc-section]=\"'home'\"\n            [attr.aria-disabled]=\"home.disabled\"\n        >\n            <a\n                [href]=\"home.url ? home.url : null\"\n                *ngIf=\"!home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iprivateyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n            <a\n                *ngIf=\"home.routerLink\"\n                [routerLink]=\"home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                [queryParams]=\"home.queryParams\"\n                [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                [routerLinkActiveOptions]=\"home.routerLinkActiveOptions || { exact: false }\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n                [fragment]=\"home.fragment\"\n                [queryParamsHandling]=\"home.queryParamsHandling\"\n                [preserveFragment]=\"home.preserveFragment\"\n                [skipLocationChange]=\"home.skipLocationChange\"\n                [replaceUrl]=\"home.replaceUrl\"\n                [state]=\"home.state\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iconStyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n        </li>\n        <li *ngIf=\"model && home\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n            <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n            <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n            <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n        </li>\n        <ng-template ngFor let-item let-end=\"last\" [ngForOf]=\"model\">\n            <li\n                [class]=\"item.styleClass\"\n                [attr.id]=\"item.id\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [ngStyle]=\"item.style\"\n                [ngClass]=\"{ 'cax-disabled': item.disabled }\"\n                caxTooltip\n                [tooltipOptions]=\"item.tooltipOptions\"\n                [attr.data-pc-section]=\"'menuitem'\"\n            >\n                <a\n                    *ngIf=\"!item.routerLink\"\n                    [attr.href]=\"item.url ? item.url : null\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n                <a\n                    *ngIf=\"item.routerLink\"\n                    [routerLink]=\"item.routerLink\"\n                    [queryParams]=\"item.queryParams\"\n                    [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                    [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [fragment]=\"item.fragment\"\n                    [queryParamsHandling]=\"item.queryParamsHandling\"\n                    [preserveFragment]=\"item.preserveFragment\"\n                    [skipLocationChange]=\"item.skipLocationChange\"\n                    [replaceUrl]=\"item.replaceUrl\"\n                    [state]=\"item.state\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n            </li>\n            <li *ngIf=\"!end\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n                <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n                <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n                <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n            </li>\n        </ng-template>\n    </ol>\n</nav>\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;gap:var(--space-100)}.cax-breadcrumb .cax-menuitem-text{font-size:16px;line-height:24px;font-weight:500}.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.HomeIcon, selector: "HomeIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Breadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Breadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'cax-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
-                    }, 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"] }]
+                    }, template: "<nav [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'cax-breadcrumb cax-component'\" [attr.data-pc-name]=\"'breadcrumb'\" [attr.data-pc-section]=\"'root'\">\n    <ol [attr.data-pc-section]=\"'menu'\" class=\"cax-breadcrumb-list\">\n        <li\n            [class]=\"home.styleClass\"\n            [attr.id]=\"home.id\"\n            [ngClass]=\"{ 'cax-breadcrumb-home': true, 'cax-disabled': home.disabled }\"\n            [ngStyle]=\"home.style\"\n            *ngIf=\"home\"\n            caxTooltip\n            [tooltipOptions]=\"home.tooltipOptions\"\n            [attr.data-pc-section]=\"'home'\"\n            [attr.aria-disabled]=\"home.disabled\"\n        >\n            <a\n                [href]=\"home.url ? home.url : null\"\n                *ngIf=\"!home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iprivateyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n            <a\n                *ngIf=\"home.routerLink\"\n                [routerLink]=\"home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                [queryParams]=\"home.queryParams\"\n                [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                [routerLinkActiveOptions]=\"home.routerLinkActiveOptions || { exact: false }\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n                [fragment]=\"home.fragment\"\n                [queryParamsHandling]=\"home.queryParamsHandling\"\n                [preserveFragment]=\"home.preserveFragment\"\n                [skipLocationChange]=\"home.skipLocationChange\"\n                [replaceUrl]=\"home.replaceUrl\"\n                [state]=\"home.state\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iconStyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n        </li>\n        <li *ngIf=\"model && home\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n            <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n            <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n            <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n        </li>\n        <ng-template ngFor let-item let-end=\"last\" [ngForOf]=\"model\">\n            <li\n                [class]=\"item.styleClass\"\n                [attr.id]=\"item.id\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [ngStyle]=\"item.style\"\n                [ngClass]=\"{ 'cax-disabled': item.disabled }\"\n                caxTooltip\n                [tooltipOptions]=\"item.tooltipOptions\"\n                [attr.data-pc-section]=\"'menuitem'\"\n            >\n                <a\n                    *ngIf=\"!item.routerLink\"\n                    [attr.href]=\"item.url ? item.url : null\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n                <a\n                    *ngIf=\"item.routerLink\"\n                    [routerLink]=\"item.routerLink\"\n                    [queryParams]=\"item.queryParams\"\n                    [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                    [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [fragment]=\"item.fragment\"\n                    [queryParamsHandling]=\"item.queryParamsHandling\"\n                    [preserveFragment]=\"item.preserveFragment\"\n                    [skipLocationChange]=\"item.skipLocationChange\"\n                    [replaceUrl]=\"item.replaceUrl\"\n                    [state]=\"item.state\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n            </li>\n            <li *ngIf=\"!end\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n                <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n                <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n                <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n            </li>\n        </ng-template>\n    </ol>\n</nav>\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;gap:var(--space-100)}.cax-breadcrumb .cax-menuitem-text{font-size:16px;line-height:24px;font-weight:500}.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"] }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { model: [{
                 type: Input
             }], style: [{
@@ -125,11 +124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 class BreadcrumbModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", 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: "20.3.25", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule],

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-breadcrumb.mjs","sources":["../../src/app/components/breadcrumb/breadcrumb.ts","../../src/app/components/breadcrumb/breadcrumb.html","../../src/app/components/breadcrumb/breadcrumb.module.ts","../../src/app/components/breadcrumb/cax-design-system-breadcrumb.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { MenuItem, CaxTemplate } from 'cax-design-system/api';\nimport { BreadcrumbItemClickEvent } from './breadcrumb.interface';\n/**\n * Breadcrumb provides contextual information about page hierarchy.\n * @group Components\n */\n@Component({\n    selector: 'cax-breadcrumb',\n    templateUrl: `./breadcrumb.html`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./breadcrumb.scss'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Breadcrumb implements AfterContentInit {\n    /**\n     * An array of menuitems.\n     * @group Props\n     */\n    @Input() model: MenuItem[] | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * MenuItem configuration for the home icon.\n     * @group Props\n     */\n    @Input() home: MenuItem | undefined;\n    /**\n     * Defines a string that labels the home icon for accessibility.\n     * @group Props\n     */\n    @Input() homeAriaLabel: string | undefined;\n    /**\n     * Fired when an item is selected.\n     * @param {BreadcrumbItemClickEvent} event - custom click event.\n     * @group Emits\n     */\n    @Output() onItemClick: EventEmitter<BreadcrumbItemClickEvent> = new EventEmitter<BreadcrumbItemClickEvent>();\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    separatorTemplate: TemplateRef<any> | undefined;\n\n    itemTemplate: TemplateRef<any> | undefined;\n\n    constructor(private router: Router) {}\n\n    onClick(event: MouseEvent, item: MenuItem) {\n        if (item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!item.url && !item.routerLink) {\n            event.preventDefault();\n        }\n\n        if (item.command) {\n            item.command({\n                originalEvent: event,\n                item: item\n            });\n        }\n\n        this.onItemClick.emit({\n            originalEvent: event,\n            item: item\n        });\n    }\n\n    onHomeClick(event: MouseEvent | any) {\n        if (this.home) {\n            this.onClick(event, this.home);\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'separator':\n                    this.separatorTemplate = item.template;\n                    break;\n\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    isCurrentUrl(item) {\n        const { routerLink } = item;\n        const lastPath = this.router ? this.router.url : '';\n\n        return routerLink === lastPath ? 'page' : undefined;\n    }\n}\n","<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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SharedModule } from 'cax-design-system/api';\nimport { ChevronRightIcon } from 'cax-design-system/icons/chevronright';\nimport { HomeIcon } from 'cax-design-system/icons/home';\nimport { TooltipModule } from 'cax-design-system/tooltip';\nimport { Breadcrumb } from './breadcrumb';\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule],\n    exports: [Breadcrumb, RouterModule, TooltipModule, SharedModule],\n    declarations: [Breadcrumb]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAIA;;;AAGG;MAYU,UAAU,CAAA;AAuCC,IAAA,MAAA;AAtCpB;;;AAGG;AACM,IAAA,KAAK;AACd;;;AAGG;AACM,IAAA,KAAK;AACd;;;AAGG;AACM,IAAA,UAAU;AACnB;;;AAGG;AACM,IAAA,IAAI;AACb;;;AAGG;AACM,IAAA,aAAa;AACtB;;;;AAIG;AACO,IAAA,WAAW,GAA2C,IAAI,YAAY,EAA4B;AAE9E,IAAA,SAAS;AAEvC,IAAA,iBAAiB;AAEjB,IAAA,YAAY;AAEZ,IAAA,WAAA,CAAoB,MAAc,EAAA;QAAd,IAAM,CAAA,MAAA,GAAN,MAAM;;IAE1B,OAAO,CAAC,KAAiB,EAAE,IAAc,EAAA;AACrC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,cAAc,EAAE;YACtB;;QAGJ,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE;;AAG1B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC;AACT,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,IAAI,EAAE;AACT,aAAA,CAAC;;AAGN,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AAClB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,IAAI,EAAE;AACT,SAAA,CAAC;;AAGN,IAAA,WAAW,CAAC,KAAuB,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;;;IAItC,kBAAkB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,KAAI;AAC7B,YAAA,QAAQ,IAAI,CAAC,OAAO,EAAE;AAClB,gBAAA,KAAK,WAAW;AACZ,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ;oBACtC;AAEJ,gBAAA,KAAK,MAAM;AACP,oBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;oBACjC;AAEJ,gBAAA;AACI,oBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;oBACjC;;AAEZ,SAAC,CAAC;;AAGN,IAAA,YAAY,CAAC,IAAI,EAAA;AACb,QAAA,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI;AAC3B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE;QAEnD,OAAO,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS;;wGA5F9C,UAAU,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAV,UAAU,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAiCF,WAAW,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpDhC,26PAqIA,EAAA,MAAA,EAAA,CAAA,+aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDlHa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;+BACI,gBAAgB,EAAA,eAAA,EAET,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAEzB,UAAA,EAAA,KAAK,EACX,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,26PAAA,EAAA,MAAA,EAAA,CAAA,+aAAA,CAAA,EAAA;2EAOQ,KAAK,EAAA,CAAA;sBAAb;gBAKQ,KAAK,EAAA,CAAA;sBAAb;gBAKQ,UAAU,EAAA,CAAA;sBAAlB;gBAKQ,IAAI,EAAA,CAAA;sBAAZ;gBAKQ,aAAa,EAAA,CAAA;sBAArB;gBAMS,WAAW,EAAA,CAAA;sBAApB;gBAE6B,SAAS,EAAA,CAAA;sBAAtC,eAAe;uBAAC,WAAW;;;MEtCnB,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAhB,gBAAgB,EAAA,YAAA,EAAA,CAFV,UAAU,CAFf,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CACnF,EAAA,OAAA,EAAA,CAAA,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAA,EAAA,CAAA;AAGtD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAJf,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EACvE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAA,EAAA,CAAA;;4FAGtD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAC;oBAC9F,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;oBAChE,YAAY,EAAE,CAAC,UAAU;AAC5B,iBAAA;;;ACbD;;AAEG;;;;"}
+{"version":3,"file":"cax-design-system-breadcrumb.mjs","sources":["../../src/app/components/breadcrumb/breadcrumb.ts","../../src/app/components/breadcrumb/breadcrumb.html","../../src/app/components/breadcrumb/breadcrumb.module.ts","../../src/app/components/breadcrumb/cax-design-system-breadcrumb.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { MenuItem, CaxTemplate } from 'cax-design-system/api';\nimport { BreadcrumbItemClickEvent } from './breadcrumb.interface';\n/**\n * Breadcrumb provides contextual information about page hierarchy.\n * @group Components\n */\n@Component({\n    selector: 'cax-breadcrumb',\n    templateUrl: `./breadcrumb.html`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./breadcrumb.scss'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Breadcrumb implements AfterContentInit {\n    /**\n     * An array of menuitems.\n     * @group Props\n     */\n    @Input() model: MenuItem[] | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * MenuItem configuration for the home icon.\n     * @group Props\n     */\n    @Input() home: MenuItem | undefined;\n    /**\n     * Defines a string that labels the home icon for accessibility.\n     * @group Props\n     */\n    @Input() homeAriaLabel: string | undefined;\n    /**\n     * Fired when an item is selected.\n     * @param {BreadcrumbItemClickEvent} event - custom click event.\n     * @group Emits\n     */\n    @Output() onItemClick: EventEmitter<BreadcrumbItemClickEvent> = new EventEmitter<BreadcrumbItemClickEvent>();\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    separatorTemplate: TemplateRef<any> | undefined;\n\n    itemTemplate: TemplateRef<any> | undefined;\n\n    constructor(private router: Router) {}\n\n    onClick(event: MouseEvent, item: MenuItem) {\n        if (item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!item.url && !item.routerLink) {\n            event.preventDefault();\n        }\n\n        if (item.command) {\n            item.command({\n                originalEvent: event,\n                item: item\n            });\n        }\n\n        this.onItemClick.emit({\n            originalEvent: event,\n            item: item\n        });\n    }\n\n    onHomeClick(event: MouseEvent | any) {\n        if (this.home) {\n            this.onClick(event, this.home);\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'separator':\n                    this.separatorTemplate = item.template;\n                    break;\n\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    isCurrentUrl(item) {\n        const { routerLink } = item;\n        const lastPath = this.router ? this.router.url : '';\n\n        return routerLink === lastPath ? 'page' : undefined;\n    }\n}\n","<nav [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'cax-breadcrumb cax-component'\" [attr.data-pc-name]=\"'breadcrumb'\" [attr.data-pc-section]=\"'root'\">\n    <ol [attr.data-pc-section]=\"'menu'\" class=\"cax-breadcrumb-list\">\n        <li\n            [class]=\"home.styleClass\"\n            [attr.id]=\"home.id\"\n            [ngClass]=\"{ 'cax-breadcrumb-home': true, 'cax-disabled': home.disabled }\"\n            [ngStyle]=\"home.style\"\n            *ngIf=\"home\"\n            caxTooltip\n            [tooltipOptions]=\"home.tooltipOptions\"\n            [attr.data-pc-section]=\"'home'\"\n            [attr.aria-disabled]=\"home.disabled\"\n        >\n            <a\n                [href]=\"home.url ? home.url : null\"\n                *ngIf=\"!home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iprivateyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n            <a\n                *ngIf=\"home.routerLink\"\n                [routerLink]=\"home.routerLink\"\n                [attr.aria-label]=\"homeAriaLabel\"\n                [queryParams]=\"home.queryParams\"\n                [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                [routerLinkActiveOptions]=\"home.routerLinkActiveOptions || { exact: false }\"\n                class=\"cax-menuitem-link\"\n                (click)=\"onClick($event, home)\"\n                [target]=\"home.target\"\n                [attr.title]=\"home.title\"\n                [attr.tabindex]=\"home.disabled ? '-1' : home.tabindex || '0'\"\n                [attr.ariaCurrentWhenActive]=\"isCurrentUrl(home)\"\n                [fragment]=\"home.fragment\"\n                [queryParamsHandling]=\"home.queryParamsHandling\"\n                [preserveFragment]=\"home.preserveFragment\"\n                [skipLocationChange]=\"home.skipLocationChange\"\n                [replaceUrl]=\"home.replaceUrl\"\n                [state]=\"home.state\"\n            >\n                <span *ngIf=\"home.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"home.icon\" [ngStyle]=\"home.iconStyle\"></span>\n                <HomeIcon *ngIf=\"!home.icon\" [styleClass]=\"'cax-menuitem-icon'\" />\n                <ng-container *ngIf=\"home.label\">\n                    <span *ngIf=\"home.escape !== false; else htmlHomeRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ home.label }}</span>\n                    <ng-template #htmlHomeRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"home.label\"></span></ng-template>\n                </ng-container>\n            </a>\n        </li>\n        <li *ngIf=\"model && home\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n            <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n            <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n            <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n        </li>\n        <ng-template ngFor let-item let-end=\"last\" [ngForOf]=\"model\">\n            <li\n                [class]=\"item.styleClass\"\n                [attr.id]=\"item.id\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [ngStyle]=\"item.style\"\n                [ngClass]=\"{ 'cax-disabled': item.disabled }\"\n                caxTooltip\n                [tooltipOptions]=\"item.tooltipOptions\"\n                [attr.data-pc-section]=\"'menuitem'\"\n            >\n                <a\n                    *ngIf=\"!item.routerLink\"\n                    [attr.href]=\"item.url ? item.url : null\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n                <a\n                    *ngIf=\"item.routerLink\"\n                    [routerLink]=\"item.routerLink\"\n                    [queryParams]=\"item.queryParams\"\n                    [routerLinkActive]=\"'cax-menuitem-link-active'\"\n                    [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                    class=\"cax-menuitem-link\"\n                    (click)=\"onClick($event, item)\"\n                    [target]=\"item.target\"\n                    [attr.title]=\"item.title\"\n                    [attr.tabindex]=\"item.disabled ? '-1' : item.tabindex || '0'\"\n                    [fragment]=\"item.fragment\"\n                    [queryParamsHandling]=\"item.queryParamsHandling\"\n                    [preserveFragment]=\"item.preserveFragment\"\n                    [skipLocationChange]=\"item.skipLocationChange\"\n                    [replaceUrl]=\"item.replaceUrl\"\n                    [state]=\"item.state\"\n                    [attr.ariaCurrentWhenActive]=\"isCurrentUrl(item)\"\n                >\n                    <ng-container *ngIf=\"!itemTemplate\">\n                        <span *ngIf=\"item.icon\" class=\"cax-menuitem-icon\" [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></span>\n                        <ng-container *ngIf=\"item.label\">\n                            <span *ngIf=\"item.escape !== false; else htmlRouteLabel\" class=\"cax-menuitem-text cax-text-action-md-medium\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"cax-menuitem-text cax-text-action-md-medium\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"itemTemplate\">\n                        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n                    </ng-container>\n                </a>\n            </li>\n            <li *ngIf=\"!end\" class=\"cax-menuitem-separator\" [attr.data-pc-section]=\"'separator'\">\n                <!-- <ChevronRightIcon *ngIf=\"!separatorTemplate\" /> -->\n                <i class=\"cax cax-alt-arrow-right\" *ngIf=\"!separatorTemplate\"></i>\n                <ng-template *ngTemplateOutlet=\"separatorTemplate\"></ng-template>\n            </li>\n        </ng-template>\n    </ol>\n</nav>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SharedModule } from 'cax-design-system/api';\nimport { ChevronRightIcon } from 'cax-design-system/icons/chevronright';\nimport { HomeIcon } from 'cax-design-system/icons/home';\nimport { TooltipModule } from 'cax-design-system/tooltip';\nimport { Breadcrumb } from './breadcrumb';\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule],\n    exports: [Breadcrumb, RouterModule, TooltipModule, SharedModule],\n    declarations: [Breadcrumb]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA;;;AAGG;MAYU,UAAU,CAAA;AAuCC,IAAA,MAAA;AAtCpB;;;AAGG;AACM,IAAA,KAAK;AACd;;;AAGG;AACM,IAAA,KAAK;AACd;;;AAGG;AACM,IAAA,UAAU;AACnB;;;AAGG;AACM,IAAA,IAAI;AACb;;;AAGG;AACM,IAAA,aAAa;AACtB;;;;AAIG;AACO,IAAA,WAAW,GAA2C,IAAI,YAAY,EAA4B;AAE9E,IAAA,SAAS;AAEvC,IAAA,iBAAiB;AAEjB,IAAA,YAAY;AAEZ,IAAA,WAAA,CAAoB,MAAc,EAAA;QAAd,IAAA,CAAA,MAAM,GAAN,MAAM;IAAW;IAErC,OAAO,CAAC,KAAiB,EAAE,IAAc,EAAA;AACrC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,cAAc,EAAE;YACtB;QACJ;QAEA,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE;QAC1B;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC;AACT,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,IAAI,EAAE;AACT,aAAA,CAAC;QACN;AAEA,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AAClB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,IAAI,EAAE;AACT,SAAA,CAAC;IACN;AAEA,IAAA,WAAW,CAAC,KAAuB,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;QAClC;IACJ;IAEA,kBAAkB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,KAAI;AAC7B,YAAA,QAAQ,IAAI,CAAC,OAAO,EAAE;AAClB,gBAAA,KAAK,WAAW;AACZ,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ;oBACtC;AAEJ,gBAAA,KAAK,MAAM;AACP,oBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;oBACjC;AAEJ,gBAAA;AACI,oBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;oBACjC;;AAEZ,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,YAAY,CAAC,IAAI,EAAA;AACb,QAAA,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI;AAC3B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE;QAEnD,OAAO,UAAU,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS;IACvD;wGA7FS,UAAU,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAV,UAAU,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAiCF,WAAW,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpDhC,+iQAuIA,EAAA,MAAA,EAAA,CAAA,seAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDpHa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;+BACI,gBAAgB,EAAA,eAAA,EAET,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,UAAA,EAEzB,KAAK,EAAA,IAAA,EACX;AACF,wBAAA,KAAK,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,+iQAAA,EAAA,MAAA,EAAA,CAAA,seAAA,CAAA,EAAA;;sBAOA;;sBAKA;;sBAKA;;sBAKA;;sBAKA;;sBAMA;;sBAEA,eAAe;uBAAC,WAAW;;;MEtCnB,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAhB,gBAAgB,EAAA,YAAA,EAAA,CAFV,UAAU,CAAA,EAAA,OAAA,EAAA,CAFf,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAA,EAAA,OAAA,EAAA,CACnF,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAA,EAAA,CAAA;AAGtD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAJf,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EACvE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAA,EAAA,CAAA;;4FAGtD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAC;oBAC9F,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;oBAChE,YAAY,EAAE,CAAC,UAAU;AAC5B,iBAAA;;;ACbD;;AAEG;;;;"}

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

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, booleanAttribute, numberAttribute, ContentChildren, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Inject, Directive, NgModule } from '@angular/core';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
-import { NgIf, NgStyle, NgClass, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { NgIf, NgStyle, NgClass, DOCUMENT } from '@angular/common';
 import { Ripple } from 'cax-design-system/ripple';
 import { AutoFocus } from 'cax-design-system/autofocus';
-import { SpinnerIcon } from 'cax-design-system/icons/spinner';
+import * as i1 from 'cax-design-system/progressspinner';
+import { ProgressSpinnerModule } from 'cax-design-system/progressspinner';
 import { DomHandler } from 'cax-design-system/dom';
 import { ObjectUtils } from 'cax-design-system/utils';
 
 class Button {
     el;
     type = 'button';
-    iconPos = 'left';
+    iconPos;
     icon;
     badge;
     rightIcon;
@@ -28,7 +29,7 @@ class Button {
     outlined = false;
     link = false;
     tabindex;
-    size = 'medium';
+    size = 'md';
     style;
     styleClass;
     badgeClass;
@@ -45,9 +46,18 @@ class Button {
         this.el = el;
     }
     spinnerIconClass() {
-        return Object.entries(this.iconClass())
+        return Object.entries(this.loadingIconClass)
             .filter(([, value]) => !!value)
-            .reduce((acc, [key]) => acc + ` ${key}`, 'cax-button-loading-icon');
+            .reduce((acc, [key]) => acc + ` ${key}`, '');
+    }
+    get loadingIconClass() {
+        return {
+            'cax-button-icon': true,
+            'cax-button-icon-left': !!this.label,
+            'cax-button-icon-center': !this.label,
+            'cax-button-loading-icon': true,
+            [`${this.loadingIcon}`]: !!this.loadingIcon
+        };
     }
     iconClass() {
         const iconClasses = {
@@ -57,10 +67,7 @@ class Button {
             'cax-button-icon-top': this.iconPos === 'top' && this.label,
             'cax-button-icon-bottom': this.iconPos === 'bottom' && this.label
         };
-        if (this.loading) {
-            iconClasses[`cax-button-loading-icon cax-spin ${this.loadingIcon ?? ''}`] = true;
-        }
-        else if (this.icon) {
+        if (this.icon) {
             iconClasses[this.icon] = true;
         }
         return iconClasses;
@@ -78,9 +85,9 @@ class Button {
             'cax-button-rounded': this.rounded,
             'cax-button-text': this.text,
             'cax-button-outlined': this.outlined,
-            'cax-button-sm': this.size === 'small',
-            'cax-button-md': this.size === 'medium',
-            'cax-button-lg': this.size === 'large',
+            'cax-button-sm': this.size === 'sm',
+            'cax-button-md': this.size === 'md',
+            'cax-button-lg': this.size === 'lg',
             'cax-button-plain': this.plain,
             [`${this.styleClass}`]: this.styleClass
         };
@@ -112,15 +119,15 @@ class Button {
     focus() {
         this.el.nativeElement.firstChild.focus();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.25", 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" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<button\n    [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ngStyle]=\"style\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"buttonClass\"\n    (click)=\"onClick.emit($event)\"\n    (focus)=\"onFocus.emit($event)\"\n    (blur)=\"onBlur.emit($event)\"\n    caxRipple\n    [attr.data-pc-name]=\"'button'\"\n    [attr.data-pc-section]=\"'root'\"\n    [attr.tabindex]=\"tabindex\"\n    caxAutoFocus\n    [autofocus]=\"autofocus\"\n>\n    <!-- Label and Icons -->\n    <ng-container *ngIf=\"label\">\n        <span class=\"cax-button-content-wrapper\">\n            <!-- Left Icon / Spinner -->\n            <ng-container *ngIf=\"loading || leftIcon\">\n                <cax-progressSpinner *ngIf=\"loading\" [size]=\"size\" [styleClass]=\"spinnerIconClass() + ' cax-main-loader'\" />\n                <span *ngIf=\"!loading && leftIcon\" class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\n            </ng-container>\n\n            <!-- Label -->\n            <span class=\"cax-button-label\" [ngClass]=\"{ 'cax-text-action-md-semibold': !size || size === 'md', 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\">{{ label }}</span>\n\n            <!-- Right Icon -->\n            <ng-container *ngIf=\"rightIcon\">\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\n            </ng-container>\n        </span>\n    </ng-container>\n\n    <!-- Icon Only -->\n    <ng-container *ngIf=\"!label\">\n        <cax-progressSpinner *ngIf=\"loading\" [size]=\"size\" [styleClass]=\"spinnerIconClass() + ' cax-main-loader'\" />\n        <span *ngIf=\"!loading && icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\n    </ng-container>\n    <!-- Badge -->\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\n</button>\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: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i1.ProgressSpinner, selector: "cax-progressSpinner", inputs: ["styleClass", "strokeColor", "backgroundStrokeColor", "size", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: {
+            args: [{ selector: 'cax-button', standalone: true, imports: [NgIf, NgStyle, NgClass, Ripple, AutoFocus, ProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element',
-                        '[class.cax-disabled]': 'disabled || loading'
-                    }, 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" }]
+                        '[class.cax-disabled]': 'disabled'
+                    }, template: "<button\n    [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ngStyle]=\"style\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"buttonClass\"\n    (click)=\"onClick.emit($event)\"\n    (focus)=\"onFocus.emit($event)\"\n    (blur)=\"onBlur.emit($event)\"\n    caxRipple\n    [attr.data-pc-name]=\"'button'\"\n    [attr.data-pc-section]=\"'root'\"\n    [attr.tabindex]=\"tabindex\"\n    caxAutoFocus\n    [autofocus]=\"autofocus\"\n>\n    <!-- Label and Icons -->\n    <ng-container *ngIf=\"label\">\n        <span class=\"cax-button-content-wrapper\">\n            <!-- Left Icon / Spinner -->\n            <ng-container *ngIf=\"loading || leftIcon\">\n                <cax-progressSpinner *ngIf=\"loading\" [size]=\"size\" [styleClass]=\"spinnerIconClass() + ' cax-main-loader'\" />\n                <span *ngIf=\"!loading && leftIcon\" class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\n            </ng-container>\n\n            <!-- Label -->\n            <span class=\"cax-button-label\" [ngClass]=\"{ 'cax-text-action-md-semibold': !size || size === 'md', 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\">{{ label }}</span>\n\n            <!-- Right Icon -->\n            <ng-container *ngIf=\"rightIcon\">\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\n            </ng-container>\n        </span>\n    </ng-container>\n\n    <!-- Icon Only -->\n    <ng-container *ngIf=\"!label\">\n        <cax-progressSpinner *ngIf=\"loading\" [size]=\"size\" [styleClass]=\"spinnerIconClass() + ' cax-main-loader'\" />\n        <span *ngIf=\"!loading && icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\n    </ng-container>\n    <!-- Badge -->\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], iconPos: [{
@@ -239,7 +246,7 @@ class ButtonDirective {
     rounded = false;
     text = false;
     outlined = false;
-    size = 'medium';
+    size = 'md';
     plain = false;
     link = false;
     _label;
@@ -311,13 +318,13 @@ class ButtonDirective {
         if (this.rounded) {
             styleClass.push('cax-button-rounded');
         }
-        if (this.size === 'small') {
+        if (this.size === 'sm') {
             styleClass.push('cax-button-sm');
         }
-        if (this.size === 'medium') {
+        if (this.size === 'md') {
             styleClass.push('cax-button-md');
         }
-        if (this.size === 'large') {
+        if (this.size === 'lg') {
             styleClass.push('cax-button-lg');
         }
         return styleClass;
@@ -327,20 +334,46 @@ class ButtonDirective {
         this.htmlElement.classList.remove(...this._internalClasses);
         this.htmlElement.classList.add(...styleClass);
     }
+    getTypographyClass() {
+        if (this.size === 'sm')
+            return 'cax-text-action-sm-semibold';
+        if (this.size === 'lg')
+            return 'cax-text-action-lg-semibold';
+        return 'cax-text-action-md-semibold';
+    }
+    getContainer() {
+        if (this.label) {
+            let wrapper = DomHandler.findSingle(this.htmlElement, '.cax-button-content-wrapper');
+            if (!wrapper) {
+                wrapper = this.document.createElement('span');
+                wrapper.className = 'cax-button-content-wrapper';
+                // Move existing icon if it exists as direct child
+                let iconElement = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');
+                if (iconElement) {
+                    wrapper.appendChild(iconElement);
+                }
+                this.htmlElement.appendChild(wrapper);
+            }
+            return wrapper;
+        }
+        return this.htmlElement;
+    }
     createLabel() {
-        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-label');
+        let container = this.getContainer();
+        const created = DomHandler.findSingle(container, '.cax-button-label');
         if (!created && this.label) {
             let labelElement = this.document.createElement('span');
             if (this.icon && !this.label) {
                 labelElement.setAttribute('aria-hidden', 'true');
             }
-            labelElement.className = 'cax-button-label';
+            labelElement.className = 'cax-button-label ' + this.getTypographyClass();
             labelElement.appendChild(this.document.createTextNode(this.label));
-            this.htmlElement.appendChild(labelElement);
+            container.appendChild(labelElement);
         }
     }
     createIcon() {
-        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');
+        let container = this.getContainer();
+        const created = DomHandler.findSingle(container, '.cax-button-icon');
         if (!created && (this.icon || this.loading)) {
             let iconElement = this.document.createElement('span');
             iconElement.className = 'cax-button-icon';
@@ -356,20 +389,41 @@ class ButtonDirective {
             if (iconClass) {
                 DomHandler.addMultipleClasses(iconElement, iconClass);
             }
-            this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);
+            container.insertBefore(iconElement, container.firstChild);
         }
     }
     updateLabel() {
         let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');
         if (!this.label) {
-            labelElement && this.htmlElement.removeChild(labelElement);
+            if (labelElement) {
+                let parent = labelElement.parentNode;
+                parent && parent.removeChild(labelElement);
+            }
+            let wrapper = DomHandler.findSingle(this.htmlElement, '.cax-button-content-wrapper');
+            if (wrapper) {
+                // If there's an icon in the wrapper, move it back to the button
+                let iconElement = DomHandler.findSingle(wrapper, '.cax-button-icon');
+                if (iconElement) {
+                    this.htmlElement.appendChild(iconElement);
+                }
+                this.htmlElement.removeChild(wrapper);
+            }
             return;
         }
-        labelElement ? (labelElement.textContent = this.label) : this.createLabel();
+        let container = this.getContainer();
+        labelElement = DomHandler.findSingle(container, '.cax-button-label');
+        if (labelElement) {
+            labelElement.textContent = this.label;
+            labelElement.className = 'cax-button-label ' + this.getTypographyClass();
+        }
+        else {
+            this.createLabel();
+        }
     }
     updateIcon() {
-        let iconElement = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');
-        let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');
+        let container = this.getContainer();
+        let iconElement = DomHandler.findSingle(container, '.cax-button-icon');
+        let labelElement = DomHandler.findSingle(container, '.cax-button-label');
         if (this.loading && !this.loadingIcon && iconElement) {
             iconElement.innerHTML = this.spinnerIcon;
         }
@@ -394,10 +448,10 @@ class ButtonDirective {
     ngOnDestroy() {
         this.initialized = false;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", 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.17", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxButton]',
@@ -444,11 +498,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 class ButtonModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, imports: [ButtonDirective, Button], exports: [ButtonDirective, Button, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, imports: [Button, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonDirective, Button],