@spicainternational/ngx-sds-components 9.1.0 → 9.2.0-beta.0

package/fesm2022/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\nimport { NgIf } from '@angular/common';\n\n@Component({\n    selector: 'sds-page-header',\n    templateUrl: './page-header.component.html',\n    styleUrls: ['./page-header.component.scss'],\n    imports: [NgIf]\n})\nexport class SdsPageHeaderComponent implements OnInit {\n    @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\n    @Input() title: string;\n    @Input() gap: string = \"1rem\";\n\n    constructor() {\n        this.title = '';\n    }\n\n    ngOnInit(): void {}\n}\n","<div\n    class=\"d-flex flex-wrap align-items-center\"\n    [style.margin-bottom]=\"gap\"   \n    >\n    <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\n        {{ title }}\n    </h1>\n\n    <ng-container *ngIf=\"titleContent\">\n        <ng-content select=\"title\"></ng-content>\n    </ng-container>\n\n    <ng-content select=\"titleAppendix\"></ng-content>\n\n    <div class=\"ms-auto\">\n        <ng-content></ng-content>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;AAJuB,QAAA,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE;QAErE,IAAA,CAAA,GAAG,GAAW,MAAM;AAGzB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;IACnB;AAEA,IAAA,QAAQ,KAAU;+GATT,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,ocAkBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXc,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEL,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACI,iBAAiB,EAAA,OAAA,EAGlB,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,ocAAA,EAAA;;sBAGd,YAAY;uBAAC,OAAO;;sBACpB;;sBACA;;;AEZL;;AAEG;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-page-header',\r\n    templateUrl: './page-header.component.html',\r\n    styleUrls: ['./page-header.component.scss'],\r\n    imports: [NgIf]\r\n})\r\nexport class SdsPageHeaderComponent implements OnInit {\r\n    @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\r\n    @Input() title: string;\r\n    @Input() gap: string = \"1rem\";\r\n\r\n    constructor() {\r\n        this.title = '';\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div\r\n    class=\"d-flex flex-wrap align-items-center\"\r\n    [style.margin-bottom]=\"gap\"   \r\n    >\r\n    <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n        {{ title }}\r\n    </h1>\r\n\r\n    <ng-container *ngIf=\"titleContent\">\r\n        <ng-content select=\"title\"></ng-content>\r\n    </ng-container>\r\n\r\n    <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n    <div class=\"ms-auto\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;AAJuB,QAAA,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE;QAErE,IAAA,CAAA,GAAG,GAAW,MAAM;AAGzB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;IACnB;AAEA,IAAA,QAAQ,KAAU;+GATT,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,weAkBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXc,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEL,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACI,iBAAiB,EAAA,OAAA,EAGlB,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,weAAA,EAAA;;sBAGd,YAAY;uBAAC,OAAO;;sBACpB;;sBACA;;;AEZL;;AAEG;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-pane.mjs

@@ -25,11 +25,11 @@ class SdsPaneComponent {
         this.pageChange.emit(this.selectedPage);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsPaneComponent, isStandalone: true, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \n    class=\"pane border-start\"\n    [class]=\"productCssClass\"\n    >\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ms-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon \n                    [icon]=\"closeIcon\" \n                    [fixedWidth]=\"true\"\n                    [size]=\"'sm'\"> \n                </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n\n    <div \n        class=\"pane-header\"\n        [class.border-start]=\"selectedPage\"\n        >\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon \n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n                        [fixedWidth]=\"true\">\n                    </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>    \n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsPaneComponent, isStandalone: true, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"pane border-start\"\r\n    [class]=\"productCssClass\"\r\n    >\r\n    <div \r\n        *ngIf=\"selectedPage\" \r\n        class=\"pane-content\"\r\n        [style.width.rem]=\"contentWidthRem\"\r\n        >\r\n        \r\n        <div class=\"page-header\">\r\n            <div class=\"title\">\r\n                {{selectedPage.title}}\r\n            </div>\r\n\r\n            <button \r\n                class=\"btn btn-stealth ms-auto\"\r\n                (click)=\"hideContent()\"\r\n                >\r\n                <fa-icon \r\n                    [icon]=\"closeIcon\" \r\n                    [fixedWidth]=\"true\"\r\n                    [size]=\"'sm'\"> \r\n                </fa-icon>        \r\n            </button>  \r\n\r\n        </div>\r\n\r\n        <div class=\"page-container\">\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n            >\r\n            </ng-container>            \r\n        </div>\r\n    </div>\r\n\r\n    <div \r\n        class=\"pane-header\"\r\n        [class.border-start]=\"selectedPage\"\r\n        >\r\n        <ul>\r\n            <li \r\n                *ngFor=\"let page of pages\"\r\n                [class.active] = \"selectedPage === page\"\r\n                >\r\n                <div \r\n                    class=\"icon-container\"\r\n                    [title]=\"page.title\"\r\n                    (click) = \"showContent(page)\"\r\n                    >\r\n                    <fa-icon \r\n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n                        [fixedWidth]=\"true\">\r\n                    </fa-icon>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n    </div>    \r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor], template: "<div \n    class=\"pane border-start\"\n    [class]=\"productCssClass\"\n    >\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ms-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon \n                    [icon]=\"closeIcon\" \n                    [fixedWidth]=\"true\"\n                    [size]=\"'sm'\"> \n                </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n\n    <div \n        class=\"pane-header\"\n        [class.border-start]=\"selectedPage\"\n        >\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon \n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n                        [fixedWidth]=\"true\">\n                    </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>    \n</div>" }]
