cax-design-system 2.1.0 → 2.2.0

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

@@ -1,10 +1,10 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { DomHandler } from 'cax-design-system/dom';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { DomHandler } from 'cax-design-system/dom';
+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';
 
@@ -180,135 +180,13 @@ class Steps {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Steps, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Steps, selector: "p-steps", inputs: { activeIndex: ["activeIndex", "activeIndex", numberAttribute], model: "model", readonly: ["readonly", "readonly", booleanAttribute], style: "style", styleClass: "styleClass", exact: ["exact", "exact", booleanAttribute] }, outputs: { activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
-        <nav [ngClass]="{ 'p-steps p-component': true, 'p-readonly': readonly }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'steps'">
-            <ul #list [attr.data-pc-section]="'menu'">
-                <li
-                    *ngFor="let item of model; let i = index"
-                    class="p-steps-item"
-                    #menuitem
-                    [ngStyle]="item.style"
-                    [class]="item.styleClass"
-                    [attr.aria-current]="isActive(item, i) ? 'step' : undefined"
-                    [attr.id]="item.id"
-                    caxTooltip
-                    [tooltipOptions]="item.tooltipOptions"
-                    [ngClass]="{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }"
-                    [attr.data-pc-section]="'menuitem'"
-                >
-                    <a
-                        role="link"
-                        *ngIf="isClickableRouterLink(item); else elseBlock"
-                        [routerLink]="item.routerLink"
-                        [queryParams]="item.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-                        class="p-menuitem-link"
-                        (click)="onItemClick($event, item, i)"
-                        (keydown)="onItemKeydown($event, item, i)"
-                        [target]="item.target"
-                        [attr.tabindex]="getItemTabIndex(item, i)"
-                        [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
-                        [fragment]="item.fragment"
-                        [queryParamsHandling]="item.queryParamsHandling"
-                        [preserveFragment]="item.preserveFragment"
-                        [skipLocationChange]="item.skipLocationChange"
-                        [replaceUrl]="item.replaceUrl"
-                        [state]="item.state"
-                        [attr.aria-current]="i === activeIndex ? 'step' : null"
-                    >
-                        <span class="p-steps-number"> {{ i + 1 }}</span>
-                        <span class="p-steps-title" *ngIf="item.escape !== false; else htmlLabel"> {{ item.label }}</span>
-                        <ng-template #htmlLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
-                    </a>
-                    <ng-template #elseBlock>
-                        <a
-                            role="link"
-                            [attr.href]="item.url"
-                            class="p-menuitem-link"
-                            (click)="onItemClick($event, item, i)"
-                            (keydown)="onItemKeydown($event, item, i)"
-                            [target]="item.target"
-                            [attr.tabindex]="getItemTabIndex(item, i)"
-                            [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
-                            [attr.aria-current]="i === activeIndex ? 'step' : null"
-                        >
-                            <span class="p-steps-number"> {{ i + 1 }} </span>
-                            <span class="p-steps-title" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
-                            <ng-template #htmlRouteLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
-                        </a>
-                    </ng-template>
-                </li>
-            </ul>
-        </nav>
-    `, isInline: true, styles: ["@layer cax{.p-steps{position:relative}.p-steps ul{padding:0;margin:0;list-style-type:none;display:flex}.p-steps-item{position:relative;display:flex;justify-content:center;flex:1 1 auto}.p-steps-item .p-menuitem-link{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}.p-steps.p-steps-readonly .p-steps-item{cursor:auto}.p-steps-item.p-steps-current .p-menuitem-link{cursor:default}.p-steps-title{white-space:nowrap}.p-steps-number{display:flex;align-items:center;justify-content:center}.p-steps-title{display:block}}\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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Steps, selector: "cax-steps", inputs: { activeIndex: ["activeIndex", "activeIndex", numberAttribute], model: "model", readonly: ["readonly", "readonly", booleanAttribute], style: "style", styleClass: "styleClass", exact: ["exact", "exact", booleanAttribute] }, outputs: { activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<nav [ngClass]=\"{ 'cax-steps cax-component': true, 'cax-readonly': readonly }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'steps'\">\r\n    <ul #list [attr.data-pc-section]=\"'menu'\">\r\n        <li\r\n            *ngFor=\"let item of model; let i = index\"\r\n            class=\"cax-steps-item\"\r\n            #menuitem\r\n            [ngStyle]=\"item.style\"\r\n            [class]=\"item.styleClass\"\r\n            [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\r\n            [attr.id]=\"item.id\"\r\n            caxTooltip\r\n            [tooltipOptions]=\"item.tooltipOptions\"\r\n            [ngClass]=\"{\r\n                'cax-highlight': i <= activeIndex,  \r\n                'cax-steps-current': isActive(item, i),\r\n                'cax-disabled': item.disabled || (readonly && !isActive(item, i))\r\n            }\"\r\n            [attr.data-pc-section]=\"'menuitem'\"\r\n        >\r\n            <a\r\n                role=\"link\"\r\n                *ngIf=\"isClickableRouterLink(item); else elseBlock\"\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)=\"onItemClick($event, item, i)\"\r\n                (keydown)=\"onItemKeydown($event, item, i)\"\r\n                [target]=\"item.target\"\r\n                [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\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.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n            >\r\n                <span class=\"cax-steps-number\"> {{ i + 1 }}</span>\r\n                <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\"> {{ item.label }}</span>\r\n                <ng-template #htmlLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n            </a>\r\n            <ng-template #elseBlock>\r\n                <a\r\n                    role=\"link\"\r\n                    [attr.href]=\"item.url\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onItemClick($event, item, i)\"\r\n                    (keydown)=\"onItemKeydown($event, item, i)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                    [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\r\n                    [attr.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n                >\r\n                    <span class=\"cax-steps-number\"> {{ i + 1 }} </span>\r\n                    <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\r\n                    <ng-template #htmlRouteLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                </a>\r\n            </ng-template>\r\n        </li>\r\n    </ul>\r\n</nav>", styles: ["@layer cax{.cax-steps{position:relative}.cax-steps ul{padding:0;margin:0;list-style-type:none;display:flex}.cax-steps-item{position:relative;display:flex;justify-content:center;flex:1 1 auto}.cax-steps-item .cax-menuitem-link{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}.cax-steps.cax-steps-readonly .cax-steps-item{cursor:auto}.cax-steps-item.cax-steps-current .cax-menuitem-link{cursor:default}.cax-steps-title{white-space:nowrap}.cax-steps-number{display:flex;align-items:center;justify-content:center}.cax-steps-title{display:block}}\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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Steps, decorators: [{
             type: Component,
-            args: [{ selector: 'p-steps', template: `
-        <nav [ngClass]="{ 'p-steps p-component': true, 'p-readonly': readonly }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'steps'">
-            <ul #list [attr.data-pc-section]="'menu'">
-                <li
-                    *ngFor="let item of model; let i = index"
-                    class="p-steps-item"
-                    #menuitem
-                    [ngStyle]="item.style"
-                    [class]="item.styleClass"
-                    [attr.aria-current]="isActive(item, i) ? 'step' : undefined"
-                    [attr.id]="item.id"
-                    caxTooltip
-                    [tooltipOptions]="item.tooltipOptions"
-                    [ngClass]="{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }"
-                    [attr.data-pc-section]="'menuitem'"
-                >
-                    <a
-                        role="link"
-                        *ngIf="isClickableRouterLink(item); else elseBlock"
-                        [routerLink]="item.routerLink"
-                        [queryParams]="item.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-                        class="p-menuitem-link"
-                        (click)="onItemClick($event, item, i)"
-                        (keydown)="onItemKeydown($event, item, i)"
-                        [target]="item.target"
-                        [attr.tabindex]="getItemTabIndex(item, i)"
-                        [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
-                        [fragment]="item.fragment"
-                        [queryParamsHandling]="item.queryParamsHandling"
-                        [preserveFragment]="item.preserveFragment"
-                        [skipLocationChange]="item.skipLocationChange"
-                        [replaceUrl]="item.replaceUrl"
-                        [state]="item.state"
-                        [attr.aria-current]="i === activeIndex ? 'step' : null"
-                    >
-                        <span class="p-steps-number"> {{ i + 1 }}</span>
-                        <span class="p-steps-title" *ngIf="item.escape !== false; else htmlLabel"> {{ item.label }}</span>
-                        <ng-template #htmlLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
-                    </a>
-                    <ng-template #elseBlock>
-                        <a
-                            role="link"
-                            [attr.href]="item.url"
-                            class="p-menuitem-link"
-                            (click)="onItemClick($event, item, i)"
-                            (keydown)="onItemKeydown($event, item, i)"
-                            [target]="item.target"
-                            [attr.tabindex]="getItemTabIndex(item, i)"
-                            [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
-                            [attr.aria-current]="i === activeIndex ? 'step' : null"
-                        >
-                            <span class="p-steps-number"> {{ i + 1 }} </span>
-                            <span class="p-steps-title" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
-                            <ng-template #htmlRouteLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
-                        </a>
-                    </ng-template>
-                </li>
-            </ul>
-        </nav>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'cax-steps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, styles: ["@layer cax{.p-steps{position:relative}.p-steps ul{padding:0;margin:0;list-style-type:none;display:flex}.p-steps-item{position:relative;display:flex;justify-content:center;flex:1 1 auto}.p-steps-item .p-menuitem-link{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}.p-steps.p-steps-readonly .p-steps-item{cursor:auto}.p-steps-item.p-steps-current .p-menuitem-link{cursor:default}.p-steps-title{white-space:nowrap}.p-steps-number{display:flex;align-items:center;justify-content:center}.p-steps-title{display:block}}\n"] }]
+                    }, template: "<nav [ngClass]=\"{ 'cax-steps cax-component': true, 'cax-readonly': readonly }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'steps'\">\r\n    <ul #list [attr.data-pc-section]=\"'menu'\">\r\n        <li\r\n            *ngFor=\"let item of model; let i = index\"\r\n            class=\"cax-steps-item\"\r\n            #menuitem\r\n            [ngStyle]=\"item.style\"\r\n            [class]=\"item.styleClass\"\r\n            [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\r\n            [attr.id]=\"item.id\"\r\n            caxTooltip\r\n            [tooltipOptions]=\"item.tooltipOptions\"\r\n            [ngClass]=\"{\r\n                'cax-highlight': i <= activeIndex,  \r\n                'cax-steps-current': isActive(item, i),\r\n                'cax-disabled': item.disabled || (readonly && !isActive(item, i))\r\n            }\"\r\n            [attr.data-pc-section]=\"'menuitem'\"\r\n        >\r\n            <a\r\n                role=\"link\"\r\n                *ngIf=\"isClickableRouterLink(item); else elseBlock\"\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)=\"onItemClick($event, item, i)\"\r\n                (keydown)=\"onItemKeydown($event, item, i)\"\r\n                [target]=\"item.target\"\r\n                [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\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.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n            >\r\n                <span class=\"cax-steps-number\"> {{ i + 1 }}</span>\r\n                <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\"> {{ item.label }}</span>\r\n                <ng-template #htmlLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n            </a>\r\n            <ng-template #elseBlock>\r\n                <a\r\n                    role=\"link\"\r\n                    [attr.href]=\"item.url\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onItemClick($event, item, i)\"\r\n                    (keydown)=\"onItemKeydown($event, item, i)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                    [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\r\n                    [attr.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n                >\r\n                    <span class=\"cax-steps-number\"> {{ i + 1 }} </span>\r\n                    <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\r\n                    <ng-template #htmlRouteLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                </a>\r\n            </ng-template>\r\n        </li>\r\n    </ul>\r\n</nav>", styles: ["@layer cax{.cax-steps{position:relative}.cax-steps ul{padding:0;margin:0;list-style-type:none;display:flex}.cax-steps-item{position:relative;display:flex;justify-content:center;flex:1 1 auto}.cax-steps-item .cax-menuitem-link{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none}.cax-steps.cax-steps-readonly .cax-steps-item{cursor:auto}.cax-steps-item.cax-steps-current .cax-menuitem-link{cursor:default}.cax-steps-title{white-space:nowrap}.cax-steps-number{display:flex;align-items:center;justify-content:center}.cax-steps-title{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { activeIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -330,6 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: ViewChild,
                 args: ['list', { static: false }]
             }] } });
+
 class StepsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: StepsModule, declarations: [Steps], imports: [CommonModule, RouterModule, TooltipModule], exports: [Steps, RouterModule, TooltipModule] });

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-steps.mjs","sources":["../../src/app/components/steps/steps.ts","../../src/app/components/steps/cax-design-system-steps.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { MenuItem } from 'cax-design-system/api';\nimport { TooltipModule } from 'cax-design-system/tooltip';\nimport { Subscription } from 'rxjs';\n/**\n * Steps components is an indicator for the steps in a wizard workflow.\n * @group Components\n */\n@Component({\n    selector: 'p-steps',\n    template: `\n        <nav [ngClass]=\"{ 'p-steps p-component': true, 'p-readonly': readonly }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'steps'\">\n            <ul #list [attr.data-pc-section]=\"'menu'\">\n                <li\n                    *ngFor=\"let item of model; let i = index\"\n                    class=\"p-steps-item\"\n                    #menuitem\n                    [ngStyle]=\"item.style\"\n                    [class]=\"item.styleClass\"\n                    [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\n                    [attr.id]=\"item.id\"\n                    caxTooltip\n                    [tooltipOptions]=\"item.tooltipOptions\"\n                    [ngClass]=\"{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }\"\n                    [attr.data-pc-section]=\"'menuitem'\"\n                >\n                    <a\n                        role=\"link\"\n                        *ngIf=\"isClickableRouterLink(item); else elseBlock\"\n                        [routerLink]=\"item.routerLink\"\n                        [queryParams]=\"item.queryParams\"\n                        [routerLinkActive]=\"'p-menuitem-link-active'\"\n                        [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n                        class=\"p-menuitem-link\"\n                        (click)=\"onItemClick($event, item, i)\"\n                        (keydown)=\"onItemKeydown($event, item, i)\"\n                        [target]=\"item.target\"\n                        [attr.tabindex]=\"getItemTabIndex(item, i)\"\n                        [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\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.aria-current]=\"i === activeIndex ? 'step' : null\"\n                    >\n                        <span class=\"p-steps-number\"> {{ i + 1 }}</span>\n                        <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\"> {{ item.label }}</span>\n                        <ng-template #htmlLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                    </a>\n                    <ng-template #elseBlock>\n                        <a\n                            role=\"link\"\n                            [attr.href]=\"item.url\"\n                            class=\"p-menuitem-link\"\n                            (click)=\"onItemClick($event, item, i)\"\n                            (keydown)=\"onItemKeydown($event, item, i)\"\n                            [target]=\"item.target\"\n                            [attr.tabindex]=\"getItemTabIndex(item, i)\"\n                            [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\n                            [attr.aria-current]=\"i === activeIndex ? 'step' : null\"\n                        >\n                            <span class=\"p-steps-number\"> {{ i + 1 }} </span>\n                            <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\n                            <ng-template #htmlRouteLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </a>\n                    </ng-template>\n                </li>\n            </ul>\n        </nav>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./steps.css'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Steps implements OnInit, OnDestroy {\n    /**\n     * Index of the active item.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) activeIndex: number = 0;\n    /**\n     * An array of menu items.\n     * @group Props\n     */\n    @Input() model: MenuItem[] | undefined;\n    /**\n     * Whether the items are clickable or not.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean = true;\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     * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) exact: boolean = true;\n    /**\n     * Callback to invoke when the new step is selected.\n     * @param {number} number - current index.\n     * @group Emits\n     */\n    @Output() activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @ViewChild('list', { static: false }) listViewChild: Nullable<ElementRef>;\n\n    constructor(\n        private router: Router,\n        private route: ActivatedRoute,\n        private cd: ChangeDetectorRef\n    ) {}\n\n    subscription: Subscription | undefined;\n\n    ngOnInit() {\n        this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());\n    }\n\n    onItemClick(event: Event, item: MenuItem, i: number) {\n        if (this.readonly || item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        this.activeIndexChange.emit(i);\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                index: i\n            });\n        }\n    }\n\n    onItemKeydown(event: KeyboardEvent, item: MenuItem, i: number) {\n        switch (event.code) {\n            case 'ArrowRight': {\n                this.navigateToNextItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'ArrowLeft': {\n                this.navigateToPrevItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'Home': {\n                this.navigateToFirstItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'End': {\n                this.navigateToLastItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'Tab':\n                if (i !== this.activeIndex) {\n                    const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n                    siblings[i].children[0].tabIndex = '-1';\n                    siblings[this.activeIndex].children[0].tabIndex = '0';\n                }\n                break;\n\n            case 'Enter':\n            case 'Space': {\n                this.onItemClick(event, item, i);\n                event.preventDefault();\n                break;\n            }\n\n            default:\n                break;\n        }\n    }\n\n    navigateToNextItem(target) {\n        const nextItem = this.findNextItem(target);\n\n        nextItem && this.setFocusToMenuitem(target, nextItem);\n    }\n    navigateToPrevItem(target) {\n        const prevItem = this.findPrevItem(target);\n\n        prevItem && this.setFocusToMenuitem(target, prevItem);\n    }\n    navigateToFirstItem(target) {\n        const firstItem = this.findFirstItem();\n\n        firstItem && this.setFocusToMenuitem(target, firstItem);\n    }\n    navigateToLastItem(target) {\n        const lastItem = this.findLastItem();\n\n        lastItem && this.setFocusToMenuitem(target, lastItem);\n    }\n    findNextItem(item) {\n        const nextItem = item.parentElement.nextElementSibling;\n\n        return nextItem ? nextItem.children[0] : null;\n    }\n    findPrevItem(item) {\n        const prevItem = item.parentElement.previousElementSibling;\n\n        return prevItem ? prevItem.children[0] : null;\n    }\n    findFirstItem() {\n        const firstSibling = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n\n        return firstSibling ? firstSibling.children[0] : null;\n    }\n    findLastItem() {\n        const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n\n        return siblings ? siblings[siblings.length - 1].children[0] : null;\n    }\n    setFocusToMenuitem(target, focusableItem) {\n        target.tabIndex = '-1';\n        focusableItem.tabIndex = '0';\n        focusableItem.focus();\n    }\n\n    isClickableRouterLink(item: MenuItem) {\n        return item.routerLink && !this.readonly && !item.disabled;\n    }\n\n    isActive(item: MenuItem, index: number) {\n        if (item.routerLink) {\n            let routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];\n\n            return this.router.isActive(this.router.createUrlTree(routerLink, { relativeTo: this.route }).toString(), false);\n        }\n\n        return index === this.activeIndex;\n    }\n\n    getItemTabIndex(item: MenuItem, index: number): string {\n        if (item.disabled) {\n            return '-1';\n        }\n\n        if (!item.disabled && this.activeIndex === index) {\n            return item.tabindex || '0';\n        }\n\n        return item.tabindex ?? '-1';\n    }\n\n    ngOnDestroy() {\n        if (this.subscription) {\n            this.subscription.unsubscribe();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule],\n    exports: [Steps, RouterModule, TooltipModule],\n    declarations: [Steps]\n})\nexport class StepsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-steps.mjs","sources":["../../src/app/components/steps/steps.ts","../../src/app/components/steps/steps.html","../../src/app/components/steps/steps.module.ts","../../src/app/components/steps/cax-design-system-steps.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { MenuItem } from 'cax-design-system/api';\nimport { TooltipModule } from 'cax-design-system/tooltip';\nimport { Subscription } from 'rxjs';\n/**\n * Steps components is an indicator for the steps in a wizard workflow.\n * @group Components\n */\n@Component({\n    selector: 'cax-steps',\n    templateUrl: './steps.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./steps.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Steps implements OnInit, OnDestroy {\n    /**\n     * Index of the active item.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) activeIndex: number = 0;\n    /**\n     * An array of menu items.\n     * @group Props\n     */\n    @Input() model: MenuItem[] | undefined;\n    /**\n     * Whether the items are clickable or not.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean = true;\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     * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) exact: boolean = true;\n    /**\n     * Callback to invoke when the new step is selected.\n     * @param {number} number - current index.\n     * @group Emits\n     */\n    @Output() activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @ViewChild('list', { static: false }) listViewChild: Nullable<ElementRef>;\n\n    constructor(\n        private router: Router,\n        private route: ActivatedRoute,\n        private cd: ChangeDetectorRef\n    ) {}\n\n    subscription: Subscription | undefined;\n\n    ngOnInit() {\n        this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());\n    }\n\n    onItemClick(event: Event, item: MenuItem, i: number) {\n        if (this.readonly || item.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        this.activeIndexChange.emit(i);\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                index: i\n            });\n        }\n    }\n\n    onItemKeydown(event: KeyboardEvent, item: MenuItem, i: number) {\n        switch (event.code) {\n            case 'ArrowRight': {\n                this.navigateToNextItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'ArrowLeft': {\n                this.navigateToPrevItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'Home': {\n                this.navigateToFirstItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'End': {\n                this.navigateToLastItem(event.target);\n                event.preventDefault();\n                break;\n            }\n\n            case 'Tab':\n                if (i !== this.activeIndex) {\n                    const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n                    siblings[i].children[0].tabIndex = '-1';\n                    siblings[this.activeIndex].children[0].tabIndex = '0';\n                }\n                break;\n\n            case 'Enter':\n            case 'Space': {\n                this.onItemClick(event, item, i);\n                event.preventDefault();\n                break;\n            }\n\n            default:\n                break;\n        }\n    }\n\n    navigateToNextItem(target) {\n        const nextItem = this.findNextItem(target);\n\n        nextItem && this.setFocusToMenuitem(target, nextItem);\n    }\n    navigateToPrevItem(target) {\n        const prevItem = this.findPrevItem(target);\n\n        prevItem && this.setFocusToMenuitem(target, prevItem);\n    }\n    navigateToFirstItem(target) {\n        const firstItem = this.findFirstItem();\n\n        firstItem && this.setFocusToMenuitem(target, firstItem);\n    }\n    navigateToLastItem(target) {\n        const lastItem = this.findLastItem();\n\n        lastItem && this.setFocusToMenuitem(target, lastItem);\n    }\n    findNextItem(item) {\n        const nextItem = item.parentElement.nextElementSibling;\n\n        return nextItem ? nextItem.children[0] : null;\n    }\n    findPrevItem(item) {\n        const prevItem = item.parentElement.previousElementSibling;\n\n        return prevItem ? prevItem.children[0] : null;\n    }\n    findFirstItem() {\n        const firstSibling = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n\n        return firstSibling ? firstSibling.children[0] : null;\n    }\n    findLastItem() {\n        const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section=\"menuitem\"]');\n\n        return siblings ? siblings[siblings.length - 1].children[0] : null;\n    }\n    setFocusToMenuitem(target, focusableItem) {\n        target.tabIndex = '-1';\n        focusableItem.tabIndex = '0';\n        focusableItem.focus();\n    }\n\n    isClickableRouterLink(item: MenuItem) {\n        return item.routerLink && !this.readonly && !item.disabled;\n    }\n\n    isActive(item: MenuItem, index: number) {\n        if (item.routerLink) {\n            let routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];\n\n            return this.router.isActive(this.router.createUrlTree(routerLink, { relativeTo: this.route }).toString(), false);\n        }\n\n        return index === this.activeIndex;\n    }\n\n    getItemTabIndex(item: MenuItem, index: number): string {\n        if (item.disabled) {\n            return '-1';\n        }\n\n        if (!item.disabled && this.activeIndex === index) {\n            return item.tabindex || '0';\n        }\n\n        return item.tabindex ?? '-1';\n    }\n\n    ngOnDestroy() {\n        if (this.subscription) {\n            this.subscription.unsubscribe();\n        }\n    }\n}\n","<nav [ngClass]=\"{ 'cax-steps cax-component': true, 'cax-readonly': readonly }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'steps'\">\r\n    <ul #list [attr.data-pc-section]=\"'menu'\">\r\n        <li\r\n            *ngFor=\"let item of model; let i = index\"\r\n            class=\"cax-steps-item\"\r\n            #menuitem\r\n            [ngStyle]=\"item.style\"\r\n            [class]=\"item.styleClass\"\r\n            [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\r\n            [attr.id]=\"item.id\"\r\n            caxTooltip\r\n            [tooltipOptions]=\"item.tooltipOptions\"\r\n            [ngClass]=\"{\r\n                'cax-highlight': i <= activeIndex,  \r\n                'cax-steps-current': isActive(item, i),\r\n                'cax-disabled': item.disabled || (readonly && !isActive(item, i))\r\n            }\"\r\n            [attr.data-pc-section]=\"'menuitem'\"\r\n        >\r\n            <a\r\n                role=\"link\"\r\n                *ngIf=\"isClickableRouterLink(item); else elseBlock\"\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)=\"onItemClick($event, item, i)\"\r\n                (keydown)=\"onItemKeydown($event, item, i)\"\r\n                [target]=\"item.target\"\r\n                [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\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.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n            >\r\n                <span class=\"cax-steps-number\"> {{ i + 1 }}</span>\r\n                <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\"> {{ item.label }}</span>\r\n                <ng-template #htmlLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n            </a>\r\n            <ng-template #elseBlock>\r\n                <a\r\n                    role=\"link\"\r\n                    [attr.href]=\"item.url\"\r\n                    class=\"cax-menuitem-link\"\r\n                    (click)=\"onItemClick($event, item, i)\"\r\n                    (keydown)=\"onItemKeydown($event, item, i)\"\r\n                    [target]=\"item.target\"\r\n                    [attr.tabindex]=\"getItemTabIndex(item, i)\"\r\n                    [attr.aria-disabled]=\"item.disabled || (readonly && i !== activeIndex)\"\r\n                    [attr.aria-current]=\"i === activeIndex ? 'step' : null\"\r\n                >\r\n                    <span class=\"cax-steps-number\"> {{ i + 1 }} </span>\r\n                    <span class=\"cax-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{ item.label }}</span>\r\n                    <ng-template #htmlRouteLabel><span class=\"cax-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\r\n                </a>\r\n            </ng-template>\r\n        </li>\r\n    </ul>\r\n</nav>","import { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { TooltipModule } from 'cax-design-system/tooltip';\nimport { Steps } from './steps';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n    imports: [CommonModule, RouterModule, TooltipModule],\n    exports: [Steps, RouterModule, TooltipModule],\n    declarations: [Steps]\n})\nexport class StepsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, NgModule } from '@angular/core';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 /**
  * Timeline visualizes a series of chained events.
@@ -61,83 +61,13 @@ class Timeline {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Timeline, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Timeline, selector: "p-timeline", inputs: { value: "value", style: "style", styleClass: "styleClass", align: "align", layout: "layout" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
-        <div
-            [class]="styleClass"
-            [ngStyle]="style"
-            [ngClass]="{
-                'p-timeline p-component': true,
-                'p-timeline-left': align === 'left',
-                'p-timeline-right': align === 'right',
-                'p-timeline-top': align === 'top',
-                'p-timeline-bottom': align === 'bottom',
-                'p-timeline-alternate': align === 'alternate',
-                'p-timeline-vertical': layout === 'vertical',
-                'p-timeline-horizontal': layout === 'horizontal'
-            }"
-            [attr.data-pc-name]="'timeline'"
-            [attr.data-pc-section]="'root'"
-        >
-            <div *ngFor="let event of value; let last = last" class="p-timeline-event" [attr.data-pc-section]="'event'">
-                <div class="p-timeline-event-opposite" [attr.data-pc-section]="'opposite'">
-                    <ng-container *ngTemplateOutlet="oppositeTemplate; context: { $implicit: event }"></ng-container>
-                </div>
-                <div class="p-timeline-event-separator" [attr.data-pc-section]="'separator'">
-                    <ng-container *ngIf="markerTemplate; else marker">
-                        <ng-container *ngTemplateOutlet="markerTemplate; context: { $implicit: event }"></ng-container>
-                    </ng-container>
-                    <ng-template #marker>
-                        <div class="p-timeline-event-marker" [attr.data-pc-section]="'marker'"></div>
-                    </ng-template>
-                    <div *ngIf="!last" class="p-timeline-event-connector"></div>
-                </div>
-                <div class="p-timeline-event-content" [attr.data-pc-section]="'content'">
-                    <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: event }"></ng-container>
-                </div>
-            </div>
-        </div>
-    `, isInline: true, styles: ["@layer cax{.p-timeline{display:flex;flex-grow:1;flex-direction:column}.p-timeline-left .p-timeline-event-opposite{text-align:right}.p-timeline-left .p-timeline-event-content{text-align:left}.p-timeline-right .p-timeline-event{flex-direction:row-reverse}.p-timeline-right .p-timeline-event-opposite{text-align:left}.p-timeline-right .p-timeline-event-content{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:row-reverse}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content{text-align:left}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-opposite{text-align:left}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right}.p-timeline-event{display:flex;position:relative;min-height:70px}.p-timeline-event:last-child{min-height:0}.p-timeline-event-opposite,.p-timeline-event-content{flex:1;padding:0 1rem;min-width:100px}.p-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.p-timeline-event-marker{display:flex;align-self:baseline}.p-timeline-event-connector{flex-grow:1}.p-timeline-horizontal{flex-direction:row}.p-timeline-horizontal .p-timeline-event{flex-direction:column;flex:1}.p-timeline-horizontal .p-timeline-event:last-child{flex:0}.p-timeline-horizontal .p-timeline-event-separator{flex-direction:row}.p-timeline-horizontal .p-timeline-event-connector{width:100%}.p-timeline-bottom .p-timeline-event{flex-direction:column-reverse}.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:column-reverse}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Timeline, selector: "cax-timeline", inputs: { value: "value", style: "style", styleClass: "styleClass", align: "align", layout: "layout" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative;min-height:70px}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-opposite{flex:1;padding:0 1rem;min-width:100px}.cax-timeline-event-content{flex:1;padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Timeline, decorators: [{
             type: Component,
-            args: [{ selector: 'p-timeline', template: `
-        <div
-            [class]="styleClass"
-            [ngStyle]="style"
-            [ngClass]="{
-                'p-timeline p-component': true,
-                'p-timeline-left': align === 'left',
-                'p-timeline-right': align === 'right',
-                'p-timeline-top': align === 'top',
-                'p-timeline-bottom': align === 'bottom',
-                'p-timeline-alternate': align === 'alternate',
-                'p-timeline-vertical': layout === 'vertical',
-                'p-timeline-horizontal': layout === 'horizontal'
-            }"
-            [attr.data-pc-name]="'timeline'"
-            [attr.data-pc-section]="'root'"
-        >
-            <div *ngFor="let event of value; let last = last" class="p-timeline-event" [attr.data-pc-section]="'event'">
-                <div class="p-timeline-event-opposite" [attr.data-pc-section]="'opposite'">
-                    <ng-container *ngTemplateOutlet="oppositeTemplate; context: { $implicit: event }"></ng-container>
-                </div>
-                <div class="p-timeline-event-separator" [attr.data-pc-section]="'separator'">
-                    <ng-container *ngIf="markerTemplate; else marker">
-                        <ng-container *ngTemplateOutlet="markerTemplate; context: { $implicit: event }"></ng-container>
-                    </ng-container>
-                    <ng-template #marker>
-                        <div class="p-timeline-event-marker" [attr.data-pc-section]="'marker'"></div>
-                    </ng-template>
-                    <div *ngIf="!last" class="p-timeline-event-connector"></div>
-                </div>
-                <div class="p-timeline-event-content" [attr.data-pc-section]="'content'">
-                    <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: event }"></ng-container>
-                </div>
-            </div>
-        </div>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'cax-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, styles: ["@layer cax{.p-timeline{display:flex;flex-grow:1;flex-direction:column}.p-timeline-left .p-timeline-event-opposite{text-align:right}.p-timeline-left .p-timeline-event-content{text-align:left}.p-timeline-right .p-timeline-event{flex-direction:row-reverse}.p-timeline-right .p-timeline-event-opposite{text-align:left}.p-timeline-right .p-timeline-event-content{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:row-reverse}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content{text-align:left}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-opposite{text-align:left}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right}.p-timeline-event{display:flex;position:relative;min-height:70px}.p-timeline-event:last-child{min-height:0}.p-timeline-event-opposite,.p-timeline-event-content{flex:1;padding:0 1rem;min-width:100px}.p-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.p-timeline-event-marker{display:flex;align-self:baseline}.p-timeline-event-connector{flex-grow:1}.p-timeline-horizontal{flex-direction:row}.p-timeline-horizontal .p-timeline-event{flex-direction:column;flex:1}.p-timeline-horizontal .p-timeline-event:last-child{flex:0}.p-timeline-horizontal .p-timeline-event-separator{flex-direction:row}.p-timeline-horizontal .p-timeline-event-connector{width:100%}.p-timeline-bottom .p-timeline-event{flex-direction:column-reverse}.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:column-reverse}}\n"] }]
+                    }, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative;min-height:70px}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-opposite{flex:1;padding:0 1rem;min-width:100px}.cax-timeline-event-content{flex:1;padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
                 type: Input
             }], style: [{
@@ -152,6 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: ContentChildren,
                 args: [CaxTemplate]
             }] } });
+
 class TimelineModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TimelineModule, declarations: [Timeline], imports: [CommonModule], exports: [Timeline, SharedModule] });

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-timeline.mjs","sources":["../../src/app/components/timeline/timeline.ts","../../src/app/components/timeline/cax-design-system-timeline.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { Nullable } from 'cax-design-system/ts-helpers';\n/**\n * Timeline visualizes a series of chained events.\n * @group Components\n */\n@Component({\n    selector: 'p-timeline',\n    template: `\n        <div\n            [class]=\"styleClass\"\n            [ngStyle]=\"style\"\n            [ngClass]=\"{\n                'p-timeline p-component': true,\n                'p-timeline-left': align === 'left',\n                'p-timeline-right': align === 'right',\n                'p-timeline-top': align === 'top',\n                'p-timeline-bottom': align === 'bottom',\n                'p-timeline-alternate': align === 'alternate',\n                'p-timeline-vertical': layout === 'vertical',\n                'p-timeline-horizontal': layout === 'horizontal'\n            }\"\n            [attr.data-pc-name]=\"'timeline'\"\n            [attr.data-pc-section]=\"'root'\"\n        >\n            <div *ngFor=\"let event of value; let last = last\" class=\"p-timeline-event\" [attr.data-pc-section]=\"'event'\">\n                <div class=\"p-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\n                    <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\n                </div>\n                <div class=\"p-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\n                    <ng-container *ngIf=\"markerTemplate; else marker\">\n                        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event }\"></ng-container>\n                    </ng-container>\n                    <ng-template #marker>\n                        <div class=\"p-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\"></div>\n                    </ng-template>\n                    <div *ngIf=\"!last\" class=\"p-timeline-event-connector\"></div>\n                </div>\n                <div class=\"p-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\n                    <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\n                </div>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./timeline.css'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Timeline implements AfterContentInit, BlockableUI {\n    /**\n     * An array of events to display.\n     * @group Props\n     */\n    @Input() value: any[] | 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     * Position of the timeline bar relative to the content. Valid values are \"left\", \"right\" for vertical layout and \"top\", \"bottom\" for horizontal layout.\n     * @group Props\n     */\n    @Input() align: string = 'left';\n    /**\n     * Orientation of the timeline.\n     * @group Props\n     */\n    @Input() layout: 'vertical' | 'horizontal' = 'vertical';\n\n    @ContentChildren(CaxTemplate) templates: Nullable<QueryList<any>>;\n\n    contentTemplate: Nullable<TemplateRef<any>>;\n\n    oppositeTemplate: Nullable<TemplateRef<any>>;\n\n    markerTemplate: Nullable<TemplateRef<any>>;\n\n    constructor(private el: ElementRef) {}\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n\n                case 'opposite':\n                    this.oppositeTemplate = item.template;\n                    break;\n\n                case 'marker':\n                    this.markerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Timeline, SharedModule],\n    declarations: [Timeline]\n})\nexport class TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-timeline.mjs","sources":["../../src/app/components/timeline/timeline.ts","../../src/app/components/timeline/timeline.html","../../src/app/components/timeline/timeline.module.ts","../../src/app/components/timeline/cax-design-system-timeline.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { Nullable } from 'cax-design-system/ts-helpers';\n/**\n * Timeline visualizes a series of chained events.\n * @group Components\n */\n@Component({\n    selector: 'cax-timeline',\n    templateUrl: `./timeline.html`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./timeline.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Timeline implements AfterContentInit, BlockableUI {\n    /**\n     * An array of events to display.\n     * @group Props\n     */\n    @Input() value: any[] | 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     * Position of the timeline bar relative to the content. Valid values are \"left\", \"right\" for vertical layout and \"top\", \"bottom\" for horizontal layout.\n     * @group Props\n     */\n    @Input() align: string = 'left';\n    /**\n     * Orientation of the timeline.\n     * @group Props\n     */\n    @Input() layout: 'vertical' | 'horizontal' = 'vertical';\n\n    @ContentChildren(CaxTemplate) templates: Nullable<QueryList<any>>;\n\n    contentTemplate: Nullable<TemplateRef<any>>;\n\n    oppositeTemplate: Nullable<TemplateRef<any>>;\n\n    markerTemplate: Nullable<TemplateRef<any>>;\n\n    constructor(private el: ElementRef) {}\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n\n                case 'opposite':\n                    this.oppositeTemplate = item.template;\n                    break;\n\n                case 'marker':\n                    this.markerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n","<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>","import { CommonModule } from '@angular/common';\nimport { SharedModule } from 'cax-design-system/api';\nimport { NgModule } from '@angular/core';\nimport { Timeline } from './timeline';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Timeline, SharedModule],\n    declarations: [Timeline]\n})\nexport class TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -17,11 +17,11 @@ class ToggleSwitchComponent {
         this.onChange.emit(this.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ToggleSwitchComponent, selector: "cax-toggleswitch", inputs: { size: "size", checked: "checked", disabled: "disabled", iconClass: "iconClass", label: "label", events: "events" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;gap:.5rem}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ToggleSwitchComponent, selector: "cax-toggleswitch", inputs: { size: "size", checked: "checked", disabled: "disabled", iconClass: "iconClass", label: "label", events: "events" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;gap:.5rem}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-toggleswitch', template: "<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;gap:.5rem}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"] }]
+            args: [{ selector: 'cax-toggleswitch', template: "<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;gap:.5rem}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], checked: [{

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-toggleswitch.mjs","sources":["../../src/app/components/toggleswitch/toggleswitch.ts","../../src/app/components/toggleswitch/toggleswitch.html","../../src/app/components/toggleswitch/toggleswitch.module.ts","../../src/app/components/toggleswitch/cax-design-system-toggleswitch.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n    selector: 'cax-toggleswitch',\n    templateUrl: './toggleswitch.html',\n    styleUrls: ['./toggleswitch.scss']\n})\nexport class ToggleSwitchComponent {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() checked = false;\n    @Input() disabled = false;\n    @Input() iconClass: string = 'cax cax-check';\n    @Output() onChange = new EventEmitter<boolean>();\n    @Input() label: string | undefined;\n    @Input() events: {};\n\n    toggleChecked(event: Event) {\n        this.checked = (event.target as HTMLInputElement).checked;\n        this.onChange.emit(this.checked);\n    }\n}\n","<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ToggleSwitchComponent } from './toggleswitch';\n\n@NgModule({\n    declarations: [ToggleSwitchComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [ToggleSwitchComponent]\n})\nexport class ToggleSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAOa,qBAAqB,CAAA;IACrB,IAAI,GAAuB,IAAI,CAAC;IAChC,OAAO,GAAG,KAAK,CAAC;IAChB,QAAQ,GAAG,KAAK,CAAC;IACjB,SAAS,GAAW,eAAe,CAAC;AACnC,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAW,CAAC;AACxC,IAAA,KAAK,CAAqB;AAC1B,IAAA,MAAM,CAAK;AAEpB,IAAA,aAAa,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACpC;uGAZQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,yNCPlC,m4DAgDA,EAAA,MAAA,EAAA,CAAA,6VAAA,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,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FDzCa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACI,kBAAkB,EAAA,QAAA,EAAA,m4DAAA,EAAA,MAAA,EAAA,CAAA,6VAAA,CAAA,EAAA,CAAA;8BAKnB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACI,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBACE,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;;;MEJG,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,iBAJZ,qBAAqB,CAAA,EAAA,OAAA,EAAA,CAC1B,YAAY,EAAE,WAAW,aACzB,qBAAqB,CAAA,EAAA,CAAA,CAAA;wGAEtB,kBAAkB,EAAA,OAAA,EAAA,CAHjB,YAAY,EAAE,WAAW,CAAA,EAAA,CAAA,CAAA;;2FAG1B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACnC,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}
+{"version":3,"file":"cax-design-system-toggleswitch.mjs","sources":["../../src/app/components/toggleswitch/toggleswitch.ts","../../src/app/components/toggleswitch/toggleswitch.html","../../src/app/components/toggleswitch/toggleswitch.module.ts","../../src/app/components/toggleswitch/cax-design-system-toggleswitch.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n    selector: 'cax-toggleswitch',\n    templateUrl: './toggleswitch.html',\n    styleUrls: ['./toggleswitch.scss']\n})\nexport class ToggleSwitchComponent {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() checked = false;\n    @Input() disabled = false;\n    @Input() iconClass: string = 'cax cax-check';\n    @Output() onChange = new EventEmitter<boolean>();\n    @Input() label: string | undefined;\n    @Input() events: {};\n\n    toggleChecked(event: Event) {\n        this.checked = (event.target as HTMLInputElement).checked;\n        this.onChange.emit(this.checked);\n    }\n}\n","<div\r\n  class=\"cax-toggleswitch-container\"\r\n  [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n  <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n  <label\r\n    class=\"cax-toggleswitchmaindiv\"\r\n    [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"toggleChecked($event)\"\r\n      class=\"cax-toggleswitch\"\r\n    />\r\n    <div class=\"cax-toggleswitch-track\"></div>\r\n    <div\r\n      class=\"cax-toggle-thumb\"\r\n      [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"checked\">\r\n        <svg\r\n          width=\"11\"\r\n          height=\"7\"\r\n          viewBox=\"0 0 11 8\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"cax-toggle-icon-active\"\r\n        >\r\n          <path\r\n            d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n            fill=\"#1644e7\"\r\n            stroke=\"#1644e7\"\r\n            stroke-width=\"0.4\"\r\n          />\r\n        </svg>\r\n      </ng-container>\r\n    </div>\r\n  </label>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ToggleSwitchComponent } from './toggleswitch';\n\n@NgModule({\n    declarations: [ToggleSwitchComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [ToggleSwitchComponent]\n})\nexport class ToggleSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAOa,qBAAqB,CAAA;IACrB,IAAI,GAAuB,IAAI,CAAC;IAChC,OAAO,GAAG,KAAK,CAAC;IAChB,QAAQ,GAAG,KAAK,CAAC;IACjB,SAAS,GAAW,eAAe,CAAC;AACnC,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAW,CAAC;AACxC,IAAA,KAAK,CAAqB;AAC1B,IAAA,MAAM,CAAK;AAEpB,IAAA,aAAa,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACpC;uGAZQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,yNCPlC,m4DAgDA,EAAA,MAAA,EAAA,CAAA,wgBAAA,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,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FDzCa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACI,kBAAkB,EAAA,QAAA,EAAA,m4DAAA,EAAA,MAAA,EAAA,CAAA,wgBAAA,CAAA,EAAA,CAAA;8BAKnB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACI,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBACE,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;;;MEJG,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,iBAJZ,qBAAqB,CAAA,EAAA,OAAA,EAAA,CAC1B,YAAY,EAAE,WAAW,aACzB,qBAAqB,CAAA,EAAA,CAAA,CAAA;wGAEtB,kBAAkB,EAAA,OAAA,EAAA,CAHjB,YAAY,EAAE,WAAW,CAAA,EAAA,CAAA,CAAA;;2FAG1B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACnC,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}