@spicainternational/ngx-sds-components 8.0.0 → 8.1.1

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

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgClass, NgFor, NgIf } from '@angular/common';
 
 class SdsSegmentedControlComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.segmentPadding = 'loose';
+        this.enableAnimation = true;
         this.itemChange = new EventEmitter();
         this.valueChange = new EventEmitter();
         this.valueExpr = 'value';
@@ -14,16 +16,58 @@ class SdsSegmentedControlComponent {
         this.style = 'default';
     }
     ngOnInit() { }
+    ngAfterViewInit() {
+        if (this.enableAnimation) {
+            this.updateClipPath();
+        }
+    }
+    ngOnChanges(changes) {
+        if ((changes['value'] || changes['enableClipPathAnimation']) && this.enableAnimation) {
+            // Use a longer timeout to ensure the DOM is updated
+            setTimeout(() => this.updateClipPath(), 50);
+        }
+    }
     selectItem(item, event) {
         event.stopPropagation();
         if (!this.disabled) {
             this.value = item[this.valueExpr];
             this.valueChange.emit(this.value);
             this.itemChange.emit(item);
+            if (this.enableAnimation) {
+                this.cdr.detectChanges();
+                this.updateClipPath();
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsSegmentedControlComponent, isStandalone: true, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", iconExpr: "iconExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled", style: "style", segmentPadding: "segmentPadding" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-segmented-control-container\" \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    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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\r\n            <!-- <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i> -->\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}\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", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    updateClipPath() {
+        setTimeout(() => {
+            const container = this.clipPathContainerRef?.nativeElement;
+            if (!container)
+                return;
+            const activeSegment = container.parentElement?.querySelector(`.segment.selected:not(.segment-overlay)`);
+            if (activeSegment && container.parentElement) {
+                const parentElement = container.parentElement;
+                const computedStyle = window.getComputedStyle(parentElement);
+                const paddingLeft = parseFloat(computedStyle.paddingLeft);
+                const offsetLeft = activeSegment.offsetLeft - paddingLeft;
+                const offsetWidth = activeSegment.offsetWidth;
+                const overlayWidth = container.offsetWidth;
+                // Only update if we have valid dimensions
+                if (offsetWidth === 0 || overlayWidth === 0) {
+                    // Retry after a short delay if elements aren't rendered yet
+                    setTimeout(() => this.updateClipPath(), 100);
+                    return;
+                }
+                const clipLeft = offsetLeft;
+                const clipRight = offsetLeft + offsetWidth;
+                const clipLeftPercent = ((clipLeft / overlayWidth) * 100).toFixed(2);
+                const clipRightPercent = (100 - (clipRight / overlayWidth) * 100).toFixed(2);
+                container.style.clipPath = `inset(0 ${clipRightPercent}% 0 ${clipLeftPercent}% round 4px)`;
+            }
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSegmentedControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsSegmentedControlComponent, isStandalone: true, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", iconExpr: "iconExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled", style: "style", segmentPadding: "segmentPadding", enableAnimation: "enableAnimation" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "clipPathContainerRef", first: true, predicate: ["clipPathContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"sds-segmented-control-container\" \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 last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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>", 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}.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}.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.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-inverted{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.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:#ced4da;border-color:#ced4da;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", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSegmentedControlComponent, decorators: [{
             type: Component,
@@ -32,8 +76,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgFor,
                         NgIf,
                         FaIconComponent,
-                    ], template: "<div \r\n    class=\"sds-segmented-control-container\" \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    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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\r\n            <!-- <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i> -->\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{
+                    ], template: "<div \r\n    class=\"sds-segmented-control-container\" \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 last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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>", 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}.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}.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.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-inverted{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.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:#ced4da;border-color:#ced4da;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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { clipPathContainerRef: [{
+                type: ViewChild,
+                args: ['clipPathContainer']
+            }], items: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -53,6 +100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], segmentPadding: [{
                 type: Input
+            }], enableAnimation: [{
+                type: Input
             }], itemChange: [{
                 type: Output
             }], valueChange: [{

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 {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    EventEmitter,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n} from '@angular/core';\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    standalone: true,\r\n    imports: [\r\n        NgClass,\r\n        NgFor,\r\n        NgIf,\r\n        FaIconComponent,\r\n    ],\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit {\r\n    @Input() items: any[] | undefined;\r\n    @Input() value: any;\r\n    @Input() valueExpr;\r\n    @Input() displayExpr: string | undefined;\r\n    @Input() iconExpr: string | undefined;\r\n    @Input() tooltipExpr: string | undefined;\r\n    @Input() idExpr: string | undefined;\r\n    @Input() disabled: boolean;\r\n\r\n    @Input() style: 'default' | 'primary' | 'inverted';\r\n    @Input() segmentPadding: 'tight' | 'loose' = 'loose';\r\n\r\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n\r\n    constructor() {\r\n        this.valueExpr = 'value';\r\n        this.displayExpr = 'text';\r\n        this.disabled = false;\r\n        this.style = 'default';\r\n    }\r\n\r\n    ngOnInit() {}\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    }\r\n}\r\n","<div \r\n    class=\"sds-segmented-control-container\" \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    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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\r\n            <!-- <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i> -->\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>","/**\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    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n} from '@angular/core';\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    standalone: true,\r\n    imports: [\r\n        NgClass,\r\n        NgFor,\r\n        NgIf,\r\n        FaIconComponent,\r\n    ],\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges {\r\n    @ViewChild('clipPathContainer') clipPathContainerRef!: ElementRef<HTMLDivElement>;\r\n\r\n    @Input() items: any[] | undefined;\r\n    @Input() value: any;\r\n    @Input() valueExpr;\r\n    @Input() displayExpr: string | undefined;\r\n    @Input() iconExpr: string | undefined;\r\n    @Input() tooltipExpr: string | undefined;\r\n    @Input() idExpr: string | undefined;\r\n    @Input() disabled: boolean;\r\n    @Input() style: 'default' | 'primary' | 'inverted';\r\n    @Input() segmentPadding: 'tight' | 'loose' = 'loose';\r\n    @Input() enableAnimation: boolean = true;\r\n\r\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n\r\n    constructor(private cdr: ChangeDetectorRef) {\r\n        this.valueExpr = 'value';\r\n        this.displayExpr = 'text';\r\n        this.disabled = false;\r\n        this.style = 'default';\r\n    }\r\n\r\n    ngOnInit() {}\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    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            if (this.enableAnimation) {\r\n                this.cdr.detectChanges(); \r\n                this.updateClipPath();\r\n            }\r\n        }\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}","<div \r\n    class=\"sds-segmented-control-container\" \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 last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\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\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>","/**\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

@@ -27,11 +27,11 @@ class SdsSideBarComponent {
         this.isCollapsed.set(!this.isCollapsed());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: false, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, 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        [class]=\"(product ? 'product-' + product : null)\"\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-in-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: false, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, 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        [class]=\"(product ? 'product-' + product : null)\"\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}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', standalone: true, imports: [NgIf, NgStyle, FaIconComponent], 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        [class]=\"(product ? 'product-' + product : null)\"\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-in-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block}\n"] }]