+            args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor], template: "<div \r\n    class=\"pane border-start\"\r\n    [class]=\"productCssClass\"\r\n    >\r\n    <div \r\n        *ngIf=\"selectedPage\" \r\n        class=\"pane-content\"\r\n        [style.width.rem]=\"contentWidthRem\"\r\n        >\r\n        \r\n        <div class=\"page-header\">\r\n            <div class=\"title\">\r\n                {{selectedPage.title}}\r\n            </div>\r\n\r\n            <button \r\n                class=\"btn btn-stealth ms-auto\"\r\n                (click)=\"hideContent()\"\r\n                >\r\n                <fa-icon \r\n                    [icon]=\"closeIcon\" \r\n                    [fixedWidth]=\"true\"\r\n                    [size]=\"'sm'\"> \r\n                </fa-icon>        \r\n            </button>  \r\n\r\n        </div>\r\n\r\n        <div class=\"page-container\">\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n            >\r\n            </ng-container>            \r\n        </div>\r\n    </div>\r\n\r\n    <div \r\n        class=\"pane-header\"\r\n        [class.border-start]=\"selectedPage\"\r\n        >\r\n        <ul>\r\n            <li \r\n                *ngFor=\"let page of pages\"\r\n                [class.active] = \"selectedPage === page\"\r\n                >\r\n                <div \r\n                    class=\"icon-container\"\r\n                    [title]=\"page.title\"\r\n                    (click) = \"showContent(page)\"\r\n                    >\r\n                    <fa-icon \r\n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n                        [fixedWidth]=\"true\">\r\n                    </fa-icon>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n    </div>    \r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { pages: [{
                 type: Input
             }], selectedPage: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-pane.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { isThisSecond } from 'date-fns';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';\n\n@Component({\n    selector: 'sds-pane',\n    templateUrl: './pane.component.html',\n    styleUrls: ['./pane.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor]\n})\nexport class SdsPaneComponent implements OnInit, OnChanges {\n\n    @Input() public pages?: PanePage[];\n    @Input() public selectedPage?: PanePage;\n    @Input() public contentWidthRem: number = 20;\n    @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\n    \n    @Output() pageChange = new EventEmitter();\n\n    public closeIcon = faXmark;\n\n    public productCssClass?: string;\n\n    constructor() {}\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['product']) {\n            this.productCssClass = this.product ? `product-${this.product}` : undefined;  \n        }\n    }\n\n    ngOnInit(): void {}\n\n    public showContent(page: PanePage): void{\n        this.selectedPage = page;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n    public hideContent(): void{\n        this.selectedPage = undefined;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n}\n","<div \n    class=\"pane border-start\"\n    [class]=\"productCssClass\"\n    >\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ms-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon \n                    [icon]=\"closeIcon\" \n                    [fixedWidth]=\"true\"\n                    [size]=\"'sm'\"> \n                </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n\n    <div \n        class=\"pane-header\"\n        [class.border-start]=\"selectedPage\"\n        >\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon \n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n                        [fixedWidth]=\"true\">\n                    </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>    \n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAea,gBAAgB,CAAA;AAazB,IAAA,WAAA,GAAA;QATgB,IAAA,CAAA,eAAe,GAAW,EAAE;AAGlC,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE;QAElC,IAAA,CAAA,SAAS,GAAG,OAAO;IAIX;AACf,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;AACpB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,SAAS;QAC/E;IACJ;AAEA,IAAA,QAAQ,KAAU;AAEX,IAAA,WAAW,CAAC,IAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;IAC3C;IAEO,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;IAC3C;+GA9BS,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf7B,suDA0DM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7CQ,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE/C,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,eAAA,EAGH,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAA,QAAA,EAAA,suDAAA,EAAA;;sBAIxD;;sBACA;;sBACA;;sBACA;;sBAEA;;;AEtBL;;AAEG;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { PanePage } from './pane.model';\r\n\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { isThisSecond } from 'date-fns';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-pane',\r\n    templateUrl: './pane.component.html',\r\n    styleUrls: ['./pane.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor]\r\n})\r\nexport class SdsPaneComponent implements OnInit, OnChanges {\r\n\r\n    @Input() public pages?: PanePage[];\r\n    @Input() public selectedPage?: PanePage;\r\n    @Input() public contentWidthRem: number = 20;\r\n    @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\r\n    \r\n    @Output() pageChange = new EventEmitter();\r\n\r\n    public closeIcon = faXmark;\r\n\r\n    public productCssClass?: string;\r\n\r\n    constructor() {}\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['product']) {\r\n            this.productCssClass = this.product ? `product-${this.product}` : undefined;  \r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public showContent(page: PanePage): void{\r\n        this.selectedPage = page;\r\n        this.pageChange.emit(this.selectedPage);\r\n    }\r\n\r\n    public hideContent(): void{\r\n        this.selectedPage = undefined;\r\n        this.pageChange.emit(this.selectedPage);\r\n    }\r\n\r\n}\r\n","<div \r\n    class=\"pane border-start\"\r\n    [class]=\"productCssClass\"\r\n    >\r\n    <div \r\n        *ngIf=\"selectedPage\" \r\n        class=\"pane-content\"\r\n        [style.width.rem]=\"contentWidthRem\"\r\n        >\r\n        \r\n        <div class=\"page-header\">\r\n            <div class=\"title\">\r\n                {{selectedPage.title}}\r\n            </div>\r\n\r\n            <button \r\n                class=\"btn btn-stealth ms-auto\"\r\n                (click)=\"hideContent()\"\r\n                >\r\n                <fa-icon \r\n                    [icon]=\"closeIcon\" \r\n                    [fixedWidth]=\"true\"\r\n                    [size]=\"'sm'\"> \r\n                </fa-icon>        \r\n            </button>  \r\n\r\n        </div>\r\n\r\n        <div class=\"page-container\">\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n            >\r\n            </ng-container>            \r\n        </div>\r\n    </div>\r\n\r\n    <div \r\n        class=\"pane-header\"\r\n        [class.border-start]=\"selectedPage\"\r\n        >\r\n        <ul>\r\n            <li \r\n                *ngFor=\"let page of pages\"\r\n                [class.active] = \"selectedPage === page\"\r\n                >\r\n                <div \r\n                    class=\"icon-container\"\r\n                    [title]=\"page.title\"\r\n                    (click) = \"showContent(page)\"\r\n                    >\r\n                    <fa-icon \r\n                        [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n                        [fixedWidth]=\"true\">\r\n                    </fa-icon>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n    </div>    \r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAea,gBAAgB,CAAA;AAazB,IAAA,WAAA,GAAA;QATgB,IAAA,CAAA,eAAe,GAAW,EAAE;AAGlC,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE;QAElC,IAAA,CAAA,SAAS,GAAG,OAAO;IAIX;AACf,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;AACpB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,SAAS;QAC/E;IACJ;AAEA,IAAA,QAAQ,KAAU;AAEX,IAAA,WAAW,CAAC,IAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;IAC3C;IAEO,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;IAC3C;+GA9BS,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf7B,01DA0DM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7CQ,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE/C,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,eAAA,EAGH,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAA,QAAA,EAAA,01DAAA,EAAA;;sBAIxD;;sBACA;;sBACA;;sBACA;;sBAEA;;;AEtBL;;AAEG;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs

@@ -72,7 +72,7 @@ class SdsQuickInfoComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsQuickInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsQuickInfoComponent, isStandalone: true, selector: "sds-quick-info", inputs: { popoverMaxWidth: "popoverMaxWidth", popoverMinWidth: "popoverMinWidth", popoverWidth: "popoverWidth", showDelay: "showDelay", showEventName: "showEventName", hideDelay: "hideDelay", hideEventName: "hideEventName", mode: "mode", animation: "animation", showPopoverArrow: "showPopoverArrow", infoIcon: "infoIcon", popoverPosition: "popoverPosition" }, outputs: { hide: "hide", show: "show" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "buttonElementRef", first: true, predicate: ["popoverTarget"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #popoverTarget\n    class=\"d-inline-flex\">\n\n    <fa-icon *ngIf=\"!customContent\"\n        [icon]=\"infoIcon\"\n    > </fa-icon>\n\n    <ng-container *ngIf=\"customContent\" >\n        <ng-content select=\"customContent\"></ng-content>\n    </ng-container> \n</div>\n\n<dx-popover\n    #popover\n    class=\"d-inline-block\"\n    [target]=\"buttonElementRef?.nativeElement\"\n    [maxWidth]=\"popoverMaxWidth\"\n    [minWidth]=\"popoverMinWidth\"\n    [width]=\"popoverWidth\"\n    [showEvent]=\"showEvent\"\n    [hideEvent]=\"hideEvent\"\n    (onHiding)=\"onHiding($event)\"\n    (onShown)=\"onShown()\"\n    (onHidden)=\"onHidden()\"\n    [animation]=\"animation ?? {}\"\n    [position]=\"popoverPosition ?? {}\"\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n    <ng-content></ng-content>\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsQuickInfoComponent, isStandalone: true, selector: "sds-quick-info", inputs: { popoverMaxWidth: "popoverMaxWidth", popoverMinWidth: "popoverMinWidth", popoverWidth: "popoverWidth", showDelay: "showDelay", showEventName: "showEventName", hideDelay: "hideDelay", hideEventName: "hideEventName", mode: "mode", animation: "animation", showPopoverArrow: "showPopoverArrow", infoIcon: "infoIcon", popoverPosition: "popoverPosition" }, outputs: { hide: "hide", show: "show" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "buttonElementRef", first: true, predicate: ["popoverTarget"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #popoverTarget\r\n    class=\"d-inline-flex\">\r\n\r\n    <fa-icon *ngIf=\"!customContent\"\r\n        [icon]=\"infoIcon\"\r\n    > </fa-icon>\r\n\r\n    <ng-container *ngIf=\"customContent\" >\r\n        <ng-content select=\"customContent\"></ng-content>\r\n    </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    class=\"d-inline-block\"\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    [minWidth]=\"popoverMinWidth\"\r\n    [width]=\"popoverWidth\"\r\n    [showEvent]=\"showEvent\"\r\n    [hideEvent]=\"hideEvent\"\r\n    (onHiding)=\"onHiding($event)\"\r\n    (onShown)=\"onShown()\"\r\n    (onHidden)=\"onHidden()\"\r\n    [animation]=\"animation ?? {}\"\r\n    [position]=\"popoverPosition ?? {}\"\r\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsQuickInfoComponent, decorators: [{
             type: Component,
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         NgIf,
                         FaIconComponent,
                         DxPopoverModule,
-                    ], template: "<div #popoverTarget\n    class=\"d-inline-flex\">\n\n    <fa-icon *ngIf=\"!customContent\"\n        [icon]=\"infoIcon\"\n    > </fa-icon>\n\n    <ng-container *ngIf=\"customContent\" >\n        <ng-content select=\"customContent\"></ng-content>\n    </ng-container> \n</div>\n\n<dx-popover\n    #popover\n    class=\"d-inline-block\"\n    [target]=\"buttonElementRef?.nativeElement\"\n    [maxWidth]=\"popoverMaxWidth\"\n    [minWidth]=\"popoverMinWidth\"\n    [width]=\"popoverWidth\"\n    [showEvent]=\"showEvent\"\n    [hideEvent]=\"hideEvent\"\n    (onHiding)=\"onHiding($event)\"\n    (onShown)=\"onShown()\"\n    (onHidden)=\"onHidden()\"\n    [animation]=\"animation ?? {}\"\n    [position]=\"popoverPosition ?? {}\"\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n    <ng-content></ng-content>\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"] }]
+                    ], template: "<div #popoverTarget\r\n    class=\"d-inline-flex\">\r\n\r\n    <fa-icon *ngIf=\"!customContent\"\r\n        [icon]=\"infoIcon\"\r\n    > </fa-icon>\r\n\r\n    <ng-container *ngIf=\"customContent\" >\r\n        <ng-content select=\"customContent\"></ng-content>\r\n    </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    class=\"d-inline-block\"\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    [minWidth]=\"popoverMinWidth\"\r\n    [width]=\"popoverWidth\"\r\n    [showEvent]=\"showEvent\"\r\n    [hideEvent]=\"hideEvent\"\r\n    (onHiding)=\"onHiding($event)\"\r\n    (onShown)=\"onShown()\"\r\n    (onHidden)=\"onHidden()\"\r\n    [animation]=\"animation ?? {}\"\r\n    [position]=\"popoverPosition ?? {}\"\r\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { popoverMaxWidth: [{
                 type: Input
             }], popoverMinWidth: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-quick-info.mjs","sources":["../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.ts","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.html","../../../projects/ngx-sds-components/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    Output,\n    SimpleChanges,\n    ViewChild,\n} from '@angular/core';\nimport { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\n\nimport { DxPopoverComponent } from 'devextreme-angular';\nimport { PopoverAnimation } from './quick-info.model';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf } from '@angular/common';\n\n\n@Component({\n    selector: 'sds-quick-info',\n    templateUrl: './quick-info.component.html',\n    styleUrls: ['./quick-info.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        NgIf,\n        FaIconComponent,\n        DxPopoverModule,\n    ]\n})\nexport class SdsQuickInfoComponent implements OnChanges {\n    @Input() popoverMaxWidth: number | (() => string | number) | string = '20rem';\n    @Input() popoverMinWidth: number | (() => string | number) | string = '';\n    @Input() popoverWidth: number | (() => string | number) | string = '';\n    @Input() showDelay?: number;\n    @Input() showEventName: string = 'dxhoverstart';\n    @Input() hideDelay?: number;\n    @Input() hideEventName: string = 'dxhoverend';\n    @Input() mode: 'default' | 'hint' = 'default';\n    @Input() animation: PopoverAnimation | undefined;\n    @Input() showPopoverArrow: boolean = true;\n    @Input() infoIcon: IconProp = faInfoCircle;\n    @Input() popoverPosition: string | any;\n\n    @Output() hide = new EventEmitter();\n    @Output() show = new EventEmitter();\n\n    @ViewChild('popover', { static: false }) private _popover: DxPopoverComponent | undefined;\n    @ViewChild('popoverTarget', { read: ElementRef, static: true }) public buttonElementRef?: ElementRef;\n    @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\n\n    public hideEvent: string | {\n        delay?: number;\n        name?: string;\n    };\n\n    public showEvent: string | {\n        delay?: number;\n        name?: string;\n    };\n\n    private _forceHide = false;\n\n    constructor() {\n        this.showEvent = { name: this.showEventName, delay: 200 };\n        this.hideEvent = { name: this.hideEventName, delay: 200 };\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['showDelay'] || changes['showEventName']) {\n            this.setShowEvent();\n        } else if (changes['hideDelay'] || changes['hideEventName']) {\n            this.setHideEvent();\n        }\n    }\n\n    onHiding(e: any) {\n        if (!this._forceHide && this.mode === 'default') {\n            const popoverContent = e.component.content().parentNode;\n            const isMouseInsidePopover = popoverContent.matches(':hover');\n            e.cancel = isMouseInsidePopover;\n\n            popoverContent.addEventListener('mouseleave', () => {\n                e.component.hide();\n            });\n        }\n    }\n\n    onHidden() {\n        this.hide.emit();\n    }\n\n    onShown() {\n        this.show.emit();\n    }\n\n    public showInfo() {\n        if (this._popover) {\n            this._popover.instance.show();\n        }\n    }\n\n    public hideInfo() {\n        if (this._popover) {\n            this._forceHide = true;\n            this._popover.instance.hide();\n            this._forceHide = false;\n        }\n    }\n\n    private setShowEvent(): void {\n        this.showEvent = {\n            name: this.showEventName,\n            delay: this.showDelay ?? 200,\n        };\n    }\n\n    private setHideEvent(): void {\n        this.hideEvent = {\n            name: this.hideEventName,\n            delay: this.hideDelay ?? 200,\n        };\n    }\n}\n","<div #popoverTarget\n    class=\"d-inline-flex\">\n\n    <fa-icon *ngIf=\"!customContent\"\n        [icon]=\"infoIcon\"\n    > </fa-icon>\n\n    <ng-container *ngIf=\"customContent\" >\n        <ng-content select=\"customContent\"></ng-content>\n    </ng-container> \n</div>\n\n<dx-popover\n    #popover\n    class=\"d-inline-block\"\n    [target]=\"buttonElementRef?.nativeElement\"\n    [maxWidth]=\"popoverMaxWidth\"\n    [minWidth]=\"popoverMinWidth\"\n    [width]=\"popoverWidth\"\n    [showEvent]=\"showEvent\"\n    [hideEvent]=\"hideEvent\"\n    (onHiding)=\"onHiding($event)\"\n    (onShown)=\"onShown()\"\n    (onHidden)=\"onHidden()\"\n    [animation]=\"animation ?? {}\"\n    [position]=\"popoverPosition ?? {}\"\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n    <ng-content></ng-content>\n</dx-popover>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-quick-info.mjs","sources":["../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.ts","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.html","../../../projects/ngx-sds-components/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ContentChild,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Input,\r\n    OnChanges,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n} from '@angular/core';\r\nimport { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { DxPopoverComponent } from 'devextreme-angular';\r\nimport { PopoverAnimation } from './quick-info.model';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n\r\n@Component({\r\n    selector: 'sds-quick-info',\r\n    templateUrl: './quick-info.component.html',\r\n    styleUrls: ['./quick-info.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [\r\n        NgIf,\r\n        FaIconComponent,\r\n        DxPopoverModule,\r\n    ]\r\n})\r\nexport class SdsQuickInfoComponent implements OnChanges {\r\n    @Input() popoverMaxWidth: number | (() => string | number) | string = '20rem';\r\n    @Input() popoverMinWidth: number | (() => string | number) | string = '';\r\n    @Input() popoverWidth: number | (() => string | number) | string = '';\r\n    @Input() showDelay?: number;\r\n    @Input() showEventName: string = 'dxhoverstart';\r\n    @Input() hideDelay?: number;\r\n    @Input() hideEventName: string = 'dxhoverend';\r\n    @Input() mode: 'default' | 'hint' = 'default';\r\n    @Input() animation: PopoverAnimation | undefined;\r\n    @Input() showPopoverArrow: boolean = true;\r\n    @Input() infoIcon: IconProp = faInfoCircle;\r\n    @Input() popoverPosition: string | any;\r\n\r\n    @Output() hide = new EventEmitter();\r\n    @Output() show = new EventEmitter();\r\n\r\n    @ViewChild('popover', { static: false }) private _popover: DxPopoverComponent | undefined;\r\n    @ViewChild('popoverTarget', { read: ElementRef, static: true }) public buttonElementRef?: ElementRef;\r\n    @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\r\n\r\n    public hideEvent: string | {\r\n        delay?: number;\r\n        name?: string;\r\n    };\r\n\r\n    public showEvent: string | {\r\n        delay?: number;\r\n        name?: string;\r\n    };\r\n\r\n    private _forceHide = false;\r\n\r\n    constructor() {\r\n        this.showEvent = { name: this.showEventName, delay: 200 };\r\n        this.hideEvent = { name: this.hideEventName, delay: 200 };\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['showDelay'] || changes['showEventName']) {\r\n            this.setShowEvent();\r\n        } else if (changes['hideDelay'] || changes['hideEventName']) {\r\n            this.setHideEvent();\r\n        }\r\n    }\r\n\r\n    onHiding(e: any) {\r\n        if (!this._forceHide && this.mode === 'default') {\r\n            const popoverContent = e.component.content().parentNode;\r\n            const isMouseInsidePopover = popoverContent.matches(':hover');\r\n            e.cancel = isMouseInsidePopover;\r\n\r\n            popoverContent.addEventListener('mouseleave', () => {\r\n                e.component.hide();\r\n            });\r\n        }\r\n    }\r\n\r\n    onHidden() {\r\n        this.hide.emit();\r\n    }\r\n\r\n    onShown() {\r\n        this.show.emit();\r\n    }\r\n\r\n    public showInfo() {\r\n        if (this._popover) {\r\n            this._popover.instance.show();\r\n        }\r\n    }\r\n\r\n    public hideInfo() {\r\n        if (this._popover) {\r\n            this._forceHide = true;\r\n            this._popover.instance.hide();\r\n            this._forceHide = false;\r\n        }\r\n    }\r\n\r\n    private setShowEvent(): void {\r\n        this.showEvent = {\r\n            name: this.showEventName,\r\n            delay: this.showDelay ?? 200,\r\n        };\r\n    }\r\n\r\n    private setHideEvent(): void {\r\n        this.hideEvent = {\r\n            name: this.hideEventName,\r\n            delay: this.hideDelay ?? 200,\r\n        };\r\n    }\r\n}\r\n","<div #popoverTarget\r\n    class=\"d-inline-flex\">\r\n\r\n    <fa-icon *ngIf=\"!customContent\"\r\n        [icon]=\"infoIcon\"\r\n    > </fa-icon>\r\n\r\n    <ng-container *ngIf=\"customContent\" >\r\n        <ng-content select=\"customContent\"></ng-content>\r\n    </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    class=\"d-inline-block\"\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    [minWidth]=\"popoverMinWidth\"\r\n    [width]=\"popoverWidth\"\r\n    [showEvent]=\"showEvent\"\r\n    [hideEvent]=\"hideEvent\"\r\n    (onHiding)=\"onHiding($event)\"\r\n    (onShown)=\"onShown()\"\r\n    (onHidden)=\"onHidden()\"\r\n    [animation]=\"animation ?? {}\"\r\n    [position]=\"popoverPosition ?? {}\"\r\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n    <ng-content></ng-content>\r\n</dx-popover>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-ripple.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-ripple.mjs","sources":["../../../projects/ngx-sds-components/src/lib/ripple/ripple.directive.ts","../../../projects/ngx-sds-components/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.ts"],"sourcesContent":["import {\n    Directive,\n    ElementRef,\n    HostBinding,\n    HostListener,\n    Input,\n    OnDestroy,\n    Renderer2,\n} from '@angular/core';\n\n@Directive({\n    selector: '[sdsRipple]',\n    standalone: true,\n})\nexport class SdsRippleDirective implements OnDestroy {\n    @Input() sdsRippleColor: string = 'rgba(255, 255, 255, 0.5)';\n    @Input() sdsRippleDuration: number = 600;\n    @Input() sdsRippleMaxConcurrent: number = 3;\n\n    @HostBinding('class.sds-ripple-container') addContainer = true;\n    @HostBinding('style.position') position = 'relative';\n    @HostBinding('style.overflow') overflow = 'hidden';\n\n    private activeRipples: HTMLElement[] = [];\n    private touchTimeout: any;\n\n    constructor(\n        private el: ElementRef,\n        private renderer: Renderer2\n    ) {}\n\n    @HostListener('touchstart', ['$event'])\n    onTouchStart(event: TouchEvent) {\n        if (event.touches.length > 0) {\n            const touch = event.touches[0];\n            this.createRipple(touch.clientX, touch.clientY);\n        }\n    }\n\n    @HostListener('mousedown', ['$event'])\n    onMouseDown(event: MouseEvent) {\n        // Only trigger on left click\n        if (event.button !== 0) return;\n        \n        this.createRipple(event.clientX, event.clientY);\n    }\n\n    private createRipple(clientX: number, clientY: number) {\n        // Remove oldest ripple if at max capacity\n        if (this.activeRipples.length >= this.sdsRippleMaxConcurrent) {\n            const oldestRipple = this.activeRipples.shift();\n            if (oldestRipple?.parentNode) {\n                this.renderer.removeChild(this.el.nativeElement, oldestRipple);\n            }\n        }\n\n        const ripple = this.renderer.createElement('span');\n        this.renderer.addClass(ripple, 'sds-ripple');\n\n        const rect = this.el.nativeElement.getBoundingClientRect();\n        const size = Math.max(rect.width, rect.height) * 2;\n        const x = clientX - rect.left - size / 2;\n        const y = clientY - rect.top - size / 2;\n\n        const duration = Math.min(this.sdsRippleDuration, 1200);\n\n        this.renderer.setStyle(ripple, 'width', `${size}px`);\n        this.renderer.setStyle(ripple, 'height', `${size}px`);\n        this.renderer.setStyle(ripple, 'left', `${x}px`);\n        this.renderer.setStyle(ripple, 'top', `${y}px`);\n        this.renderer.setStyle(ripple, 'background-color', this.sdsRippleColor);\n        this.renderer.setStyle(ripple, 'animation-duration', `${duration}ms`);\n\n        this.renderer.appendChild(this.el.nativeElement, ripple);\n        this.activeRipples.push(ripple);\n\n        setTimeout(() => {\n            if (ripple.parentNode) {\n                this.renderer.removeChild(this.el.nativeElement, ripple);\n            }\n            const index = this.activeRipples.indexOf(ripple);\n            if (index > -1) {\n                this.activeRipples.splice(index, 1);\n            }\n        }, duration);\n    }\n\n    ngOnDestroy() {\n        // Clean up any remaining ripples\n        this.activeRipples.forEach(ripple => {\n            if (ripple.parentNode) {\n                this.renderer.removeChild(this.el.nativeElement, ripple);\n            }\n        });\n        this.activeRipples = [];\n        \n        if (this.touchTimeout) {\n            clearTimeout(this.touchTimeout);\n        }\n    }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-ripple.mjs","sources":["../../../projects/ngx-sds-components/src/lib/ripple/ripple.directive.ts","../../../projects/ngx-sds-components/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.ts"],"sourcesContent":["import {\r\n    Directive,\r\n    ElementRef,\r\n    HostBinding,\r\n    HostListener,\r\n    Input,\r\n    OnDestroy,\r\n    Renderer2,\r\n} from '@angular/core';\r\n\r\n@Directive({\r\n    selector: '[sdsRipple]',\r\n    standalone: true,\r\n})\r\nexport class SdsRippleDirective implements OnDestroy {\r\n    @Input() sdsRippleColor: string = 'rgba(255, 255, 255, 0.5)';\r\n    @Input() sdsRippleDuration: number = 600;\r\n    @Input() sdsRippleMaxConcurrent: number = 3;\r\n\r\n    @HostBinding('class.sds-ripple-container') addContainer = true;\r\n    @HostBinding('style.position') position = 'relative';\r\n    @HostBinding('style.overflow') overflow = 'hidden';\r\n\r\n    private activeRipples: HTMLElement[] = [];\r\n    private touchTimeout: any;\r\n\r\n    constructor(\r\n        private el: ElementRef,\r\n        private renderer: Renderer2\r\n    ) {}\r\n\r\n    @HostListener('touchstart', ['$event'])\r\n    onTouchStart(event: TouchEvent) {\r\n        if (event.touches.length > 0) {\r\n            const touch = event.touches[0];\r\n            this.createRipple(touch.clientX, touch.clientY);\r\n        }\r\n    }\r\n\r\n    @HostListener('mousedown', ['$event'])\r\n    onMouseDown(event: MouseEvent) {\r\n        // Only trigger on left click\r\n        if (event.button !== 0) return;\r\n        \r\n        this.createRipple(event.clientX, event.clientY);\r\n    }\r\n\r\n    private createRipple(clientX: number, clientY: number) {\r\n        // Remove oldest ripple if at max capacity\r\n        if (this.activeRipples.length >= this.sdsRippleMaxConcurrent) {\r\n            const oldestRipple = this.activeRipples.shift();\r\n            if (oldestRipple?.parentNode) {\r\n                this.renderer.removeChild(this.el.nativeElement, oldestRipple);\r\n            }\r\n        }\r\n\r\n        const ripple = this.renderer.createElement('span');\r\n        this.renderer.addClass(ripple, 'sds-ripple');\r\n\r\n        const rect = this.el.nativeElement.getBoundingClientRect();\r\n        const size = Math.max(rect.width, rect.height) * 2;\r\n        const x = clientX - rect.left - size / 2;\r\n        const y = clientY - rect.top - size / 2;\r\n\r\n        const duration = Math.min(this.sdsRippleDuration, 1200);\r\n\r\n        this.renderer.setStyle(ripple, 'width', `${size}px`);\r\n        this.renderer.setStyle(ripple, 'height', `${size}px`);\r\n        this.renderer.setStyle(ripple, 'left', `${x}px`);\r\n        this.renderer.setStyle(ripple, 'top', `${y}px`);\r\n        this.renderer.setStyle(ripple, 'background-color', this.sdsRippleColor);\r\n        this.renderer.setStyle(ripple, 'animation-duration', `${duration}ms`);\r\n\r\n        this.renderer.appendChild(this.el.nativeElement, ripple);\r\n        this.activeRipples.push(ripple);\r\n\r\n        setTimeout(() => {\r\n            if (ripple.parentNode) {\r\n                this.renderer.removeChild(this.el.nativeElement, ripple);\r\n            }\r\n            const index = this.activeRipples.indexOf(ripple);\r\n            if (index > -1) {\r\n                this.activeRipples.splice(index, 1);\r\n            }\r\n        }, duration);\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        // Clean up any remaining ripples\r\n        this.activeRipples.forEach(ripple => {\r\n            if (ripple.parentNode) {\r\n                this.renderer.removeChild(this.el.nativeElement, ripple);\r\n            }\r\n        });\r\n        this.activeRipples = [];\r\n        \r\n        if (this.touchTimeout) {\r\n            clearTimeout(this.touchTimeout);\r\n        }\r\n    }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs

@@ -191,7 +191,7 @@ class SdsSegmentedControlComponent {
                 useExisting: SdsSegmentedControlComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "clipPathContainerRef", first: true, predicate: ["clipPathContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    #containerRef\n    class=\"sds-segmented-control-container\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\n    [ngClass]=\"{\n        'disabled': disabled,\n        'sds-segmented-control-primary': style == 'primary',\n        'sds-segmented-control-inverted': style == 'inverted',\n        'clip-path-enabled': enableAnimation\n    }\">\n\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\n        class=\"segment\"\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\n        role=\"button\"\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\n        [class.selected]=\"item[valueExpr] == value\"\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n        (click)=\"selectItem(item, $event)\"\n        (keydown)=\"onSegmentKeydown($event, item)\">\n\n        <div class=\"sds-flex-row-center gap-2\">\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n        </div>\n    </div>\n\n    <div *ngIf=\"enableAnimation\"\n         class=\"sds-clip-path-overlay\"\n         #clipPathContainer\n         aria-hidden=\"true\">\n        <div *ngFor=\"let item of items; let last = last;\"\n            class=\"segment segment-overlay\"\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\n            [tabIndex]=\"-1\">\n\n            <div class=\"sds-flex-row-center gap-2\">\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container:has(:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bs-primary)}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container .segment .sds-flex-row-center{display:inline-flex}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container .segment:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--bs-primary);border-radius:4px}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-primary .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-primary),inset 0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-primary:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-primary),0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.sds-segmented-control-inverted .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-gray-300),inset 0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-inverted:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-gray-300),0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "clipPathContainerRef", first: true, predicate: ["clipPathContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    #containerRef\r\n    class=\"sds-segmented-control-container\"\r\n    role=\"group\"\r\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted',\r\n        'clip-path-enabled': enableAnimation\r\n    }\">\r\n\r\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\r\n        class=\"segment\"\r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        role=\"button\"\r\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\r\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\r\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item, $event)\"\r\n        (keydown)=\"onSegmentKeydown($event, item)\">\r\n\r\n        <div class=\"sds-flex-row-center gap-2\">\r\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"enableAnimation\"\r\n         class=\"sds-clip-path-overlay\"\r\n         #clipPathContainer\r\n         aria-hidden=\"true\">\r\n        <div *ngFor=\"let item of items; let last = last;\"\r\n            class=\"segment segment-overlay\"\r\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n            [tabIndex]=\"-1\">\r\n\r\n            <div class=\"sds-flex-row-center gap-2\">\r\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container:has(:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bs-primary)}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container .segment .sds-flex-row-center{display:inline-flex}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container .segment:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--bs-primary);border-radius:4px}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-primary .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-primary),inset 0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-primary:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-primary),0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.sds-segmented-control-inverted .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-gray-300),inset 0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-inverted:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-gray-300),0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsSegmentedControlComponent, decorators: [{
             type: Component,
@@ -206,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                             useExisting: SdsSegmentedControlComponent,
                             multi: true,
                         },
-                    ], template: "<div\n    #containerRef\n    class=\"sds-segmented-control-container\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\n    [ngClass]=\"{\n        'disabled': disabled,\n        'sds-segmented-control-primary': style == 'primary',\n        'sds-segmented-control-inverted': style == 'inverted',\n        'clip-path-enabled': enableAnimation\n    }\">\n\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\n        class=\"segment\"\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\n        role=\"button\"\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\n        [class.selected]=\"item[valueExpr] == value\"\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n        (click)=\"selectItem(item, $event)\"\n        (keydown)=\"onSegmentKeydown($event, item)\">\n\n        <div class=\"sds-flex-row-center gap-2\">\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n        </div>\n    </div>\n\n    <div *ngIf=\"enableAnimation\"\n         class=\"sds-clip-path-overlay\"\n         #clipPathContainer\n         aria-hidden=\"true\">\n        <div *ngFor=\"let item of items; let last = last;\"\n            class=\"segment segment-overlay\"\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\n            [tabIndex]=\"-1\">\n\n            <div class=\"sds-flex-row-center gap-2\">\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container:has(:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bs-primary)}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container .segment .sds-flex-row-center{display:inline-flex}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container .segment:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--bs-primary);border-radius:4px}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-primary .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-primary),inset 0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-primary:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-primary),0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.sds-segmented-control-inverted .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-gray-300),inset 0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-inverted:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-gray-300),0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"] }]
+                    ], template: "<div\r\n    #containerRef\r\n    class=\"sds-segmented-control-container\"\r\n    role=\"group\"\r\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted',\r\n        'clip-path-enabled': enableAnimation\r\n    }\">\r\n\r\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\r\n        class=\"segment\"\r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        role=\"button\"\r\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\r\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\r\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item, $event)\"\r\n        (keydown)=\"onSegmentKeydown($event, item)\">\r\n\r\n        <div class=\"sds-flex-row-center gap-2\">\r\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"enableAnimation\"\r\n         class=\"sds-clip-path-overlay\"\r\n         #clipPathContainer\r\n         aria-hidden=\"true\">\r\n        <div *ngFor=\"let item of items; let last = last;\"\r\n            class=\"segment segment-overlay\"\r\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n            [tabIndex]=\"-1\">\r\n\r\n            <div class=\"sds-flex-row-center gap-2\">\r\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container:has(:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bs-primary)}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none;outline:none;transition:box-shadow .15s ease}.sds-segmented-control-container .segment .sds-flex-row-center{display:inline-flex}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container .segment:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--bs-primary);border-radius:4px}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-primary .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-primary),inset 0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-primary:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-primary),0 0 0 4px #fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.sds-segmented-control-inverted .segment:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-gray-300),inset 0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-inverted:has(:focus-visible){box-shadow:0 0 0 2px var(--bs-gray-300),0 0 0 4px var(--bs-primary)}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], value: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Injector,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    SimpleChanges,\n    ViewChild,\n    inject,\n    input,\n    viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgClass, NgFor, NgIf } from '@angular/common';\n\n@Component({\n    selector: 'sds-segmented-control',\n    templateUrl: './segmented-control.component.html',\n    styleUrls: ['./segmented-control.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        NgClass,\n        NgFor,\n        NgIf,\n        FaIconComponent,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: SdsSegmentedControlComponent,\n            multi: true,\n        },\n    ]\n})\nexport class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges, ControlValueAccessor {\n\n\n    // #region Dependencies\n    private _cdr = inject(ChangeDetectorRef);\n    private _injector = inject(Injector);\n    // #endregion Dependencies\n\n    // #region Inputs\n    @Input() items: any[] | undefined;\n    @Input() value: any;\n    @Input() valueExpr = 'value';\n    @Input() displayExpr: string | undefined = 'text';\n    @Input() iconExpr: string | undefined;\n    @Input() tooltipExpr: string | undefined;\n    @Input() idExpr: string | undefined;\n    @Input() disabled: boolean = false;\n    @Input() style: 'default' | 'primary' | 'inverted' = 'default';\n    @Input() segmentPadding: 'tight' | 'loose' = 'loose';\n    @Input() enableAnimation: boolean = true;\n    public ariaLabel = input<string | undefined>();\n    // #endregion Inputs\n\n    // #region Outputs\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\n    // #endregion Outputs\n\n    // #region DOM references\n    @ViewChild('clipPathContainer') clipPathContainerRef!: ElementRef<HTMLDivElement>;\n    protected containerRef = viewChild<ElementRef<HTMLDivElement>>('containerRef');\n    // #endregion DOM references\n\n    // #region ControlValueAccessor private state\n    private _ngControl: NgControl | null = null;\n    private _onChange: (value: any) => void = () => {};\n    private _onTouched: () => void = () => {};\n    // #endregion ControlValueAccessor private state\n\n    ngOnInit() {\n        /**\n         * Don't inject ngControl at the constructor, because it causes Cyclic Dependency.\n         * We can inject it via Injector to avoid the error.\n         */\n        this._ngControl = this._injector.get(NgControl, null);\n\n        if (this._ngControl !== null) {\n            this._ngControl.valueAccessor = this;\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.enableAnimation) {\n            this.updateClipPath();\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if ((changes['value'] || changes['enableClipPathAnimation']) && this.enableAnimation) {\n            // Use a longer timeout to ensure the DOM is updated\n            setTimeout(() => this.updateClipPath(), 50);\n        }\n    }\n\n    // #region ControlValueAccessor implementation\n    public writeValue(value: any): void {\n        if (value !== undefined && value !== null) {\n            this.value = value;\n            this._cdr.markForCheck();\n        }\n    }\n\n    public registerOnChange(fn: (value: any) => void): void {\n        this._onChange = fn;\n    }\n\n    public registerOnTouched(fn: () => void): void {\n        this._onTouched = fn;\n    }\n\n    public setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this._cdr.markForCheck();\n    }\n    // #endregion ControlValueAccessor implementation\n\n    public selectItem(item: any, event: MouseEvent): void {\n        event.stopPropagation();\n\n        if (!this.disabled) {\n            this.value = item[this.valueExpr];\n            this.valueChange.emit(this.value);\n            this.itemChange.emit(item);\n\n            // Notify form control if in form context\n            if (this._ngControl) {\n                this._onChange(this.value);\n                this._onTouched();\n            }\n\n            if (this.enableAnimation) {\n                this._cdr.detectChanges();\n                this.updateClipPath();\n            }\n        }\n    }\n\n    public onSegmentKeydown(event: KeyboardEvent, item: any): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const currentIndex = this.getItemIndex(item);\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                nextIndex = currentIndex > 0 ? currentIndex - 1 : (this.items?.length ?? 1) - 1;\n                break;\n            case 'ArrowRight':\n                event.preventDefault();\n                nextIndex = currentIndex < (this.items?.length ?? 1) - 1 ? currentIndex + 1 : 0;\n                break;\n            case 'Home':\n                event.preventDefault();\n                nextIndex = 0;\n                break;\n            case 'End':\n                event.preventDefault();\n                nextIndex = (this.items?.length ?? 1) - 1;\n                break;\n        }\n\n        if (nextIndex !== null && this.items) {\n            this.navigateToItem(nextIndex);\n        }\n    }\n\n    public getSegmentAriaLabel(item: any, index: number): string | null {\n        // Only set an explicit aria-label when visible text is intentionally omitted.\n        if (this.displayExpr) {\n            return null;\n        }\n\n        if (this.tooltipExpr && item?.[this.tooltipExpr]) {\n            return String(item[this.tooltipExpr]);\n        }\n\n        if (item?.[this.valueExpr] !== undefined && item?.[this.valueExpr] !== null) {\n            return String(item[this.valueExpr]);\n        }\n\n        return `Segment option ${index + 1}`;\n    }\n\n    private getItemIndex(item: any): number {\n        return this.items?.indexOf(item) ?? -1;\n    }\n\n    private navigateToItem(index: number): void {\n        if (!this.items || index < 0 || index >= this.items.length) {\n            return;\n        }\n\n        const item = this.items[index];\n        this.value = item[this.valueExpr];\n        this.valueChange.emit(this.value);\n        this.itemChange.emit(item);\n\n        // Notify form control if in form context\n        if (this._ngControl) {\n            this._onChange(this.value);\n            this._onTouched();\n        }\n\n        if (this.enableAnimation) {\n            this._cdr.detectChanges();\n            this.updateClipPath();\n        }\n\n        // Focus the segment element after change detection\n        this.focusSegmentElement(index);\n    }\n\n    private focusSegmentElement(index: number): void {\n        // Use setTimeout to ensure DOM is updated before focusing\n        setTimeout(() => {\n            const segmentElements = this.containerRef()?.nativeElement.querySelectorAll('.segment:not(.segment-overlay)');\n            if (segmentElements && segmentElements[index]) {\n                (segmentElements[index] as HTMLElement).focus();\n            }\n        }, 0);\n    }\n\n    private updateClipPath() {\n        setTimeout(() => {\n            const container = this.clipPathContainerRef?.nativeElement;\n            if (!container) return;\n\n            const activeSegment = container.parentElement?.querySelector(\n                `.segment.selected:not(.segment-overlay)`\n            ) as HTMLElement;\n\n            if (activeSegment && container.parentElement) {\n                const parentElement = container.parentElement;\n\n                const computedStyle = window.getComputedStyle(parentElement);\n                const paddingLeft = parseFloat(computedStyle.paddingLeft);\n\n                const offsetLeft = activeSegment.offsetLeft - paddingLeft;\n                const offsetWidth = activeSegment.offsetWidth;\n                const overlayWidth = container.offsetWidth;\n\n                // Only update if we have valid dimensions\n                if (offsetWidth === 0 || overlayWidth === 0) {\n                    // Retry after a short delay if elements aren't rendered yet\n                    setTimeout(() => this.updateClipPath(), 100);\n                    return;\n                }\n\n                const clipLeft = offsetLeft;\n                const clipRight = offsetLeft + offsetWidth;\n\n                const clipLeftPercent = ((clipLeft / overlayWidth) * 100).toFixed(2);\n                const clipRightPercent = (100 - (clipRight / overlayWidth) * 100).toFixed(2);\n\n                container.style.clipPath = `inset(0 ${clipRightPercent}% 0 ${clipLeftPercent}% round 4px)`;\n            }\n        }, 0);\n    }\n}\n","<div\n    #containerRef\n    class=\"sds-segmented-control-container\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\n    [ngClass]=\"{\n        'disabled': disabled,\n        'sds-segmented-control-primary': style == 'primary',\n        'sds-segmented-control-inverted': style == 'inverted',\n        'clip-path-enabled': enableAnimation\n    }\">\n\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\n        class=\"segment\"\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\n        role=\"button\"\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\n        [class.selected]=\"item[valueExpr] == value\"\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n        (click)=\"selectItem(item, $event)\"\n        (keydown)=\"onSegmentKeydown($event, item)\">\n\n        <div class=\"sds-flex-row-center gap-2\">\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n        </div>\n    </div>\n\n    <div *ngIf=\"enableAnimation\"\n         class=\"sds-clip-path-overlay\"\n         #clipPathContainer\n         aria-hidden=\"true\">\n        <div *ngFor=\"let item of items; let last = last;\"\n            class=\"segment segment-overlay\"\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\n            [tabIndex]=\"-1\">\n\n            <div class=\"sds-flex-row-center gap-2\">\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n            </div>\n        </div>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import {\r\n    AfterViewInit,\r\n    ChangeDetectionStrategy,\r\n    ChangeDetectorRef,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Injector,\r\n    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n    inject,\r\n    input,\r\n    viewChild,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgClass, NgFor, NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-segmented-control',\r\n    templateUrl: './segmented-control.component.html',\r\n    styleUrls: ['./segmented-control.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [\r\n        NgClass,\r\n        NgFor,\r\n        NgIf,\r\n        FaIconComponent,\r\n    ],\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: SdsSegmentedControlComponent,\r\n            multi: true,\r\n        },\r\n    ]\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges, ControlValueAccessor {\r\n\r\n\r\n    // #region Dependencies\r\n    private _cdr = inject(ChangeDetectorRef);\r\n    private _injector = inject(Injector);\r\n    // #endregion Dependencies\r\n\r\n    // #region Inputs\r\n    @Input() items: any[] | undefined;\r\n    @Input() value: any;\r\n    @Input() valueExpr = 'value';\r\n    @Input() displayExpr: string | undefined = 'text';\r\n    @Input() iconExpr: string | undefined;\r\n    @Input() tooltipExpr: string | undefined;\r\n    @Input() idExpr: string | undefined;\r\n    @Input() disabled: boolean = false;\r\n    @Input() style: 'default' | 'primary' | 'inverted' = 'default';\r\n    @Input() segmentPadding: 'tight' | 'loose' = 'loose';\r\n    @Input() enableAnimation: boolean = true;\r\n    public ariaLabel = input<string | undefined>();\r\n    // #endregion Inputs\r\n\r\n    // #region Outputs\r\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n    // #endregion Outputs\r\n\r\n    // #region DOM references\r\n    @ViewChild('clipPathContainer') clipPathContainerRef!: ElementRef<HTMLDivElement>;\r\n    protected containerRef = viewChild<ElementRef<HTMLDivElement>>('containerRef');\r\n    // #endregion DOM references\r\n\r\n    // #region ControlValueAccessor private state\r\n    private _ngControl: NgControl | null = null;\r\n    private _onChange: (value: any) => void = () => {};\r\n    private _onTouched: () => void = () => {};\r\n    // #endregion ControlValueAccessor private state\r\n\r\n    ngOnInit() {\r\n        /**\r\n         * Don't inject ngControl at the constructor, because it causes Cyclic Dependency.\r\n         * We can inject it via Injector to avoid the error.\r\n         */\r\n        this._ngControl = this._injector.get(NgControl, null);\r\n\r\n        if (this._ngControl !== null) {\r\n            this._ngControl.valueAccessor = this;\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit() {\r\n        if (this.enableAnimation) {\r\n            this.updateClipPath();\r\n        }\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if ((changes['value'] || changes['enableClipPathAnimation']) && this.enableAnimation) {\r\n            // Use a longer timeout to ensure the DOM is updated\r\n            setTimeout(() => this.updateClipPath(), 50);\r\n        }\r\n    }\r\n\r\n    // #region ControlValueAccessor implementation\r\n    public writeValue(value: any): void {\r\n        if (value !== undefined && value !== null) {\r\n            this.value = value;\r\n            this._cdr.markForCheck();\r\n        }\r\n    }\r\n\r\n    public registerOnChange(fn: (value: any) => void): void {\r\n        this._onChange = fn;\r\n    }\r\n\r\n    public registerOnTouched(fn: () => void): void {\r\n        this._onTouched = fn;\r\n    }\r\n\r\n    public setDisabledState(isDisabled: boolean): void {\r\n        this.disabled = isDisabled;\r\n        this._cdr.markForCheck();\r\n    }\r\n    // #endregion ControlValueAccessor implementation\r\n\r\n    public selectItem(item: any, event: MouseEvent): void {\r\n        event.stopPropagation();\r\n\r\n        if (!this.disabled) {\r\n            this.value = item[this.valueExpr];\r\n            this.valueChange.emit(this.value);\r\n            this.itemChange.emit(item);\r\n\r\n            // Notify form control if in form context\r\n            if (this._ngControl) {\r\n                this._onChange(this.value);\r\n                this._onTouched();\r\n            }\r\n\r\n            if (this.enableAnimation) {\r\n                this._cdr.detectChanges();\r\n                this.updateClipPath();\r\n            }\r\n        }\r\n    }\r\n\r\n    public onSegmentKeydown(event: KeyboardEvent, item: any): void {\r\n        if (this.disabled) {\r\n            return;\r\n        }\r\n\r\n        const currentIndex = this.getItemIndex(item);\r\n        let nextIndex: number | null = null;\r\n\r\n        switch (event.key) {\r\n            case 'ArrowLeft':\r\n                event.preventDefault();\r\n                nextIndex = currentIndex > 0 ? currentIndex - 1 : (this.items?.length ?? 1) - 1;\r\n                break;\r\n            case 'ArrowRight':\r\n                event.preventDefault();\r\n                nextIndex = currentIndex < (this.items?.length ?? 1) - 1 ? currentIndex + 1 : 0;\r\n                break;\r\n            case 'Home':\r\n                event.preventDefault();\r\n                nextIndex = 0;\r\n                break;\r\n            case 'End':\r\n                event.preventDefault();\r\n                nextIndex = (this.items?.length ?? 1) - 1;\r\n                break;\r\n        }\r\n\r\n        if (nextIndex !== null && this.items) {\r\n            this.navigateToItem(nextIndex);\r\n        }\r\n    }\r\n\r\n    public getSegmentAriaLabel(item: any, index: number): string | null {\r\n        // Only set an explicit aria-label when visible text is intentionally omitted.\r\n        if (this.displayExpr) {\r\n            return null;\r\n        }\r\n\r\n        if (this.tooltipExpr && item?.[this.tooltipExpr]) {\r\n            return String(item[this.tooltipExpr]);\r\n        }\r\n\r\n        if (item?.[this.valueExpr] !== undefined && item?.[this.valueExpr] !== null) {\r\n            return String(item[this.valueExpr]);\r\n        }\r\n\r\n        return `Segment option ${index + 1}`;\r\n    }\r\n\r\n    private getItemIndex(item: any): number {\r\n        return this.items?.indexOf(item) ?? -1;\r\n    }\r\n\r\n    private navigateToItem(index: number): void {\r\n        if (!this.items || index < 0 || index >= this.items.length) {\r\n            return;\r\n        }\r\n\r\n        const item = this.items[index];\r\n        this.value = item[this.valueExpr];\r\n        this.valueChange.emit(this.value);\r\n        this.itemChange.emit(item);\r\n\r\n        // Notify form control if in form context\r\n        if (this._ngControl) {\r\n            this._onChange(this.value);\r\n            this._onTouched();\r\n        }\r\n\r\n        if (this.enableAnimation) {\r\n            this._cdr.detectChanges();\r\n            this.updateClipPath();\r\n        }\r\n\r\n        // Focus the segment element after change detection\r\n        this.focusSegmentElement(index);\r\n    }\r\n\r\n    private focusSegmentElement(index: number): void {\r\n        // Use setTimeout to ensure DOM is updated before focusing\r\n        setTimeout(() => {\r\n            const segmentElements = this.containerRef()?.nativeElement.querySelectorAll('.segment:not(.segment-overlay)');\r\n            if (segmentElements && segmentElements[index]) {\r\n                (segmentElements[index] as HTMLElement).focus();\r\n            }\r\n        }, 0);\r\n    }\r\n\r\n    private updateClipPath() {\r\n        setTimeout(() => {\r\n            const container = this.clipPathContainerRef?.nativeElement;\r\n            if (!container) return;\r\n\r\n            const activeSegment = container.parentElement?.querySelector(\r\n                `.segment.selected:not(.segment-overlay)`\r\n            ) as HTMLElement;\r\n\r\n            if (activeSegment && container.parentElement) {\r\n                const parentElement = container.parentElement;\r\n\r\n                const computedStyle = window.getComputedStyle(parentElement);\r\n                const paddingLeft = parseFloat(computedStyle.paddingLeft);\r\n\r\n                const offsetLeft = activeSegment.offsetLeft - paddingLeft;\r\n                const offsetWidth = activeSegment.offsetWidth;\r\n                const overlayWidth = container.offsetWidth;\r\n\r\n                // Only update if we have valid dimensions\r\n                if (offsetWidth === 0 || overlayWidth === 0) {\r\n                    // Retry after a short delay if elements aren't rendered yet\r\n                    setTimeout(() => this.updateClipPath(), 100);\r\n                    return;\r\n                }\r\n\r\n                const clipLeft = offsetLeft;\r\n                const clipRight = offsetLeft + offsetWidth;\r\n\r\n                const clipLeftPercent = ((clipLeft / overlayWidth) * 100).toFixed(2);\r\n                const clipRightPercent = (100 - (clipRight / overlayWidth) * 100).toFixed(2);\r\n\r\n                container.style.clipPath = `inset(0 ${clipRightPercent}% 0 ${clipLeftPercent}% round 4px)`;\r\n            }\r\n        }, 0);\r\n    }\r\n}\r\n","<div\r\n    #containerRef\r\n    class=\"sds-segmented-control-container\"\r\n    role=\"group\"\r\n    [attr.aria-label]=\"ariaLabel() || 'Segmented control'\"\r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted',\r\n        'clip-path-enabled': enableAnimation\r\n    }\">\r\n\r\n    <div *ngFor=\"let item of items; let index = index; let last = last;\"\r\n        class=\"segment\"\r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        role=\"button\"\r\n        [tabindex]=\"item[valueExpr] === value ? 0 : -1\"\r\n        [attr.aria-label]=\"getSegmentAriaLabel(item, index)\"\r\n        [attr.aria-pressed]=\"item[valueExpr] === value\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item, $event)\"\r\n        (keydown)=\"onSegmentKeydown($event, item)\">\r\n\r\n        <div class=\"sds-flex-row-center gap-2\">\r\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"enableAnimation\"\r\n         class=\"sds-clip-path-overlay\"\r\n         #clipPathContainer\r\n         aria-hidden=\"true\">\r\n        <div *ngFor=\"let item of items; let last = last;\"\r\n            class=\"segment segment-overlay\"\r\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n            [tabIndex]=\"-1\">\r\n\r\n            <div class=\"sds-flex-row-center gap-2\">\r\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs

@@ -31,11 +31,11 @@ class SdsSideBarComponent {
         this.isCollapsed.set(!this.isCollapsed());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isHovered: "isHovered" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, ngImport: i0, template: "<div \n    class=\"sds-side-bar-container\"\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \n    [class.disable-transition]=\"!isCollapsed()\"\n    >\n\n    <aside\n        class=\"sds-side-bar h-100 border-end\"\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n        \n        [class.sds-side-bar-open]=\"!isCollapsed()\"\n    >\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n            style=\"transition: none\"\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n            >\n            <ng-content></ng-content>                \n        </div>\n    </aside>\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isHovered: "isHovered" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, ngImport: i0, template: "<div \r\n    class=\"sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \r\n    [class.disable-transition]=\"!isCollapsed()\"\r\n    >\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n        \r\n        [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n    >\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n            style=\"transition: none\"\r\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n            >\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n    class=\"sds-side-bar-container\"\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \n    [class.disable-transition]=\"!isCollapsed()\"\n    >\n\n    <aside\n        class=\"sds-side-bar h-100 border-end\"\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n        \n        [class.sds-side-bar-open]=\"!isCollapsed()\"\n    >\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n            style=\"transition: none\"\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n            >\n            <ng-content></ng-content>                \n        </div>\n    </aside>\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"] }]