+            args: [{ selector: 'sds-side-bar', standalone: true, imports: [NgIf, NgStyle, FaIconComponent], 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        [class]=\"(product ? 'product-' + product : null)\"\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { widthRem: [{
                 type: Input
             }], product: [{

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 { Component, inject, input, Input, model, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf, NgStyle } from '@angular/common';\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    imports: [NgIf, NgStyle, FaIconComponent],\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    @Input() public widthRem: number = 16;\r\n\r\n    /**\r\n     * Product name defines the color scheme of the side bar.\r\n     * Default is 'all-hours'.\r\n     * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'\r\n     *\r\n     * @type {string}\r\n     * @memberof SdsSideBarComponent\r\n     */\r\n    @Input() product: 'all-hours' | 'door-cloud' | 'my-hours' | 'time-and-space' = 'all-hours';\r\n\r\n    isCollapsed = model<boolean>(false)\r\n\r\n    constructor() {}\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        [class]=\"(product ? 'product-' + product : null)\"\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":";;;;;MAWa,mBAAmB,CAAA;AAsB5B,IAAA,WAAA,GAAA;AApBA;;;;;AAKG;QACa,IAAQ,CAAA,QAAA,GAAW,EAAE;AAErC;;;;;;;AAOG;QACM,IAAO,CAAA,OAAA,GAA+D,WAAW;AAE1F,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC;;AAI5B,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;+GAzBpC,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,8gBCXhC,wtBAmBM,EAAA,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA,CAAA,CAAA;;4FDRO,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;+BACI,cAAc,EAAA,UAAA,EAGZ,IAAI,EACP,OAAA,EAAA,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,wtBAAA,EAAA,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA;wDAUzB,QAAQ,EAAA,CAAA;sBAAvB;gBAUQ,OAAO,EAAA,CAAA;sBAAf;;;AE7BL;;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 { Component, inject, input, Input, model, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf, NgStyle } from '@angular/common';\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    imports: [NgIf, NgStyle, FaIconComponent],\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    @Input() public widthRem: number = 16;\r\n\r\n    /**\r\n     * Product name defines the color scheme of the side bar.\r\n     * Default is 'all-hours'.\r\n     * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'\r\n     *\r\n     * @type {string}\r\n     * @memberof SdsSideBarComponent\r\n     */\r\n    @Input() product: 'all-hours' | 'door-cloud' | 'my-hours' | 'time-and-space' = 'all-hours';\r\n\r\n    isCollapsed = model<boolean>(false)\r\n\r\n    constructor() {}\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        [class]=\"(product ? 'product-' + product : null)\"\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":";;;;;MAWa,mBAAmB,CAAA;AAsB5B,IAAA,WAAA,GAAA;AApBA;;;;;AAKG;QACa,IAAQ,CAAA,QAAA,GAAW,EAAE;AAErC;;;;;;;AAOG;QACM,IAAO,CAAA,OAAA,GAA+D,WAAW;AAE1F,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC;;AAI5B,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;+GAzBpC,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,8gBCXhC,wtBAmBM,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA,CAAA,CAAA;;4FDRO,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;+BACI,cAAc,EAAA,UAAA,EAGZ,IAAI,EACP,OAAA,EAAA,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,wtBAAA,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA;wDAUzB,QAAQ,EAAA,CAAA;sBAAvB;gBAUQ,OAAO,EAAA,CAAA;sBAAf;;;AE7BL;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components.mjs

@@ -20,6 +20,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/navigation';
 export * from '@spicainternational/ngx-sds-components/src/lib/number-box';
 export * from '@spicainternational/ngx-sds-components/src/lib/page-header';
 export * from '@spicainternational/ngx-sds-components/src/lib/pane';
+export * from '@spicainternational/ngx-sds-components/src/lib/ripple';
 export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';

package/fesm2022/spicainternational-ngx-sds-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/ellipsis';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/drawer';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/intersection';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/keyboard-shortcut';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/number-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/static-value';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/timeline';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/timer';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/table-actions';\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/utils';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/ellipsis';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/drawer';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/intersection';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/keyboard-shortcut';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/number-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/ripple';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/static-value';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/timeline';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/timer';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/table-actions';\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/utils';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicainternational/ngx-sds-components",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "license": "MIT",
   "description": "Spica design system angular components.",
   "type": "module",
@@ -48,18 +48,18 @@
       "esm": "./esm2022/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.mjs",
       "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-avatar.mjs"
     },
-    "./src/lib/callout": {
-      "types": "./src/lib/callout/index.d.ts",
-      "esm2022": "./esm2022/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.mjs",
-      "esm": "./esm2022/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.mjs",
-      "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-callout.mjs"
-    },
     "./src/lib/badge": {
       "types": "./src/lib/badge/index.d.ts",
       "esm2022": "./esm2022/src/lib/badge/spicainternational-ngx-sds-components-src-lib-badge.mjs",
       "esm": "./esm2022/src/lib/badge/spicainternational-ngx-sds-components-src-lib-badge.mjs",
       "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-badge.mjs"
     },
+    "./src/lib/callout": {
+      "types": "./src/lib/callout/index.d.ts",
+      "esm2022": "./esm2022/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.mjs",
+      "esm": "./esm2022/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.mjs",
+      "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-callout.mjs"
+    },
     "./src/lib/color-picker": {
       "types": "./src/lib/color-picker/index.d.ts",
       "esm2022": "./esm2022/src/lib/color-picker/spicainternational-ngx-sds-components-src-lib-color-picker.mjs",
@@ -174,6 +174,12 @@
       "esm": "./esm2022/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.mjs",
       "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs"
     },
+    "./src/lib/ripple": {
+      "types": "./src/lib/ripple/index.d.ts",
+      "esm2022": "./esm2022/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.mjs",
+      "esm": "./esm2022/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.mjs",
+      "default": "./fesm2022/spicainternational-ngx-sds-components-src-lib-ripple.mjs"
+    },
     "./src/lib/segmented-control": {
       "types": "./src/lib/segmented-control/index.d.ts",
       "esm2022": "./esm2022/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs",

package/public-api.d.ts

@@ -20,6 +20,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/navigation';
 export * from '@spicainternational/ngx-sds-components/src/lib/number-box';
 export * from '@spicainternational/ngx-sds-components/src/lib/page-header';
 export * from '@spicainternational/ngx-sds-components/src/lib/pane';
+export * from '@spicainternational/ngx-sds-components/src/lib/ripple';
 export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';

package/src/lib/avatar/avatar.component.d.ts

@@ -7,10 +7,10 @@ import * as i0 from "@angular/core";
  * @property {boolean} showHint - show hint with text
  * @property {string} initialsText - override internal extraction of initials and set avatar text directly
  *
- * @property {string} pictureUri - uri of picture to show on avatar
+ * @property {string} pictureUri - uri of picture to show on avatar (supports http/https URLs and base64 data URIs)
  * @property {string} pictureImageAlt - alt text for image, for accessibility
- * @property {string} pictureLoading - loading strategy for image, lazy or eager
- * @property {boolean} picturePriority - if true image is considered high priority and will be loaded before other images
+ * @property {string} pictureLoading - loading strategy for image, lazy or eager (only applies to URLs, not base64)
+ * @property {boolean} picturePriority - if true image is considered high priority and will be loaded before other images (only applies to URLs, not base64)
  *
  * @property {string} badgeVisible - show badge on avatar
  * @property {string} badgePosition - position of badge
@@ -25,6 +25,7 @@ export declare class SdsAvatarComponent implements AfterViewInit, OnChanges {
     showHint: boolean;
     borderStyle: 'solid' | 'dashed' | 'dotted' | 'none';
     borderColor?: string;
+    borderWidth?: string;
     initialsText?: string;
     cursor?: string;
     size: number;
@@ -40,14 +41,16 @@ export declare class SdsAvatarComponent implements AfterViewInit, OnChanges {
     showPicture: boolean;
     colorClass: string;
     imageSizeInPixels: number;
+    isBase64Image: boolean;
     constructor();
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private setShowPicture;
+    private checkIfBase64;
     private setColorClass;
     private setLabel;
     private calculatePixelSize;
     private getColorIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdsAvatarComponent, "sds-avatar", never, { "text": { "alias": "text"; "required": false; }; "colorKey": { "alias": "colorKey"; "required": false; }; "pictureUri": { "alias": "pictureUri"; "required": false; }; "showHint": { "alias": "showHint"; "required": false; }; "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "initialsText": { "alias": "initialsText"; "required": false; }; "cursor": { "alias": "cursor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "pictureImageAlt": { "alias": "pictureImageAlt"; "required": false; }; "pictureLoading": { "alias": "pictureLoading"; "required": false; }; "picturePriority": { "alias": "picturePriority"; "required": false; }; "badgeVisible": { "alias": "badgeVisible"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; "badgeBackgroundColor": { "alias": "badgeBackgroundColor"; "required": false; }; "badgeTextColor": { "alias": "badgeTextColor"; "required": false; }; "badgeHint": { "alias": "badgeHint"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsAvatarComponent, "sds-avatar", never, { "text": { "alias": "text"; "required": false; }; "colorKey": { "alias": "colorKey"; "required": false; }; "pictureUri": { "alias": "pictureUri"; "required": false; }; "showHint": { "alias": "showHint"; "required": false; }; "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "initialsText": { "alias": "initialsText"; "required": false; }; "cursor": { "alias": "cursor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "pictureImageAlt": { "alias": "pictureImageAlt"; "required": false; }; "pictureLoading": { "alias": "pictureLoading"; "required": false; }; "picturePriority": { "alias": "picturePriority"; "required": false; }; "badgeVisible": { "alias": "badgeVisible"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; "badgeBackgroundColor": { "alias": "badgeBackgroundColor"; "required": false; }; "badgeTextColor": { "alias": "badgeTextColor"; "required": false; }; "badgeHint": { "alias": "badgeHint"; "required": false; }; }, {}, never, never, true, never>;
 }

package/src/lib/modal/modal.component.d.ts

@@ -16,7 +16,7 @@ export declare class SdsModalComponent implements OnInit, OnChanges {
     closeOnEscape: boolean;
     downSizing: 'discrete' | 'continuous';
     /**
-     * Allow the modal to be draggable by the user. Default is false.
+     * Allow the modal to be draggable by the user. Default is true.
      *
      * @memberof SdsModalComponent
      */

package/src/lib/navigation/navigation-group/navigation-group.component.d.ts

@@ -1,9 +1,9 @@
-import { OnDestroy, OnInit, QueryList } from '@angular/core';
+import { OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { SdsNavigationRouteLinkComponent } from '../navigation-route-link/navigation-route-link.component';
 import { CollapsibleNavigationEntity } from '../models/navigation-models';
 import * as i0 from "@angular/core";
-export declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, CollapsibleNavigationEntity {
+export declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, CollapsibleNavigationEntity, OnChanges {
     private _router;
     /**
      * List of paths allowed/expected within this module.
@@ -37,6 +37,7 @@ export declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, C
     constructor(_router: Router);
     isCollapsed: import("@angular/core").ModelSignal<boolean>;
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     onHiding(e: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsNavigationGroupComponent, never>;

package/src/lib/ripple/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@spicainternational/ngx-sds-components/src/lib/ripple" />
+export * from './public-api';

package/src/lib/ripple/public-api.d.ts

@@ -0,0 +1 @@
+export * from './ripple.directive';

package/src/lib/ripple/ripple.directive.d.ts

@@ -0,0 +1,21 @@
+import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdsRippleDirective implements OnDestroy {
+    private el;
+    private renderer;
+    sdsRippleColor: string;
+    sdsRippleDuration: number;
+    sdsRippleMaxConcurrent: number;
+    addContainer: boolean;
+    position: string;
+    overflow: string;
+    private activeRipples;
+    private touchTimeout;
+    constructor(el: ElementRef, renderer: Renderer2);
+    onTouchStart(event: TouchEvent): void;
+    onMouseDown(event: MouseEvent): void;
+    private createRipple;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdsRippleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdsRippleDirective, "[sdsRipple]", never, { "sdsRippleColor": { "alias": "sdsRippleColor"; "required": false; }; "sdsRippleDuration": { "alias": "sdsRippleDuration"; "required": false; }; "sdsRippleMaxConcurrent": { "alias": "sdsRippleMaxConcurrent"; "required": false; }; }, {}, never, never, true, never>;
+}

package/src/lib/ripple/sds-ripple.css

@@ -0,0 +1,20 @@
+.sds-ripple-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.sds-ripple {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: sds-ripple-animation ease-out;
+    /* animation: sds-ripple-animation 0.6s ease-out; */
+    transform: scale(0);
+}
+
+@keyframes sds-ripple-animation {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/src/lib/segmented-control/segmented-control.component.d.ts

@@ -1,6 +1,8 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class SdsSegmentedControlComponent implements OnInit {
+export declare class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges {
+    private cdr;
+    clipPathContainerRef: ElementRef<HTMLDivElement>;
     items: any[] | undefined;
     value: any;
     valueExpr: string;
@@ -11,11 +13,15 @@ export declare class SdsSegmentedControlComponent implements OnInit {
     disabled: boolean;
     style: 'default' | 'primary' | 'inverted';
     segmentPadding: 'tight' | 'loose';
+    enableAnimation: boolean;
     itemChange: EventEmitter<any>;
     valueChange: EventEmitter<any>;
-    constructor();
+    constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     selectItem(item: any, event: MouseEvent): void;
+    private updateClipPath;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsSegmentedControlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdsSegmentedControlComponent, "sds-segmented-control", never, { "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueExpr": { "alias": "valueExpr"; "required": false; }; "displayExpr": { "alias": "displayExpr"; "required": false; }; "iconExpr": { "alias": "iconExpr"; "required": false; }; "tooltipExpr": { "alias": "tooltipExpr"; "required": false; }; "idExpr": { "alias": "idExpr"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "style": { "alias": "style"; "required": false; }; "segmentPadding": { "alias": "segmentPadding"; "required": false; }; }, { "itemChange": "itemChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsSegmentedControlComponent, "sds-segmented-control", never, { "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueExpr": { "alias": "valueExpr"; "required": false; }; "displayExpr": { "alias": "displayExpr"; "required": false; }; "iconExpr": { "alias": "iconExpr"; "required": false; }; "tooltipExpr": { "alias": "tooltipExpr"; "required": false; }; "idExpr": { "alias": "idExpr"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "style": { "alias": "style"; "required": false; }; "segmentPadding": { "alias": "segmentPadding"; "required": false; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; }; }, { "itemChange": "itemChange"; "valueChange": "valueChange"; }, never, never, true, never>;
 }