+            args: [{ selector: 'sds-side-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n    class=\"sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \r\n    [class.disable-transition]=\"!isCollapsed()\"\r\n    >\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n        \r\n        [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n    >\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n            style=\"transition: none\"\r\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n            >\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { widthRem: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthRem", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], isHovered: [{ type: i0.Output, args: ["isHovered"] }], onEnter: [{
                 type: HostListener,
                 args: ['mouseenter']

package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostListener, input, model, output } from '@angular/core';\n\n@Component({\n    selector: 'sds-side-bar',\n    templateUrl: './side-bar.component.html',\n    styleUrls: ['./side-bar.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdsSideBarComponent {\n\n    /**\n     * Define the width of the side bar in rem.\n     *\n     * @type {number}\n     * @memberof SdsSideBarComponent\n     */\n    public widthRem = input<number>(16);\n\n    /**\n     * State of the side bar, whether it is collapsed or expanded.\n     *\n     * @memberof SdsSideBarComponent\n     */\n    public isCollapsed = model<boolean>(false)\n\n    /**\n     * Indicates whether the side bar is currently hovered by the user. \n     * This can be used to trigger hover effects or to temporarily expand \n     * the side bar on hover when it is in a collapsed state.\n     *\n     * @memberof SdsSideBarComponent\n     */\n    public isHovered = output<boolean>();\n\n\n    constructor() {}\n\n    @HostListener('mouseenter') onEnter() { this.isHovered.emit(true); }\n    @HostListener('mouseleave') onLeave() { this.isHovered.emit(false); }\n\n    public toggleSideBar(state?: boolean) {\n        this.isCollapsed.set(!this.isCollapsed());\n    }    \n}\n","<div \n    class=\"sds-side-bar-container\"\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \n    [class.disable-transition]=\"!isCollapsed()\"\n    >\n\n    <aside\n        class=\"sds-side-bar h-100 border-end\"\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n        \n        [class.sds-side-bar-open]=\"!isCollapsed()\"\n    >\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n            style=\"transition: none\"\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n            >\n            <ng-content></ng-content>                \n        </div>\n    </aside>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,mBAAmB,CAAA;AA2B5B,IAAA,WAAA,GAAA;AAzBA;;;;;AAKG;AACI,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAEnC;;;;AAIG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;AAE1C;;;;;;AAMG;QACI,IAAA,CAAA,SAAS,GAAG,MAAM,EAAW;IAGrB;IAEa,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvC,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAE7D,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAC7C;+GAlCS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,qfCThC,moBAmBM,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDVO,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EAGZ,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,moBAAA,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA;;sBA+B9C,YAAY;uBAAC,YAAY;;sBACzB,YAAY;uBAAC,YAAY;;;AEvC9B;;AAEG;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostListener, input, model, output } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-side-bar',\r\n    templateUrl: './side-bar.component.html',\r\n    styleUrls: ['./side-bar.component.scss'],\r\n    standalone: true,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdsSideBarComponent {\r\n\r\n    /**\r\n     * Define the width of the side bar in rem.\r\n     *\r\n     * @type {number}\r\n     * @memberof SdsSideBarComponent\r\n     */\r\n    public widthRem = input<number>(16);\r\n\r\n    /**\r\n     * State of the side bar, whether it is collapsed or expanded.\r\n     *\r\n     * @memberof SdsSideBarComponent\r\n     */\r\n    public isCollapsed = model<boolean>(false)\r\n\r\n    /**\r\n     * Indicates whether the side bar is currently hovered by the user. \r\n     * This can be used to trigger hover effects or to temporarily expand \r\n     * the side bar on hover when it is in a collapsed state.\r\n     *\r\n     * @memberof SdsSideBarComponent\r\n     */\r\n    public isHovered = output<boolean>();\r\n\r\n\r\n    constructor() {}\r\n\r\n    @HostListener('mouseenter') onEnter() { this.isHovered.emit(true); }\r\n    @HostListener('mouseleave') onLeave() { this.isHovered.emit(false); }\r\n\r\n    public toggleSideBar(state?: boolean) {\r\n        this.isCollapsed.set(!this.isCollapsed());\r\n    }    \r\n}\r\n","<div \r\n    class=\"sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \r\n    [class.disable-transition]=\"!isCollapsed()\"\r\n    >\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n        \r\n        [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n    >\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n            style=\"transition: none\"\r\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\r\n            >\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </aside>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,mBAAmB,CAAA;AA2B5B,IAAA,WAAA,GAAA;AAzBA;;;;;AAKG;AACI,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAEnC;;;;AAIG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;AAE1C;;;;;;AAMG;QACI,IAAA,CAAA,SAAS,GAAG,MAAM,EAAW;IAGrB;IAEa,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvC,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAE7D,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAC7C;+GAlCS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,qfCThC,yqBAmBM,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDVO,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EAGZ,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,yqBAAA,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA;;sBA+B9C,YAAY;uBAAC,YAAY;;sBACzB,YAAY;uBAAC,YAAY;;;AEvC9B;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs

@@ -11,11 +11,11 @@ class SdsStaticValueComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsStaticValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsStaticValueComponent, isStandalone: true, selector: "sds-static-value", inputs: { icon: "icon", label: "label", showColon: "showColon" }, ngImport: i0, template: "<div class=\"d-flex gap-1 align-items-center\">\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n    <div *ngIf=\"label || showColon\">\n        <span>{{label}}</span>\n        <span *ngIf=\"showColon\">:</span>\n    </div>\n    <ng-content></ng-content>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsStaticValueComponent, isStandalone: true, selector: "sds-static-value", inputs: { icon: "icon", label: "label", showColon: "showColon" }, ngImport: i0, template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsStaticValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-static-value', imports: [NgIf, FaIconComponent], template: "<div class=\"d-flex gap-1 align-items-center\">\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n    <div *ngIf=\"label || showColon\">\n        <span>{{label}}</span>\n        <span *ngIf=\"showColon\">:</span>\n    </div>\n    <ng-content></ng-content>\n</div>" }]
+            args: [{ selector: 'sds-static-value', imports: [NgIf, FaIconComponent], template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], label: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-static-value.mjs","sources":["../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.ts","../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.html","../../../projects/ngx-sds-components/src/lib/static-value/spicainternational-ngx-sds-components-src-lib-static-value.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf } from '@angular/common';\n\n@Component({\n    selector: 'sds-static-value',\n    templateUrl: './static-value.component.html',\n    styleUrls: ['./static-value.component.scss'],\n    imports: [NgIf, FaIconComponent]\n})\nexport class SdsStaticValueComponent implements OnInit {\n\n    @Input() public icon: IconProp | undefined;\n    @Input() public label: string = '';\n    @Input() public showColon: boolean = true;\n\n\n\n    constructor() { }\n\n    ngOnInit(): void {\n    }\n\n}\n","<div class=\"d-flex gap-1 align-items-center\">\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n    <div *ngIf=\"label || showColon\">\n        <span>{{label}}</span>\n        <span *ngIf=\"showColon\">:</span>\n    </div>\n    <ng-content></ng-content>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAWa,uBAAuB,CAAA;AAQhC,IAAA,WAAA,GAAA;QALgB,IAAA,CAAA,KAAK,GAAW,EAAE;QAClB,IAAA,CAAA,SAAS,GAAY,IAAI;IAIzB;IAEhB,QAAQ,GAAA;IACR;+GAXS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXpC,sSAOM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEQ,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEtB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EAGnB,CAAC,IAAI,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,sSAAA,EAAA;;sBAI/B;;sBACA;;sBACA;;;AEfL;;AAEG;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-static-value.mjs","sources":["../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.ts","../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.html","../../../projects/ngx-sds-components/src/lib/static-value/spicainternational-ngx-sds-components-src-lib-static-value.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-static-value',\r\n    templateUrl: './static-value.component.html',\r\n    styleUrls: ['./static-value.component.scss'],\r\n    imports: [NgIf, FaIconComponent]\r\n})\r\nexport class SdsStaticValueComponent implements OnInit {\r\n\r\n    @Input() public icon: IconProp | undefined;\r\n    @Input() public label: string = '';\r\n    @Input() public showColon: boolean = true;\r\n\r\n\r\n\r\n    constructor() { }\r\n\r\n    ngOnInit(): void {\r\n    }\r\n\r\n}\r\n","<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAWa,uBAAuB,CAAA;AAQhC,IAAA,WAAA,GAAA;QALgB,IAAA,CAAA,KAAK,GAAW,EAAE;QAClB,IAAA,CAAA,SAAS,GAAY,IAAI;IAIzB;IAEhB,QAAQ,GAAA;IACR;+GAXS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXpC,oTAOM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEQ,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEtB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EAGnB,CAAC,IAAI,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,oTAAA,EAAA;;sBAI/B;;sBACA;;sBACA;;;AEfL;;AAEG;;"}