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

package/README.md

@@ -1,17 +1,17 @@
-# ngx-sds-components
-
-ngx-sds-components is a comprehensive Angular component library based on Spica Design System designed to accelerate the development of modern, consistent, and accessible web applications. It provides a wide range of reusable UI components, utilities, and services that follow best practices and design guidelines, making it easy to build scalable and maintainable Angular projects.
-
-## Features
-- Rich set of UI components (forms, navigation, layout, feedback, and more)
-- Consistent design system for seamless user experience
-- Accessibility (a11y) support
-- Customizable and themeable components
-- Well-documented API and usage examples
-- Designed for Angular 13+
-
-## Installation
-
-```bash
-npm install ngx-sds-components --save
+# ngx-sds-components
+
+ngx-sds-components is a comprehensive Angular component library based on Spica Design System designed to accelerate the development of modern, consistent, and accessible web applications. It provides a wide range of reusable UI components, utilities, and services that follow best practices and design guidelines, making it easy to build scalable and maintainable Angular projects.
+
+## Features
+- Rich set of UI components (forms, navigation, layout, feedback, and more)
+- Consistent design system for seamless user experience
+- Accessibility (a11y) support
+- Customizable and themeable components
+- Well-documented API and usage examples
+- Designed for Angular 13+
+
+## Installation
+
+```bash
+npm install ngx-sds-components --save
 ```

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

@@ -80,7 +80,7 @@ class SdsAppSwitcherComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAppSwitcherComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAppSwitcherComponent, isStandalone: true, selector: "sds-app-switcher", inputs: { productCode: "productCode", userProductCodes: "userProductCodes", tenantProducts: "tenantProducts", switchText: "switchText", discoverText: "discoverText", ariaLabel: "ariaLabel" }, outputs: { productClick: "productClick" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div\r\n    sdsKeyboardShortcut\r\n    #popoverTarget\r\n    class=\"btn-group app-switcher\"\r\n    >\r\n    <button\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\r\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        (click)=\"onDropdownClicked()\">\r\n\r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n\r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n\r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n        </svg>\r\n    \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    [target]=\"popoverTarget\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\r\n    >\r\n    <dx-scroll-view\r\n        showScrollbar=\"always\">\r\n\r\n        <div cdkTrapFocus class=\"app-switcher-menu\">\r\n\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\r\n                    role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\r\n                role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:var(--bs-gray-800)}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}div.product:focus{background-color:var(--bs-gray-200);border-color:var(--bs-gray-200);color:var(--bs-gray-900)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAppSwitcherComponent, isStandalone: true, selector: "sds-app-switcher", inputs: { productCode: "productCode", userProductCodes: "userProductCodes", tenantProducts: "tenantProducts", switchText: "switchText", discoverText: "discoverText", ariaLabel: "ariaLabel" }, outputs: { productClick: "productClick" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #productTemplate let-product=\"product\">\n    <div class=\"product-logo\">\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\n    </div>\n    <div class=\"product-title d-flex align-items-center\">\n        {{product.name}}\n    </div>\n    <div class=\"product-description\">\n        {{product.description}}\n    </div>\n</ng-template>\n\n<div\n    sdsKeyboardShortcut\n    #popoverTarget\n    class=\"btn-group app-switcher\"\n    >\n    <button\n        type=\"button\"\n        tabindex=\"0\"\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\n        [attr.aria-label]=\"ariaLabel\"\n        (click)=\"onDropdownClicked()\">\n\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\n            <!-- Row 1 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\n\n            <!-- Row 2 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\n\n            <!-- Row 3 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\n        </svg>\n    \n    </button>\n</div>\n\n<dx-popover\n    #popover\n    [target]=\"popoverTarget\"\n    [(visible)]=\"showDropdown\"\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\n    >\n    <dx-scroll-view\n        showScrollbar=\"always\">\n\n        <div cdkTrapFocus class=\"app-switcher-menu\">\n\n            <ng-container *ngIf=\"showSkeleton\">\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\n                <h6 class=\"header\">{{ switchText }}</h6>\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(activatedProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\n                <h6 class=\"header\">{{ discoverText }}</h6>\n\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\n                role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(discoverProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </dx-scroll-view>\n</dx-popover>\n\n", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:var(--bs-gray-800)}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}div.product:focus{background-color:var(--bs-gray-200);border-color:var(--bs-gray-200);color:var(--bs-gray-900)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAppSwitcherComponent, decorators: [{
             type: Component,
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         DxPopoverModule,
                         DxScrollViewModule,
                         NgTemplateOutlet
-                    ], template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div\r\n    sdsKeyboardShortcut\r\n    #popoverTarget\r\n    class=\"btn-group app-switcher\"\r\n    >\r\n    <button\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\r\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        (click)=\"onDropdownClicked()\">\r\n\r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n\r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n\r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n        </svg>\r\n    \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    [target]=\"popoverTarget\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\r\n    >\r\n    <dx-scroll-view\r\n        showScrollbar=\"always\">\r\n\r\n        <div cdkTrapFocus class=\"app-switcher-menu\">\r\n\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\r\n                    role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\r\n                role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:var(--bs-gray-800)}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}div.product:focus{background-color:var(--bs-gray-200);border-color:var(--bs-gray-200);color:var(--bs-gray-900)}\n"] }]
+                    ], template: "<ng-template #productTemplate let-product=\"product\">\n    <div class=\"product-logo\">\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\n    </div>\n    <div class=\"product-title d-flex align-items-center\">\n        {{product.name}}\n    </div>\n    <div class=\"product-description\">\n        {{product.description}}\n    </div>\n</ng-template>\n\n<div\n    sdsKeyboardShortcut\n    #popoverTarget\n    class=\"btn-group app-switcher\"\n    >\n    <button\n        type=\"button\"\n        tabindex=\"0\"\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\n        [attr.aria-label]=\"ariaLabel\"\n        (click)=\"onDropdownClicked()\">\n\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\n            <!-- Row 1 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\n\n            <!-- Row 2 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\n\n            <!-- Row 3 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\n        </svg>\n    \n    </button>\n</div>\n\n<dx-popover\n    #popover\n    [target]=\"popoverTarget\"\n    [(visible)]=\"showDropdown\"\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\n    >\n    <dx-scroll-view\n        showScrollbar=\"always\">\n\n        <div cdkTrapFocus class=\"app-switcher-menu\">\n\n            <ng-container *ngIf=\"showSkeleton\">\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\n                <h6 class=\"header\">{{ switchText }}</h6>\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(activatedProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\n                <h6 class=\"header\">{{ discoverText }}</h6>\n\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\n                role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(discoverProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </dx-scroll-view>\n</dx-popover>\n\n", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:var(--bs-gray-800)}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}div.product:focus{background-color:var(--bs-gray-200);border-color:var(--bs-gray-200);color:var(--bs-gray-900)}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-app-switcher.mjs","sources":["../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.html","../../../projects/ngx-sds-components/src/lib/app-switcher/spicainternational-ngx-sds-components-src-lib-app-switcher.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, DOCUMENT } from '@angular/core';\r\nimport { DxPopoverComponent } from 'devextreme-angular';\r\n\r\nimport { ProductModel } from './app-switcher.model';\r\nimport { fromEvent, groupBy, mergeAll, Subscription } from 'rxjs';\r\n\r\nimport { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\r\n\r\n@Component({\r\n    selector: 'sds-app-switcher',\r\n    templateUrl: './app-switcher.component.html',\r\n    styleUrls: ['./app-switcher.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [\r\n        NgIf,\r\n        NgFor,\r\n        CdkTrapFocus,\r\n        DxPopoverModule,\r\n        DxScrollViewModule,\r\n        NgTemplateOutlet\r\n    ]\r\n})\r\nexport class SdsAppSwitcherComponent implements OnInit, OnChanges, OnDestroy {\r\n    @ViewChild('popover', {static: false}) private popover?: DxPopoverComponent;\r\n\r\n    @Input() public productCode: string | undefined;\r\n    @Input() public userProductCodes: string[] | undefined;\r\n    @Input() public tenantProducts: ProductModel[] | undefined;\r\n    @Input() public switchText: string = '';\r\n    @Input() public discoverText: string = '';\r\n\r\n    /**\r\n     * @description\r\n     * Aria label appended to native button element. Defaults to 'Switch between apps'\r\n     */\r\n    @Input() public ariaLabel: string = 'Switch between apps'\r\n\r\n    @Output() public productClick: EventEmitter<ProductModel> = new EventEmitter();\r\n\r\n\r\n    public activatedProducts: ProductModel[];\r\n    public discoverProducts: ProductModel[];\r\n\r\n    public showSkeleton: boolean;\r\n\r\n    public elementUUID = 'sds-as-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n\r\n    private _subscriptions: Subscription[] = [];\r\n\r\n    constructor(@Inject(DOCUMENT) private readonly _document: Document) {\r\n        this.showSkeleton = true;\r\n        this.activatedProducts = new Array<ProductModel>();\r\n        this.discoverProducts = new Array<ProductModel>();\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        const keyboardEventsSubscription = fromEvent<KeyboardEvent>(\r\n            this._document,\r\n              'keydown'\r\n            )\r\n            .pipe(\r\n                groupBy((e: KeyboardEvent) => e.code),\r\n                mergeAll()\r\n            )\r\n            .subscribe((keyboardEvent:KeyboardEvent) => {\r\n                if (keyboardEvent.code === 'Escape') {\r\n                  this.onCloseDropdownPressed();\r\n                }\r\n\r\n            });\r\n\r\n            this._subscriptions.push(keyboardEventsSubscription);\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (changes['userProductCodes'] || changes['tenantProducts'] || changes['productCode']) {\r\n            if (this.userProductCodes !== undefined && this.tenantProducts !== undefined && this.productCode !== undefined) {\r\n                this.activatedProducts = [];\r\n                this.discoverProducts = [];\r\n\r\n                this.tenantProducts.forEach(product => {\r\n                    if ((this.userProductCodes as string[]).includes(product.code)) {\r\n                        // exclude current product from the list\r\n                        if (product.code != this.productCode) {\r\n                            this.activatedProducts.push(product);\r\n                        }\r\n                    } else {\r\n                        this.discoverProducts.push(product);\r\n                    }\r\n                });\r\n                this.showSkeleton = false;\r\n            } else {\r\n                this.showSkeleton = true;\r\n            }\r\n            this.popover?.instance.repaint();\r\n        }\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n\r\n    }\r\n\r\n    public emitProductClick(product: ProductModel): void {\r\n        this.productClick.emit(product);\r\n    }\r\n\r\n    public onCloseDropdownPressed(): void {\r\n        if (this.showDropdown) {\r\n            this.showDropdown = false;\r\n            this.popover?.instance.hide();\r\n        }\r\n    }\r\n\r\n    public onDropdownClicked(){\r\n        this.showDropdown = !this.showDropdown;\r\n    }\r\n\r\n    public onProductKeyReleased(event: KeyboardEvent, product: ProductModel) {\r\n        if (event.key === 'Enter') {\r\n            this.productClick.emit(product)\r\n        }\r\n    }\r\n\r\n}\r\n","<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div\r\n    sdsKeyboardShortcut\r\n    #popoverTarget\r\n    class=\"btn-group app-switcher\"\r\n    >\r\n    <button\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\r\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        (click)=\"onDropdownClicked()\">\r\n\r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n\r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n\r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n        </svg>\r\n    \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    [target]=\"popoverTarget\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\r\n    >\r\n    <dx-scroll-view\r\n        showScrollbar=\"always\">\r\n\r\n        <div cdkTrapFocus class=\"app-switcher-menu\">\r\n\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\r\n                    role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\r\n                role=\"button\"\r\n                    tabindex=\"0\"\r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\"\r\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\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-app-switcher.mjs","sources":["../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.html","../../../projects/ngx-sds-components/src/lib/app-switcher/spicainternational-ngx-sds-components-src-lib-app-switcher.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, DOCUMENT } from '@angular/core';\nimport { DxPopoverComponent } from 'devextreme-angular';\n\nimport { ProductModel } from './app-switcher.model';\nimport { fromEvent, groupBy, mergeAll, Subscription } from 'rxjs';\n\nimport { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\n\n@Component({\n    selector: 'sds-app-switcher',\n    templateUrl: './app-switcher.component.html',\n    styleUrls: ['./app-switcher.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        NgIf,\n        NgFor,\n        CdkTrapFocus,\n        DxPopoverModule,\n        DxScrollViewModule,\n        NgTemplateOutlet\n    ]\n})\nexport class SdsAppSwitcherComponent implements OnInit, OnChanges, OnDestroy {\n    @ViewChild('popover', {static: false}) private popover?: DxPopoverComponent;\n\n    @Input() public productCode: string | undefined;\n    @Input() public userProductCodes: string[] | undefined;\n    @Input() public tenantProducts: ProductModel[] | undefined;\n    @Input() public switchText: string = '';\n    @Input() public discoverText: string = '';\n\n    /**\n     * @description\n     * Aria label appended to native button element. Defaults to 'Switch between apps'\n     */\n    @Input() public ariaLabel: string = 'Switch between apps'\n\n    @Output() public productClick: EventEmitter<ProductModel> = new EventEmitter();\n\n\n    public activatedProducts: ProductModel[];\n    public discoverProducts: ProductModel[];\n\n    public showSkeleton: boolean;\n\n    public elementUUID = 'sds-as-' + crypto.randomUUID();\n    public showDropdown = false;\n\n    private _subscriptions: Subscription[] = [];\n\n    constructor(@Inject(DOCUMENT) private readonly _document: Document) {\n        this.showSkeleton = true;\n        this.activatedProducts = new Array<ProductModel>();\n        this.discoverProducts = new Array<ProductModel>();\n    }\n\n    ngOnInit(): void {\n        const keyboardEventsSubscription = fromEvent<KeyboardEvent>(\n            this._document,\n              'keydown'\n            )\n            .pipe(\n                groupBy((e: KeyboardEvent) => e.code),\n                mergeAll()\n            )\n            .subscribe((keyboardEvent:KeyboardEvent) => {\n                if (keyboardEvent.code === 'Escape') {\n                  this.onCloseDropdownPressed();\n                }\n\n            });\n\n            this._subscriptions.push(keyboardEventsSubscription);\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if (changes['userProductCodes'] || changes['tenantProducts'] || changes['productCode']) {\n            if (this.userProductCodes !== undefined && this.tenantProducts !== undefined && this.productCode !== undefined) {\n                this.activatedProducts = [];\n                this.discoverProducts = [];\n\n                this.tenantProducts.forEach(product => {\n                    if ((this.userProductCodes as string[]).includes(product.code)) {\n                        // exclude current product from the list\n                        if (product.code != this.productCode) {\n                            this.activatedProducts.push(product);\n                        }\n                    } else {\n                        this.discoverProducts.push(product);\n                    }\n                });\n                this.showSkeleton = false;\n            } else {\n                this.showSkeleton = true;\n            }\n            this.popover?.instance.repaint();\n        }\n    }\n\n    ngOnDestroy(): void {\n\n    }\n\n    public emitProductClick(product: ProductModel): void {\n        this.productClick.emit(product);\n    }\n\n    public onCloseDropdownPressed(): void {\n        if (this.showDropdown) {\n            this.showDropdown = false;\n            this.popover?.instance.hide();\n        }\n    }\n\n    public onDropdownClicked(){\n        this.showDropdown = !this.showDropdown;\n    }\n\n    public onProductKeyReleased(event: KeyboardEvent, product: ProductModel) {\n        if (event.key === 'Enter') {\n            this.productClick.emit(product)\n        }\n    }\n\n}\n","<ng-template #productTemplate let-product=\"product\">\n    <div class=\"product-logo\">\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\n    </div>\n    <div class=\"product-title d-flex align-items-center\">\n        {{product.name}}\n    </div>\n    <div class=\"product-description\">\n        {{product.description}}\n    </div>\n</ng-template>\n\n<div\n    sdsKeyboardShortcut\n    #popoverTarget\n    class=\"btn-group app-switcher\"\n    >\n    <button\n        type=\"button\"\n        tabindex=\"0\"\n        class=\"btn btn-link rounded p-0 text-gray-800 switcher-button d-flex align-items-center justify-content-center\"\n        [attr.aria-controls]=\"elementUUID + '_dropdown'\"\n        [attr.aria-label]=\"ariaLabel\"\n        (click)=\"onDropdownClicked()\">\n\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\n            <!-- Row 1 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\n\n            <!-- Row 2 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\n\n            <!-- Row 3 -->\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\n        </svg>\n    \n    </button>\n</div>\n\n<dx-popover\n    #popover\n    [target]=\"popoverTarget\"\n    [(visible)]=\"showDropdown\"\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover sds-dx-popup-no-arrow' }\"\n    >\n    <dx-scroll-view\n        showScrollbar=\"always\">\n\n        <div cdkTrapFocus class=\"app-switcher-menu\">\n\n            <ng-container *ngIf=\"showSkeleton\">\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\n                <h6 class=\"header\">{{ switchText }}</h6>\n                <div *ngFor=\"let activatedProduct of activatedProducts\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(activatedProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, activatedProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\n                <h6 class=\"header\">{{ discoverText }}</h6>\n\n                <div *ngFor=\"let discoverProduct of discoverProducts\"\n                role=\"button\"\n                    tabindex=\"0\"\n                    class=\"product\"\n                    (click)=\"emitProductClick(discoverProduct)\"\n                    (keydown)=\"onProductKeyReleased($event, discoverProduct)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"productTemplate\"\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </dx-scroll-view>\n</dx-popover>\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAyBa,uBAAuB,CAAA;AA4BhC,IAAA,WAAA,CAA+C,SAAmB,EAAA;QAAnB,IAAA,CAAA,SAAS,GAAT,SAAS;QAtBxC,IAAA,CAAA,UAAU,GAAW,EAAE;QACvB,IAAA,CAAA,YAAY,GAAW,EAAE;AAEzC;;;AAGG;QACa,IAAA,CAAA,SAAS,GAAW,qBAAqB;AAExC,QAAA,IAAA,CAAA,YAAY,GAA+B,IAAI,YAAY,EAAE;AAQvE,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC,UAAU,EAAE;QAC7C,IAAA,CAAA,YAAY,GAAG,KAAK;QAEnB,IAAA,CAAA,cAAc,GAAmB,EAAE;AAGvC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,KAAK,EAAgB;AAClD,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,KAAK,EAAgB;IACrD;IAEA,QAAQ,GAAA;QACJ,MAAM,0BAA0B,GAAG,SAAS,CACxC,IAAI,CAAC,SAAS,EACZ,SAAS;AAEV,aAAA,IAAI,CACD,OAAO,CAAC,CAAC,CAAgB,KAAK,CAAC,CAAC,IAAI,CAAC,EACrC,QAAQ,EAAE;AAEb,aAAA,SAAS,CAAC,CAAC,aAA2B,KAAI;AACvC,YAAA,IAAI,aAAa,CAAC,IAAI,KAAK,QAAQ,EAAE;gBACnC,IAAI,CAAC,sBAAsB,EAAE;YAC/B;AAEJ,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,0BAA0B,CAAC;IAC5D;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;AACpF,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAC5G,gBAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;AAC3B,gBAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;AAE1B,gBAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,IAAG;oBAClC,IAAK,IAAI,CAAC,gBAA6B,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;wBAE5D,IAAI,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;AAClC,4BAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;wBACxC;oBACJ;yBAAO;AACH,wBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC;oBACvC;AACJ,gBAAA,CAAC,CAAC;AACF,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;YAC7B;iBAAO;AACH,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI;YAC5B;AACA,YAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE;QACpC;IACJ;IAEA,WAAW,GAAA;IAEX;AAEO,IAAA,gBAAgB,CAAC,OAAqB,EAAA;AACzC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;IACnC;IAEO,sBAAsB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,YAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE;QACjC;IACJ;IAEO,iBAAiB,GAAA;AACpB,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;IAC1C;IAEO,oBAAoB,CAAC,KAAoB,EAAE,OAAqB,EAAA;AACnE,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACvB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;QACnC;IACJ;AApGS,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,kBA4BZ,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AA5BnB,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,WAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzBpC,05HA+FA,EAAA,MAAA,EAAA,CAAA,oWAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED9EQ,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACJ,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACL,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,wBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,kBAAkB,wxBAClB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAGX,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAdnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACL,IAAI;wBACJ,KAAK;wBACL,YAAY;wBACZ,eAAe;wBACf,kBAAkB;wBAClB;AACH,qBAAA,EAAA,QAAA,EAAA,05HAAA,EAAA,MAAA,EAAA,CAAA,oWAAA,CAAA,EAAA;;0BA8BY,MAAM;2BAAC,QAAQ;;sBA3B3B,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,SAAS,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC;;sBAEpC;;sBACA;;sBACA;;sBACA;;sBACA;;sBAMA;;sBAEA;;;AExCL;;AAEG;;"}

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

@@ -125,11 +125,11 @@ class SdsAvatarComponent {
         return sumOfChars % length;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAvatarComponent, isStandalone: true, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", borderWidth: "borderWidth", initialsText: "initialsText", cursor: "cursor", size: "size", pictureImageAlt: "pictureImageAlt", pictureLoading: "pictureLoading", picturePriority: "picturePriority", badgeVisible: "badgeVisible", badgePosition: "badgePosition", badgeBackgroundColor: "badgeBackgroundColor", badgeTextColor: "badgeTextColor", badgeHint: "badgeHint" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\r\n    [class]=\"colorClass\"\r\n    [class.hasPicture]=\"showPicture\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.border-width]=\"borderWidth\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n    [style.font-size.rem]=\"size\"\r\n>\r\n    <span \r\n        *ngIf=\"!showPicture\" \r\n        class=\"initials\"\r\n        >\r\n        {{ label }}\r\n    </span>\r\n\r\n    <!-- For base64 images, use regular src attribute -->\r\n    <img \r\n        *ngIf=\"showPicture && isBase64Image\" \r\n        [src]=\"pictureUri\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        class=\"avatar-image\" />\r\n\r\n    <!-- For URL images, use ngSrc with optimization features -->\r\n    <img \r\n        *ngIf=\"showPicture && !isBase64Image\" \r\n        [ngSrc]=\"pictureUri!\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        [loading]=\"pictureLoading\"\r\n        [priority]=\"picturePriority\"\r\n        class=\"avatar-image\" />\r\n\r\n    <span \r\n        *ngIf=\"badgeVisible\"\r\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\r\n        [class.top-right]=\"badgePosition === 'top-right'\"\r\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\r\n        [style.background-color]=\"badgeBackgroundColor\"\r\n        [style.color]=\"badgeTextColor\"\r\n        [title]=\"badgeHint ? badgeHint : ''\"\r\n        >\r\n    </span>\r\n</div>", styles: [".avatar{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.avatar.color0{color:#f44336;background-color:#feeceb;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}.avatar .notification-badge{width:.4em;height:.4em}.avatar .notification-badge.top-right{top:0;right:0;transform:translate(20%)}.avatar .notification-badge.bottom-right{bottom:0;right:0;transform:translate(20%,10%)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAvatarComponent, isStandalone: true, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", borderWidth: "borderWidth", initialsText: "initialsText", cursor: "cursor", size: "size", pictureImageAlt: "pictureImageAlt", pictureLoading: "pictureLoading", picturePriority: "picturePriority", badgeVisible: "badgeVisible", badgePosition: "badgePosition", badgeBackgroundColor: "badgeBackgroundColor", badgeTextColor: "badgeTextColor", badgeHint: "badgeHint" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\n    [class]=\"colorClass\"\n    [class.hasPicture]=\"showPicture\"\n    [title]=\"showHint ? text : ''\"\n    [style.border-style]=\"borderStyle.toString()\"\n    [style.border-color]=\"borderColor\"\n    [style.border-width]=\"borderWidth\"\n    [style.cursor]=\"cursor ? cursor : 'default'\"\n    [style.font-size.rem]=\"size\"\n>\n    <span \n        *ngIf=\"!showPicture\" \n        class=\"initials\"\n        >\n        {{ label }}\n    </span>\n\n    <!-- For base64 images, use regular src attribute -->\n    <img \n        *ngIf=\"showPicture && isBase64Image\" \n        [src]=\"pictureUri\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        class=\"avatar-image\" />\n\n    <!-- For URL images, use ngSrc with optimization features -->\n    <img \n        *ngIf=\"showPicture && !isBase64Image\" \n        [ngSrc]=\"pictureUri!\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        [loading]=\"pictureLoading\"\n        [priority]=\"picturePriority\"\n        class=\"avatar-image\" />\n\n    <span \n        *ngIf=\"badgeVisible\"\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\n        [class.top-right]=\"badgePosition === 'top-right'\"\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\n        [style.background-color]=\"badgeBackgroundColor\"\n        [style.color]=\"badgeTextColor\"\n        [title]=\"badgeHint ? badgeHint : ''\"\n        >\n    </span>\n</div>", styles: [".avatar{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.avatar.color0{color:#f44336;background-color:#feeceb;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}.avatar .notification-badge{width:.4em;height:.4em}.avatar .notification-badge.top-right{top:0;right:0;transform:translate(20%)}.avatar .notification-badge.bottom-right{bottom:0;right:0;transform:translate(20%,10%)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgOptimizedImage], template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\r\n    [class]=\"colorClass\"\r\n    [class.hasPicture]=\"showPicture\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.border-width]=\"borderWidth\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n    [style.font-size.rem]=\"size\"\r\n>\r\n    <span \r\n        *ngIf=\"!showPicture\" \r\n        class=\"initials\"\r\n        >\r\n        {{ label }}\r\n    </span>\r\n\r\n    <!-- For base64 images, use regular src attribute -->\r\n    <img \r\n        *ngIf=\"showPicture && isBase64Image\" \r\n        [src]=\"pictureUri\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        class=\"avatar-image\" />\r\n\r\n    <!-- For URL images, use ngSrc with optimization features -->\r\n    <img \r\n        *ngIf=\"showPicture && !isBase64Image\" \r\n        [ngSrc]=\"pictureUri!\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        [loading]=\"pictureLoading\"\r\n        [priority]=\"picturePriority\"\r\n        class=\"avatar-image\" />\r\n\r\n    <span \r\n        *ngIf=\"badgeVisible\"\r\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\r\n        [class.top-right]=\"badgePosition === 'top-right'\"\r\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\r\n        [style.background-color]=\"badgeBackgroundColor\"\r\n        [style.color]=\"badgeTextColor\"\r\n        [title]=\"badgeHint ? badgeHint : ''\"\r\n        >\r\n    </span>\r\n</div>", styles: [".avatar{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.avatar.color0{color:#f44336;background-color:#feeceb;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}.avatar .notification-badge{width:.4em;height:.4em}.avatar .notification-badge.top-right{top:0;right:0;transform:translate(20%)}.avatar .notification-badge.bottom-right{bottom:0;right:0;transform:translate(20%,10%)}\n"] }]
+            args: [{ selector: 'sds-avatar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgOptimizedImage], template: "<div\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\n    [class]=\"colorClass\"\n    [class.hasPicture]=\"showPicture\"\n    [title]=\"showHint ? text : ''\"\n    [style.border-style]=\"borderStyle.toString()\"\n    [style.border-color]=\"borderColor\"\n    [style.border-width]=\"borderWidth\"\n    [style.cursor]=\"cursor ? cursor : 'default'\"\n    [style.font-size.rem]=\"size\"\n>\n    <span \n        *ngIf=\"!showPicture\" \n        class=\"initials\"\n        >\n        {{ label }}\n    </span>\n\n    <!-- For base64 images, use regular src attribute -->\n    <img \n        *ngIf=\"showPicture && isBase64Image\" \n        [src]=\"pictureUri\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        class=\"avatar-image\" />\n\n    <!-- For URL images, use ngSrc with optimization features -->\n    <img \n        *ngIf=\"showPicture && !isBase64Image\" \n        [ngSrc]=\"pictureUri!\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        [loading]=\"pictureLoading\"\n        [priority]=\"picturePriority\"\n        class=\"avatar-image\" />\n\n    <span \n        *ngIf=\"badgeVisible\"\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\n        [class.top-right]=\"badgePosition === 'top-right'\"\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\n        [style.background-color]=\"badgeBackgroundColor\"\n        [style.color]=\"badgeTextColor\"\n        [title]=\"badgeHint ? badgeHint : ''\"\n        >\n    </span>\n</div>", styles: [".avatar{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.avatar.color0{color:#f44336;background-color:#feeceb;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}.avatar .notification-badge{width:.4em;height:.4em}.avatar .notification-badge.top-right{top:0;right:0;transform:translate(20%)}.avatar .notification-badge.bottom-right{bottom:0;right:0;transform:translate(20%,10%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], colorKey: [{
@@ -221,11 +221,11 @@ class SdsAvatarGroupComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAvatarGroupComponent, isStandalone: true, selector: "sds-avatar-group", inputs: { stacked: "stacked", max: "max", size: "size", borderColor: "borderColor", avatars: "avatars", dropdownContents: "dropdownContents", dropdownMaxHeight: "dropdownMaxHeight" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\r\n        [id]=\"overflowElementUUID + i\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        cursor=\"pointer\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        (click)=\"onOverflowClicked($event, i, avatar)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID + '-1'\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{dropdownTargetId}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\r\n        [maxHeight]=\"dropdownMaxHeight\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div \r\n                        class=\"ms-2 ps-1\"\r\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\r\n                        >\r\n                        {{avatar.text}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}::ng-deep .sds-avatar-group-overflow-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsAvatarGroupComponent, isStandalone: true, selector: "sds-avatar-group", inputs: { stacked: "stacked", max: "max", size: "size", borderColor: "borderColor", avatars: "avatars", dropdownContents: "dropdownContents", dropdownMaxHeight: "dropdownMaxHeight" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\n        [id]=\"overflowElementUUID + i\"\n        [text]=\"avatar.text\"\n        [colorKey]=\"avatar.colorKey\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n        cursor=\"pointer\"\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\n        [showHint]=\"true\"\n        [size]=\"size\"\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\n        (click)=\"onOverflowClicked($event, i, avatar)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n        >\n    </sds-avatar>\n\n    <sds-avatar\n        *ngIf=\"showOverflow\"\n        [id]=\"overflowElementUUID + '-1'\"\n        class=\"overflow\"\n        [initialsText]=\"overflowCountDisplay\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"overFlowBorderStyle\"\n        cursor=\"pointer\"\n        [size]=\"size\"\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n    >\n    </sds-avatar>\n\n    <dx-popover\n        target=\"#{{dropdownTargetId}}\"\n        [(visible)]=\"showDropdown\"\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\n        [maxHeight]=\"dropdownMaxHeight\"\n        [hideOnOutsideClick]=\"true\"\n        >\n        <dx-scroll-view\n            showScrollbar=\"always\">\n            <div class=\"overflow-avatars-container rounded\">\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n                    <sds-avatar\n                        [text]=\"avatar.text\"\n                        [colorKey]=\"avatar.colorKey\"\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\n                        borderColor=\"transparent\"\n                        [size]=\"1.8\"\n                    >\n                    </sds-avatar>\n                    <div \n                        class=\"ms-2 ps-1\"\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\n                        >\n                        {{avatar.text}}\n                    </div>\n                </div>\n            </div>\n        </dx-scroll-view>\n    </dx-popover>\n</div>\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}::ng-deep .sds-avatar-group-overflow-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsAvatarGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, SdsAvatarComponent, NgIf, DxPopoverModule, DxScrollViewModule], template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\r\n        [id]=\"overflowElementUUID + i\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        cursor=\"pointer\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        (click)=\"onOverflowClicked($event, i, avatar)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID + '-1'\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{dropdownTargetId}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\r\n        [maxHeight]=\"dropdownMaxHeight\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div \r\n                        class=\"ms-2 ps-1\"\r\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\r\n                        >\r\n                        {{avatar.text}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}::ng-deep .sds-avatar-group-overflow-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"] }]
+            args: [{ selector: 'sds-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, SdsAvatarComponent, NgIf, DxPopoverModule, DxScrollViewModule], template: "<div class=\"d-flex avatar-group-container\">\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\n        [id]=\"overflowElementUUID + i\"\n        [text]=\"avatar.text\"\n        [colorKey]=\"avatar.colorKey\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n        cursor=\"pointer\"\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\n        [showHint]=\"true\"\n        [size]=\"size\"\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\n        (click)=\"onOverflowClicked($event, i, avatar)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n        >\n    </sds-avatar>\n\n    <sds-avatar\n        *ngIf=\"showOverflow\"\n        [id]=\"overflowElementUUID + '-1'\"\n        class=\"overflow\"\n        [initialsText]=\"overflowCountDisplay\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"overFlowBorderStyle\"\n        cursor=\"pointer\"\n        [size]=\"size\"\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n    >\n    </sds-avatar>\n\n    <dx-popover\n        target=\"#{{dropdownTargetId}}\"\n        [(visible)]=\"showDropdown\"\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\n        [maxHeight]=\"dropdownMaxHeight\"\n        [hideOnOutsideClick]=\"true\"\n        >\n        <dx-scroll-view\n            showScrollbar=\"always\">\n            <div class=\"overflow-avatars-container rounded\">\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n                    <sds-avatar\n                        [text]=\"avatar.text\"\n                        [colorKey]=\"avatar.colorKey\"\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\n                        borderColor=\"transparent\"\n                        [size]=\"1.8\"\n                    >\n                    </sds-avatar>\n                    <div \n                        class=\"ms-2 ps-1\"\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\n                        >\n                        {{avatar.text}}\n                    </div>\n                </div>\n            </div>\n        </dx-scroll-view>\n    </dx-popover>\n</div>\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}::ng-deep .sds-avatar-group-overflow-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stacked: [{
                 type: Input
             }], max: [{

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n    AfterViewInit,\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    Input,\r\n    OnChanges,\r\n    SimpleChanges\r\n} from '@angular/core';\r\nimport { NgIf, NgOptimizedImage } from '@angular/common';\r\n\r\n/**\r\n * Class definition\r\n * @property {string} text - text that is parsed for initials. If showHint is set to true this text will be shown in hint\r\n * @property {string} colorKey - value that is base for calculating color of avatar\r\n * @property {boolean} showHint - show hint with text\r\n * @property {string} initialsText - override internal extraction of initials and set avatar text directly\r\n * \r\n * @property {string} pictureUri - uri of picture to show on avatar (supports http/https URLs and base64 data URIs)\r\n * @property {string} pictureImageAlt - alt text for image, for accessibility\r\n * @property {string} pictureLoading - loading strategy for image, lazy or eager (only applies to URLs, not base64)\r\n * @property {boolean} picturePriority - if true image is considered high priority and will be loaded before other images (only applies to URLs, not base64)\r\n * \r\n * @property {string} badgeVisible - show badge on avatar\r\n * @property {string} badgePosition - position of badge\r\n * @property {string} badgeBackgroundColor - background color of badge\r\n * @property {string} badgeTextColor - text color of badge\r\n * @property {string} badgeHint - hint text for badge\r\n */\r\n@Component({\r\n    selector: 'sds-avatar',\r\n    templateUrl: './avatar.component.html',\r\n    styleUrls: ['./avatar.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgIf, NgOptimizedImage]\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n    @Input() text?: string;\r\n    @Input() colorKey?: string;\r\n    @Input() pictureUri?: string;\r\n    @Input() showHint: boolean = false;\r\n    @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\r\n    @Input() borderColor?: string;\r\n    @Input() borderWidth?: string = '1px';\r\n    @Input() initialsText?: string;\r\n    @Input() cursor?: string;\r\n    @Input() size: number = 2;\r\n\r\n\r\n    @Input() pictureImageAlt: string = 'User avatar'; \r\n    @Input() pictureLoading: 'lazy' | 'eager' = 'lazy'; \r\n    @Input() picturePriority: boolean = false; \r\n\r\n\r\n    @Input() badgeVisible: boolean = false;\r\n    @Input() badgePosition: 'top-right' | 'bottom-right' = 'bottom-right';\r\n    @Input() badgeBackgroundColor = 'var(--bs-danger)';\r\n    @Input() badgeTextColor = 'white';\r\n    @Input() badgeHint?: string;\r\n\r\n\r\n    public label: string;\r\n    public showPicture: boolean;\r\n    public colorClass: string;\r\n    public imageSizeInPixels: number;\r\n    public isBase64Image: boolean = false;\r\n\r\n    constructor() {\r\n        this.label = '';\r\n        this.showPicture = false;\r\n        this.colorClass = 'color18';\r\n        this.imageSizeInPixels = this.calculatePixelSize();\r\n    }\r\n\r\n    ngAfterViewInit() {\r\n        this.setShowPicture();\r\n        this.setColorClass();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (changes['initialsText']) {\r\n            this.setLabel();\r\n        }\r\n\r\n        if (changes['text']) {\r\n            this.setLabel();\r\n        }\r\n\r\n        if (changes['pictureUri']) {\r\n            this.setShowPicture();\r\n            this.checkIfBase64();\r\n        }\r\n\r\n        if (changes['colorKey']){\r\n            this.setColorClass();\r\n        }\r\n\r\n        if (changes['size']) {\r\n            this.imageSizeInPixels = this.calculatePixelSize();\r\n        }\r\n    }\r\n\r\n    private setShowPicture(): void {\r\n        this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;\r\n    }\r\n\r\n    private checkIfBase64(): void {\r\n        if (this.pictureUri) {\r\n            // Check if the URI is a data URI (base64)\r\n            this.isBase64Image = this.pictureUri.startsWith('data:');\r\n        } else {\r\n            this.isBase64Image = false;\r\n        }\r\n    }\r\n\r\n    private setColorClass(): void {\r\n        if (this.colorKey) {\r\n            this.colorClass = 'color' + this.getColorIndex(this.colorKey);\r\n        } else {\r\n            this.colorClass = 'color18';\r\n        }\r\n    }\r\n\r\n    private setLabel(): void {\r\n        if (this.initialsText && this.initialsText?.length > 0) {\r\n            this.label = this.initialsText;\r\n        } else {\r\n            this.label = '';\r\n\r\n            if (this.text && this.text?.length > 0){\r\n                const initialsFromText = this.text\r\n                    .trim()\r\n                    .toUpperCase()\r\n                    .split(' ')\r\n                    .map((n) => n[0])\r\n                    .filter(x => !!x);\r\n\r\n                if (initialsFromText.length > 0) {\r\n                    this.label = initialsFromText[0];\r\n                    if (initialsFromText.length > 1) {\r\n                        this.label = `${this.label}${initialsFromText[initialsFromText.length - 1]}`\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private calculatePixelSize(): number {\r\n        // Convert rem to pixels (assuming 1rem = 16px, which is the browser default)\r\n        // You can adjust this multiplier based on your root font-size\r\n        const remToPixelRatio = 15;\r\n        return Math.round(this.size * remToPixelRatio);\r\n    }\r\n\r\n    private getColorIndex(s: string): number {\r\n        const length = 10;\r\n        if (!s) {\r\n            return 0;\r\n        }\r\n        let sumOfChars = s\r\n            .split('')\r\n            .map((x) => x.charCodeAt(0))\r\n            .reduce((a, b) => a + b, 0);\r\n        return sumOfChars % length;\r\n    }\r\n\r\n}","<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\r\n    [class]=\"colorClass\"\r\n    [class.hasPicture]=\"showPicture\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.border-width]=\"borderWidth\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n    [style.font-size.rem]=\"size\"\r\n>\r\n    <span \r\n        *ngIf=\"!showPicture\" \r\n        class=\"initials\"\r\n        >\r\n        {{ label }}\r\n    </span>\r\n\r\n    <!-- For base64 images, use regular src attribute -->\r\n    <img \r\n        *ngIf=\"showPicture && isBase64Image\" \r\n        [src]=\"pictureUri\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        class=\"avatar-image\" />\r\n\r\n    <!-- For URL images, use ngSrc with optimization features -->\r\n    <img \r\n        *ngIf=\"showPicture && !isBase64Image\" \r\n        [ngSrc]=\"pictureUri!\"\r\n        [width]=\"imageSizeInPixels\"\r\n        [height]=\"imageSizeInPixels\"\r\n        [alt]=\"pictureImageAlt\"\r\n        [loading]=\"pictureLoading\"\r\n        [priority]=\"picturePriority\"\r\n        class=\"avatar-image\" />\r\n\r\n    <span \r\n        *ngIf=\"badgeVisible\"\r\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\r\n        [class.top-right]=\"badgePosition === 'top-right'\"\r\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\r\n        [style.background-color]=\"badgeBackgroundColor\"\r\n        [style.color]=\"badgeTextColor\"\r\n        [title]=\"badgeHint ? badgeHint : ''\"\r\n        >\r\n    </span>\r\n</div>","import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { NgFor, NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-avatar-group',\r\n    templateUrl: './avatar-group.component.html',\r\n    styleUrls: ['./avatar-group.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgFor, SdsAvatarComponent, NgIf, DxPopoverModule, DxScrollViewModule]\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n    @Input() public stacked;\r\n    @Input() public max?: number;\r\n    @Input() public size: number;\r\n    @Input() public borderColor?: string;\r\n    @Input() public avatars: Array<AvatarModel>;\r\n    @Input() public dropdownContents: 'all' | 'overflow' = 'all';\r\n    @Input() public dropdownMaxHeight: string = '';\r\n\r\n    public overflow: Array<AvatarModel>;\r\n    public inflow: Array<AvatarModel>;\r\n\r\n    public overflowCountDisplay: string;\r\n    public overFlowBorderStyle: 'solid' | 'none';\r\n\r\n    public overflowElementUUID: string;\r\n    public showDropdown: boolean;\r\n    public showOverflow: boolean;\r\n\r\n    public dropdownTargetId: string = '';\r\n    public dropdownInitiator?: AvatarModel;\r\n\r\n    constructor() {\r\n        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n\r\n        // init values in constructor so storybook doesn't have issues with initial state\r\n\r\n        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;\r\n        this.overFlowBorderStyle = 'none';\r\n        this.showDropdown = false;\r\n        this.showOverflow = false;\r\n        this.avatars = [];\r\n        this.overflow = [];\r\n        this.inflow = [];\r\n        this.overflowCountDisplay = '';\r\n        this.size = 2;\r\n        this.stacked = false;\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['avatars'] || changes['max']){\r\n            if (this.max && this.avatars) {\r\n                let avatars = [...this.avatars];\r\n                this.inflow = avatars.splice(0, this.max);\r\n                this.overflow = avatars;\r\n                this.showOverflow = this.overflow.length > 0;\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.avatars];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked(event: MouseEvent, index: number, avatar?: AvatarModel) {\r\n        event.stopPropagation();\r\n\r\n        if (this.dropdownContents === 'overflow' && this.overflow.length === 0) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        const newDropdownTargetId = this.overflowElementUUID + index;\r\n        if (this.showDropdown && this.dropdownTargetId === newDropdownTargetId) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        this.dropdownInitiator = avatar;\r\n        this.dropdownTargetId = this.overflowElementUUID + index;\r\n        this.showDropdown = true;\r\n    }\r\n\r\n    public stopEventPropagation(event: MouseEvent) {\r\n        event.stopPropagation();\r\n    }\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\r\n        [id]=\"overflowElementUUID + i\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        cursor=\"pointer\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        (click)=\"onOverflowClicked($event, i, avatar)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID + '-1'\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{dropdownTargetId}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\r\n        [maxHeight]=\"dropdownMaxHeight\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div \r\n                        class=\"ms-2 ps-1\"\r\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\r\n                        >\r\n                        {{avatar.text}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAUA;;;;;;;;;;;;;;;;;AAiBG;MAQU,kBAAkB,CAAA;AA+B3B,IAAA,WAAA,GAAA;QA3BS,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,WAAW,GAA2C,MAAM;QAE5D,IAAA,CAAA,WAAW,GAAY,KAAK;QAG5B,IAAA,CAAA,IAAI,GAAW,CAAC;QAGhB,IAAA,CAAA,eAAe,GAAW,aAAa;QACvC,IAAA,CAAA,cAAc,GAAqB,MAAM;QACzC,IAAA,CAAA,eAAe,GAAY,KAAK;QAGhC,IAAA,CAAA,YAAY,GAAY,KAAK;QAC7B,IAAA,CAAA,aAAa,GAAiC,cAAc;QAC5D,IAAA,CAAA,oBAAoB,GAAG,kBAAkB;QACzC,IAAA,CAAA,cAAc,GAAG,OAAO;QAQ1B,IAAA,CAAA,aAAa,GAAY,KAAK;AAGjC,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE;IACtD;IAEA,eAAe,GAAA;QACX,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,aAAa,EAAE;IACxB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,cAAc,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,EAAE;QACnB;AAEA,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;YACjB,IAAI,CAAC,QAAQ,EAAE;QACnB;AAEA,QAAA,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,aAAa,EAAE;QACxB;AAEA,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,EAAC;YACpB,IAAI,CAAC,aAAa,EAAE;QACxB;AAEA,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;AACjB,YAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE;QACtD;IACJ;IAEQ,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC;IACvE;IAEQ,aAAa,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC;QAC5D;aAAO;AACH,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;QAC9B;IACJ;IAEQ,aAAa,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjE;aAAO;AACH,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;QAC/B;IACJ;IAEQ,QAAQ,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,EAAE;AACpD,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;QAClC;aAAO;AACH,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AAEf,YAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,EAAC;AACnC,gBAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AACzB,qBAAA,IAAI;AACJ,qBAAA,WAAW;qBACX,KAAK,CAAC,GAAG;qBACT,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;qBACf,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAErB,gBAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,oBAAA,IAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC;AAChC,oBAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,wBAAA,IAAI,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;oBAChF;gBACJ;YACJ;QACJ;IACJ;IAEQ,kBAAkB,GAAA;;;QAGtB,MAAM,eAAe,GAAG,EAAE;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC;IAClD;AAEQ,IAAA,aAAa,CAAC,CAAS,EAAA;QAC3B,MAAM,MAAM,GAAG,EAAE;QACjB,IAAI,CAAC,CAAC,EAAE;AACJ,YAAA,OAAO,CAAC;QACZ;QACA,IAAI,UAAU,GAAG;aACZ,KAAK,CAAC,EAAE;AACR,aAAA,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1B,aAAA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC/B,OAAO,UAAU,GAAG,MAAM;IAC9B;+GAhIS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnC/B,0vDAgDM,EAAA,MAAA,EAAA,CAAA,o1EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDfQ,IAAI,6FAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEvB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACI,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,WACtC,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0vDAAA,EAAA,MAAA,EAAA,CAAA,o1EAAA,CAAA,EAAA;;sBAGhC;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;sBACA;;sBACA;;;ME3CQ,uBAAuB,CAAA;AAuBhC,IAAA,WAAA,GAAA;;QAhBgB,IAAA,CAAA,gBAAgB,GAAuB,KAAK;QAC5C,IAAA,CAAA,iBAAiB,GAAW,EAAE;QAYvC,IAAA,CAAA,gBAAgB,GAAW,EAAE;;AAQhC,QAAA,IAAI,CAAC,mBAAmB,GAAG,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE;AACzE,QAAA,IAAI,CAAC,mBAAmB,GAAG,MAAM;AACjC,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE;AAChB,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;AAC9B,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;IACxB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAC;YACrC,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE;gBAC1B,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;AAC/B,gBAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC;AACzC,gBAAA,IAAI,CAAC,QAAQ,GAAG,OAAO;gBACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;AAC5C,gBAAA,IAAI,CAAC,oBAAoB,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AACpE,gBAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,MAAM;YACpG;iBAAO;gBACH,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;YACnC;QACJ;IACJ;AAEA,IAAA,QAAQ,KAAU;AAEX,IAAA,iBAAiB,CAAC,KAAiB,EAAE,KAAa,EAAE,MAAoB,EAAA;QAC3E,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACpE,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;YACzB;QACJ;AAEA,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG,KAAK;QAC5D,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,KAAK,mBAAmB,EAAE;AACpE,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;YACzB;QACJ;AAEA,QAAA,IAAI,CAAC,iBAAiB,GAAG,MAAM;QAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,GAAG,KAAK;AACxD,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;IAC5B;AAEO,IAAA,oBAAoB,CAAC,KAAiB,EAAA;QACzC,KAAK,CAAC,eAAe,EAAE;IAC3B;+GA9ES,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpC,suFAiEA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrDc,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,aAAA,EAAA,aAAA,EAAA,cAAA,EAAA,QAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,wBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,WAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,UAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAErE,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,WACtC,CAAC,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,eAAe,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,suFAAA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA;;sBAI9E;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;;AEtBL;;AAEG;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    Input,\n    OnChanges,\n    SimpleChanges\n} from '@angular/core';\nimport { NgIf, NgOptimizedImage } from '@angular/common';\n\n/**\n * Class definition\n * @property {string} text - text that is parsed for initials. If showHint is set to true this text will be shown in hint\n * @property {string} colorKey - value that is base for calculating color of avatar\n * @property {boolean} showHint - show hint with text\n * @property {string} initialsText - override internal extraction of initials and set avatar text directly\n * \n * @property {string} pictureUri - uri of picture to show on avatar (supports http/https URLs and base64 data URIs)\n * @property {string} pictureImageAlt - alt text for image, for accessibility\n * @property {string} pictureLoading - loading strategy for image, lazy or eager (only applies to URLs, not base64)\n * @property {boolean} picturePriority - if true image is considered high priority and will be loaded before other images (only applies to URLs, not base64)\n * \n * @property {string} badgeVisible - show badge on avatar\n * @property {string} badgePosition - position of badge\n * @property {string} badgeBackgroundColor - background color of badge\n * @property {string} badgeTextColor - text color of badge\n * @property {string} badgeHint - hint text for badge\n */\n@Component({\n    selector: 'sds-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgIf, NgOptimizedImage]\n})\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\n    @Input() text?: string;\n    @Input() colorKey?: string;\n    @Input() pictureUri?: string;\n    @Input() showHint: boolean = false;\n    @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\n    @Input() borderColor?: string;\n    @Input() borderWidth?: string = '1px';\n    @Input() initialsText?: string;\n    @Input() cursor?: string;\n    @Input() size: number = 2;\n\n\n    @Input() pictureImageAlt: string = 'User avatar'; \n    @Input() pictureLoading: 'lazy' | 'eager' = 'lazy'; \n    @Input() picturePriority: boolean = false; \n\n\n    @Input() badgeVisible: boolean = false;\n    @Input() badgePosition: 'top-right' | 'bottom-right' = 'bottom-right';\n    @Input() badgeBackgroundColor = 'var(--bs-danger)';\n    @Input() badgeTextColor = 'white';\n    @Input() badgeHint?: string;\n\n\n    public label: string;\n    public showPicture: boolean;\n    public colorClass: string;\n    public imageSizeInPixels: number;\n    public isBase64Image: boolean = false;\n\n    constructor() {\n        this.label = '';\n        this.showPicture = false;\n        this.colorClass = 'color18';\n        this.imageSizeInPixels = this.calculatePixelSize();\n    }\n\n    ngAfterViewInit() {\n        this.setShowPicture();\n        this.setColorClass();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if (changes['initialsText']) {\n            this.setLabel();\n        }\n\n        if (changes['text']) {\n            this.setLabel();\n        }\n\n        if (changes['pictureUri']) {\n            this.setShowPicture();\n            this.checkIfBase64();\n        }\n\n        if (changes['colorKey']){\n            this.setColorClass();\n        }\n\n        if (changes['size']) {\n            this.imageSizeInPixels = this.calculatePixelSize();\n        }\n    }\n\n    private setShowPicture(): void {\n        this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;\n    }\n\n    private checkIfBase64(): void {\n        if (this.pictureUri) {\n            // Check if the URI is a data URI (base64)\n            this.isBase64Image = this.pictureUri.startsWith('data:');\n        } else {\n            this.isBase64Image = false;\n        }\n    }\n\n    private setColorClass(): void {\n        if (this.colorKey) {\n            this.colorClass = 'color' + this.getColorIndex(this.colorKey);\n        } else {\n            this.colorClass = 'color18';\n        }\n    }\n\n    private setLabel(): void {\n        if (this.initialsText && this.initialsText?.length > 0) {\n            this.label = this.initialsText;\n        } else {\n            this.label = '';\n\n            if (this.text && this.text?.length > 0){\n                const initialsFromText = this.text\n                    .trim()\n                    .toUpperCase()\n                    .split(' ')\n                    .map((n) => n[0])\n                    .filter(x => !!x);\n\n                if (initialsFromText.length > 0) {\n                    this.label = initialsFromText[0];\n                    if (initialsFromText.length > 1) {\n                        this.label = `${this.label}${initialsFromText[initialsFromText.length - 1]}`\n                    }\n                }\n            }\n        }\n    }\n\n    private calculatePixelSize(): number {\n        // Convert rem to pixels (assuming 1rem = 16px, which is the browser default)\n        // You can adjust this multiplier based on your root font-size\n        const remToPixelRatio = 15;\n        return Math.round(this.size * remToPixelRatio);\n    }\n\n    private getColorIndex(s: string): number {\n        const length = 10;\n        if (!s) {\n            return 0;\n        }\n        let sumOfChars = s\n            .split('')\n            .map((x) => x.charCodeAt(0))\n            .reduce((a, b) => a + b, 0);\n        return sumOfChars % length;\n    }\n\n}","<div\n    class=\"avatar circle d-flex justify-content-center align-items-center position-relative\"\n    [class]=\"colorClass\"\n    [class.hasPicture]=\"showPicture\"\n    [title]=\"showHint ? text : ''\"\n    [style.border-style]=\"borderStyle.toString()\"\n    [style.border-color]=\"borderColor\"\n    [style.border-width]=\"borderWidth\"\n    [style.cursor]=\"cursor ? cursor : 'default'\"\n    [style.font-size.rem]=\"size\"\n>\n    <span \n        *ngIf=\"!showPicture\" \n        class=\"initials\"\n        >\n        {{ label }}\n    </span>\n\n    <!-- For base64 images, use regular src attribute -->\n    <img \n        *ngIf=\"showPicture && isBase64Image\" \n        [src]=\"pictureUri\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        class=\"avatar-image\" />\n\n    <!-- For URL images, use ngSrc with optimization features -->\n    <img \n        *ngIf=\"showPicture && !isBase64Image\" \n        [ngSrc]=\"pictureUri!\"\n        [width]=\"imageSizeInPixels\"\n        [height]=\"imageSizeInPixels\"\n        [alt]=\"pictureImageAlt\"\n        [loading]=\"pictureLoading\"\n        [priority]=\"picturePriority\"\n        class=\"avatar-image\" />\n\n    <span \n        *ngIf=\"badgeVisible\"\n        class=\"position-absolute notification-badge border border-light rounded-circle\"\n        [class.top-right]=\"badgePosition === 'top-right'\"\n        [class.bottom-right]=\"badgePosition === 'bottom-right'\"\n        [style.background-color]=\"badgeBackgroundColor\"\n        [style.color]=\"badgeTextColor\"\n        [title]=\"badgeHint ? badgeHint : ''\"\n        >\n    </span>\n</div>","import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\nimport { AvatarModel } from './avatar-group.model';\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\nimport { SdsAvatarComponent } from './avatar.component';\nimport { NgFor, NgIf } from '@angular/common';\n\n@Component({\n    selector: 'sds-avatar-group',\n    templateUrl: './avatar-group.component.html',\n    styleUrls: ['./avatar-group.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgFor, SdsAvatarComponent, NgIf, DxPopoverModule, DxScrollViewModule]\n})\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\n\n    @Input() public stacked;\n    @Input() public max?: number;\n    @Input() public size: number;\n    @Input() public borderColor?: string;\n    @Input() public avatars: Array<AvatarModel>;\n    @Input() public dropdownContents: 'all' | 'overflow' = 'all';\n    @Input() public dropdownMaxHeight: string = '';\n\n    public overflow: Array<AvatarModel>;\n    public inflow: Array<AvatarModel>;\n\n    public overflowCountDisplay: string;\n    public overFlowBorderStyle: 'solid' | 'none';\n\n    public overflowElementUUID: string;\n    public showDropdown: boolean;\n    public showOverflow: boolean;\n\n    public dropdownTargetId: string = '';\n    public dropdownInitiator?: AvatarModel;\n\n    constructor() {\n        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\n\n        // init values in constructor so storybook doesn't have issues with initial state\n\n        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;\n        this.overFlowBorderStyle = 'none';\n        this.showDropdown = false;\n        this.showOverflow = false;\n        this.avatars = [];\n        this.overflow = [];\n        this.inflow = [];\n        this.overflowCountDisplay = '';\n        this.size = 2;\n        this.stacked = false;\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['avatars'] || changes['max']){\n            if (this.max && this.avatars) {\n                let avatars = [...this.avatars];\n                this.inflow = avatars.splice(0, this.max);\n                this.overflow = avatars;\n                this.showOverflow = this.overflow.length > 0;\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\n                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\n            } else {\n                this.inflow = [...this.avatars];\n            }\n        }\n    }\n\n    ngOnInit(): void {}\n\n    public onOverflowClicked(event: MouseEvent, index: number, avatar?: AvatarModel) {\n        event.stopPropagation();\n\n        if (this.dropdownContents === 'overflow' && this.overflow.length === 0) {\n            this.showDropdown = false;\n            return;\n        }\n\n        const newDropdownTargetId = this.overflowElementUUID + index;\n        if (this.showDropdown && this.dropdownTargetId === newDropdownTargetId) {\n            this.showDropdown = false;\n            return;\n        }\n\n        this.dropdownInitiator = avatar;\n        this.dropdownTargetId = this.overflowElementUUID + index;\n        this.showDropdown = true;\n    }\n\n    public stopEventPropagation(event: MouseEvent) {\n        event.stopPropagation();\n    }\n}\n","<div class=\"d-flex avatar-group-container\">\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\n        [id]=\"overflowElementUUID + i\"\n        [text]=\"avatar.text\"\n        [colorKey]=\"avatar.colorKey\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n        cursor=\"pointer\"\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\n        [showHint]=\"true\"\n        [size]=\"size\"\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\n        (click)=\"onOverflowClicked($event, i, avatar)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n        >\n    </sds-avatar>\n\n    <sds-avatar\n        *ngIf=\"showOverflow\"\n        [id]=\"overflowElementUUID + '-1'\"\n        class=\"overflow\"\n        [initialsText]=\"overflowCountDisplay\"\n        [borderColor]=\"borderColor\"\n        [borderStyle]=\"overFlowBorderStyle\"\n        cursor=\"pointer\"\n        [size]=\"size\"\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (mouseup)=\"stopEventPropagation($event)\"\n    >\n    </sds-avatar>\n\n    <dx-popover\n        target=\"#{{dropdownTargetId}}\"\n        [(visible)]=\"showDropdown\"\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\n        [maxHeight]=\"dropdownMaxHeight\"\n        [hideOnOutsideClick]=\"true\"\n        >\n        <dx-scroll-view\n            showScrollbar=\"always\">\n            <div class=\"overflow-avatars-container rounded\">\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n                    <sds-avatar\n                        [text]=\"avatar.text\"\n                        [colorKey]=\"avatar.colorKey\"\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\n                        borderColor=\"transparent\"\n                        [size]=\"1.8\"\n                    >\n                    </sds-avatar>\n                    <div \n                        class=\"ms-2 ps-1\"\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\n                        >\n                        {{avatar.text}}\n                    </div>\n                </div>\n            </div>\n        </dx-scroll-view>\n    </dx-popover>\n</div>\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-badge.mjs

@@ -51,11 +51,11 @@ class SdsBadgeComponent {
         this.cdRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsBadgeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsBadgeComponent, isStandalone: true, selector: "sds-badge", ngImport: i0, template: "<div \r\n    class=\"sds-badge\"\r\n    [ngClass]=\"[variant]\"\r\n    [style.left.px]=\"left\"\r\n    [class.default]=\"size === 'default'\"\r\n    [class.small]=\"size === 'small'\"\r\n    >\r\n    <span *ngIf=\"size=='default'\">{{text}}</span>\r\n</div>\r\n", styles: [":host{position:absolute}.sds-badge{position:relative;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:1.3rem;border-width:1px;border-style:solid;border-color:#fff;cursor:default;transform:translate(calc(-50% - 1px),-50%)}.sds-badge.default{line-height:1.3rem;min-width:calc(1.3rem + 2px);padding-left:.3rem;padding-right:.3rem}.sds-badge.small{height:.75rem;width:.75rem}.sds-badge.primary{background-color:var(--bs-primary)}.sds-badge.secondary{border-color:var(--bs-gray-400);background-color:#fff;color:#000}.sds-badge.danger{background-color:var(--bs-danger)}.sds-badge.success{background-color:var(--bs-success)}.sds-badge.warning{background-color:var(--bs-warning)}.sds-badge.info{background-color:var(--bs-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsBadgeComponent, isStandalone: true, selector: "sds-badge", ngImport: i0, template: "<div \n    class=\"sds-badge\"\n    [ngClass]=\"[variant]\"\n    [style.left.px]=\"left\"\n    [class.default]=\"size === 'default'\"\n    [class.small]=\"size === 'small'\"\n    >\n    <span *ngIf=\"size=='default'\">{{text}}</span>\n</div>\n", styles: [":host{position:absolute}.sds-badge{position:relative;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:1.3rem;border-width:1px;border-style:solid;border-color:#fff;cursor:default;transform:translate(calc(-50% - 1px),-50%)}.sds-badge.default{line-height:1.3rem;min-width:calc(1.3rem + 2px);padding-left:.3rem;padding-right:.3rem}.sds-badge.small{height:.75rem;width:.75rem}.sds-badge.primary{background-color:var(--bs-primary)}.sds-badge.secondary{border-color:var(--bs-gray-400);background-color:#fff;color:#000}.sds-badge.danger{background-color:var(--bs-danger)}.sds-badge.success{background-color:var(--bs-success)}.sds-badge.warning{background-color:var(--bs-warning)}.sds-badge.info{background-color:var(--bs-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgIf], template: "<div \r\n    class=\"sds-badge\"\r\n    [ngClass]=\"[variant]\"\r\n    [style.left.px]=\"left\"\r\n    [class.default]=\"size === 'default'\"\r\n    [class.small]=\"size === 'small'\"\r\n    >\r\n    <span *ngIf=\"size=='default'\">{{text}}</span>\r\n</div>\r\n", styles: [":host{position:absolute}.sds-badge{position:relative;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:1.3rem;border-width:1px;border-style:solid;border-color:#fff;cursor:default;transform:translate(calc(-50% - 1px),-50%)}.sds-badge.default{line-height:1.3rem;min-width:calc(1.3rem + 2px);padding-left:.3rem;padding-right:.3rem}.sds-badge.small{height:.75rem;width:.75rem}.sds-badge.primary{background-color:var(--bs-primary)}.sds-badge.secondary{border-color:var(--bs-gray-400);background-color:#fff;color:#000}.sds-badge.danger{background-color:var(--bs-danger)}.sds-badge.success{background-color:var(--bs-success)}.sds-badge.warning{background-color:var(--bs-warning)}.sds-badge.info{background-color:var(--bs-info)}\n"] }]
+            args: [{ selector: 'sds-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgIf], template: "<div \n    class=\"sds-badge\"\n    [ngClass]=\"[variant]\"\n    [style.left.px]=\"left\"\n    [class.default]=\"size === 'default'\"\n    [class.small]=\"size === 'small'\"\n    >\n    <span *ngIf=\"size=='default'\">{{text}}</span>\n</div>\n", styles: [":host{position:absolute}.sds-badge{position:relative;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:1.3rem;border-width:1px;border-style:solid;border-color:#fff;cursor:default;transform:translate(calc(-50% - 1px),-50%)}.sds-badge.default{line-height:1.3rem;min-width:calc(1.3rem + 2px);padding-left:.3rem;padding-right:.3rem}.sds-badge.small{height:.75rem;width:.75rem}.sds-badge.primary{background-color:var(--bs-primary)}.sds-badge.secondary{border-color:var(--bs-gray-400);background-color:#fff;color:#000}.sds-badge.danger{background-color:var(--bs-danger)}.sds-badge.success{background-color:var(--bs-success)}.sds-badge.warning{background-color:var(--bs-warning)}.sds-badge.info{background-color:var(--bs-info)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class SdsBadgeDirective {

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-badge.mjs","sources":["../../../projects/ngx-sds-components/src/lib/badge/components/badge.component.ts","../../../projects/ngx-sds-components/src/lib/badge/components/badge.component.html","../../../projects/ngx-sds-components/src/lib/badge/badge.directive.ts","../../../projects/ngx-sds-components/src/lib/badge/spicainternational-ngx-sds-components-src-lib-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';\r\nimport { BadgeSize, BadgeVariant } from '../badge.types';\r\nimport { NgClass, NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-badge',\r\n    templateUrl: './badge.component.html',\r\n    styleUrls: ['./badge.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [NgClass, NgIf]\r\n})\r\nexport class SdsBadgeComponent implements OnInit {\r\n    private _text: string = '';\r\n    private _size: BadgeSize = 'default';\r\n    private _variant: BadgeVariant = 'primary';\r\n    private _left: number = 0;\r\n\r\n\r\n    public get text() {\r\n        return this._text;\r\n    }\r\n\r\n    public set text(value: string) {\r\n        if (this._text !== value) {\r\n            this._text = value;\r\n            this.refresh();\r\n        }\r\n    }\r\n\r\n    public get size() {\r\n        return this._size;\r\n    }\r\n\r\n    public set size(value: BadgeSize) {\r\n        if (this._size !== value) {\r\n            this._size = value;\r\n            this.refresh();\r\n        }\r\n    }\r\n\r\n    public get variant() {\r\n        return this._variant;\r\n    }\r\n\r\n    public set variant(value: BadgeVariant) {\r\n        if (this._variant !== value) {\r\n            this._variant = value;\r\n            this.refresh();\r\n        }\r\n    }\r\n\r\n    public get left() {\r\n        return this._left;\r\n    }\r\n\r\n    public set left(value: number) {\r\n        if (this._left !== value) {\r\n            this._left = value;\r\n            this.refresh();\r\n        }\r\n    }\r\n\r\n    \r\n    \r\n\r\n    constructor(\r\n        private readonly cdRef: ChangeDetectorRef\r\n    ) {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n\r\n    private refresh(){\r\n        this.cdRef.detectChanges();\r\n    }\r\n}\r\n","<div \r\n    class=\"sds-badge\"\r\n    [ngClass]=\"[variant]\"\r\n    [style.left.px]=\"left\"\r\n    [class.default]=\"size === 'default'\"\r\n    [class.small]=\"size === 'small'\"\r\n    >\r\n    <span *ngIf=\"size=='default'\">{{text}}</span>\r\n</div>\r\n","import {\r\n    AfterViewInit,\r\n    ApplicationRef,\r\n    ComponentRef,\r\n    Directive,\r\n    ElementRef,\r\n    Input,\r\n    OnChanges,\r\n    OnDestroy,\r\n    OnInit,\r\n    SimpleChanges,\r\n    ViewContainerRef,\r\n} from '@angular/core';\r\nimport { BadgeSize, BadgeVariant } from './badge.types';\r\nimport { SdsBadgeComponent } from './components/badge.component';\r\n\r\n@Directive({\r\n    selector: '[sdsBadge]',\r\n    standalone: true,\r\n})\r\nexport class SdsBadgeDirective implements OnInit, OnChanges, OnDestroy, AfterViewInit {\r\n    @Input() sdsBadge = '';\r\n    @Input() size: BadgeSize = 'default';\r\n    @Input() variant: BadgeVariant = 'primary';\r\n\r\n    private badgeComponentRef: ComponentRef<any> | null = null;\r\n    private observer: any; //ResizeObserver = null;\r\n\r\n    constructor(\r\n        private host: ElementRef,\r\n        private appRef: ApplicationRef,\r\n        private viewContainerRef: ViewContainerRef\r\n    ) {}\r\n\r\n    ngAfterViewInit(): void {\r\n        this.initializeBadge();\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        // const observer \r\n        this.observer = new ResizeObserver(_ => {\r\n            if (this.badgeComponentRef) {\r\n                this.setBadgePosition();\r\n                // this.badgeComponentRef.instance.left = this.host.nativeElement.offsetWidth;\r\n            }\r\n        });\r\n      \r\n        this.observer.observe(this.host.nativeElement);\r\n    };    \r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['sdsBadge'] && !changes['sdsBadge'].firstChange) {\r\n            const value = `${changes['sdsBadge'].currentValue}`.trim();\r\n            if (value?.length > 0) {\r\n                this.initializeBadge();\r\n            } else {\r\n                this.destroyBadgeComponentRef();\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        this.observer.unobserve(this.host.nativeElement);\r\n        this.observer.disconnect();\r\n\r\n        this.destroyBadgeComponentRef();\r\n    }\r\n\r\n    private initializeBadge() {\r\n        if (this.badgeComponentRef === null) {\r\n            if (this.sdsBadge) {\r\n                this.badgeComponentRef = this.viewContainerRef.createComponent(SdsBadgeComponent);\r\n                this.badgeComponentRef.instance.text = this.sdsBadge;\r\n                this.badgeComponentRef.instance.variant = this.variant;\r\n                this.badgeComponentRef.instance.size = this.size;\r\n\r\n                this.setBadgePosition();\r\n            }\r\n        } else {\r\n            this.badgeComponentRef.instance.text = this.sdsBadge;\r\n            this.badgeComponentRef.instance.variant = this.variant;\r\n            this.badgeComponentRef.instance.size = this.size;\r\n\r\n            this.setBadgePosition();\r\n        }\r\n    }\r\n\r\n    private destroyBadgeComponentRef(){\r\n        if (this.badgeComponentRef !== null) {\r\n            this.appRef.detachView(this.badgeComponentRef.hostView);\r\n            this.badgeComponentRef.destroy();\r\n            this.badgeComponentRef = null;\r\n        }        \r\n    }\r\n\r\n    private setBadgePosition(){\r\n        if (this.badgeComponentRef) {\r\n            this.badgeComponentRef.instance.left = this.host.nativeElement.offsetLeft + this.host.nativeElement.offsetWidth;\r\n            // console.log(`offsetLeft ${this.host.nativeElement.offsetLeft}, offsetWidth: ${this.host.nativeElement.offsetWidth}`);\r\n        }\r\n    }\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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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-badge.mjs","sources":["../../../projects/ngx-sds-components/src/lib/badge/components/badge.component.ts","../../../projects/ngx-sds-components/src/lib/badge/components/badge.component.html","../../../projects/ngx-sds-components/src/lib/badge/badge.directive.ts","../../../projects/ngx-sds-components/src/lib/badge/spicainternational-ngx-sds-components-src-lib-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { BadgeSize, BadgeVariant } from '../badge.types';\nimport { NgClass, NgIf } from '@angular/common';\n\n@Component({\n    selector: 'sds-badge',\n    templateUrl: './badge.component.html',\n    styleUrls: ['./badge.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgClass, NgIf]\n})\nexport class SdsBadgeComponent implements OnInit {\n    private _text: string = '';\n    private _size: BadgeSize = 'default';\n    private _variant: BadgeVariant = 'primary';\n    private _left: number = 0;\n\n\n    public get text() {\n        return this._text;\n    }\n\n    public set text(value: string) {\n        if (this._text !== value) {\n            this._text = value;\n            this.refresh();\n        }\n    }\n\n    public get size() {\n        return this._size;\n    }\n\n    public set size(value: BadgeSize) {\n        if (this._size !== value) {\n            this._size = value;\n            this.refresh();\n        }\n    }\n\n    public get variant() {\n        return this._variant;\n    }\n\n    public set variant(value: BadgeVariant) {\n        if (this._variant !== value) {\n            this._variant = value;\n            this.refresh();\n        }\n    }\n\n    public get left() {\n        return this._left;\n    }\n\n    public set left(value: number) {\n        if (this._left !== value) {\n            this._left = value;\n            this.refresh();\n        }\n    }\n\n    \n    \n\n    constructor(\n        private readonly cdRef: ChangeDetectorRef\n    ) {}\n\n    ngOnInit(): void {}\n\n\n    private refresh(){\n        this.cdRef.detectChanges();\n    }\n}\n","<div \n    class=\"sds-badge\"\n    [ngClass]=\"[variant]\"\n    [style.left.px]=\"left\"\n    [class.default]=\"size === 'default'\"\n    [class.small]=\"size === 'small'\"\n    >\n    <span *ngIf=\"size=='default'\">{{text}}</span>\n</div>\n","import {\n    AfterViewInit,\n    ApplicationRef,\n    ComponentRef,\n    Directive,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    SimpleChanges,\n    ViewContainerRef,\n} from '@angular/core';\nimport { BadgeSize, BadgeVariant } from './badge.types';\nimport { SdsBadgeComponent } from './components/badge.component';\n\n@Directive({\n    selector: '[sdsBadge]',\n    standalone: true,\n})\nexport class SdsBadgeDirective implements OnInit, OnChanges, OnDestroy, AfterViewInit {\n    @Input() sdsBadge = '';\n    @Input() size: BadgeSize = 'default';\n    @Input() variant: BadgeVariant = 'primary';\n\n    private badgeComponentRef: ComponentRef<any> | null = null;\n    private observer: any; //ResizeObserver = null;\n\n    constructor(\n        private host: ElementRef,\n        private appRef: ApplicationRef,\n        private viewContainerRef: ViewContainerRef\n    ) {}\n\n    ngAfterViewInit(): void {\n        this.initializeBadge();\n    }\n\n    ngOnInit(): void {\n        // const observer \n        this.observer = new ResizeObserver(_ => {\n            if (this.badgeComponentRef) {\n                this.setBadgePosition();\n                // this.badgeComponentRef.instance.left = this.host.nativeElement.offsetWidth;\n            }\n        });\n      \n        this.observer.observe(this.host.nativeElement);\n    };    \n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['sdsBadge'] && !changes['sdsBadge'].firstChange) {\n            const value = `${changes['sdsBadge'].currentValue}`.trim();\n            if (value?.length > 0) {\n                this.initializeBadge();\n            } else {\n                this.destroyBadgeComponentRef();\n            }\n        }\n    }\n\n    ngOnDestroy() {\n        this.observer.unobserve(this.host.nativeElement);\n        this.observer.disconnect();\n\n        this.destroyBadgeComponentRef();\n    }\n\n    private initializeBadge() {\n        if (this.badgeComponentRef === null) {\n            if (this.sdsBadge) {\n                this.badgeComponentRef = this.viewContainerRef.createComponent(SdsBadgeComponent);\n                this.badgeComponentRef.instance.text = this.sdsBadge;\n                this.badgeComponentRef.instance.variant = this.variant;\n                this.badgeComponentRef.instance.size = this.size;\n\n                this.setBadgePosition();\n            }\n        } else {\n            this.badgeComponentRef.instance.text = this.sdsBadge;\n            this.badgeComponentRef.instance.variant = this.variant;\n            this.badgeComponentRef.instance.size = this.size;\n\n            this.setBadgePosition();\n        }\n    }\n\n    private destroyBadgeComponentRef(){\n        if (this.badgeComponentRef !== null) {\n            this.appRef.detachView(this.badgeComponentRef.hostView);\n            this.badgeComponentRef.destroy();\n            this.badgeComponentRef = null;\n        }        \n    }\n\n    private setBadgePosition(){\n        if (this.badgeComponentRef) {\n            this.badgeComponentRef.instance.left = this.host.nativeElement.offsetLeft + this.host.nativeElement.offsetWidth;\n            // console.log(`offsetLeft ${this.host.nativeElement.offsetLeft}, offsetWidth: ${this.host.nativeElement.offsetWidth}`);\n        }\n    }\n\n}\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-callout.mjs

@@ -8,11 +8,11 @@ class SdsCalloutComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsCalloutComponent, isStandalone: true, selector: "sds-callout", inputs: { color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div class=\"callout\"\r\n    [class]=\"(color ? 'callout-' + color : null)\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsCalloutComponent, isStandalone: true, selector: "sds-callout", inputs: { color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div class=\"callout\"\n    [class]=\"(color ? 'callout-' + color : null)\"\n    [style.backgroundColor]=\"backgroundColor\"\n    >\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsCalloutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-callout', standalone: true, template: "<div class=\"callout\"\r\n    [class]=\"(color ? 'callout-' + color : null)\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    >\r\n    <ng-content></ng-content>\r\n</div>\r\n" }]
+            args: [{ selector: 'sds-callout', standalone: true, template: "<div class=\"callout\"\n    [class]=\"(color ? 'callout-' + color : null)\"\n    [style.backgroundColor]=\"backgroundColor\"\n    >\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], backgroundColor: [{

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-callout.mjs","sources":["../../../projects/ngx-sds-components/src/lib/callout/callout.component.ts","../../../projects/ngx-sds-components/src/lib/callout/callout.component.html","../../../projects/ngx-sds-components/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-callout',\r\n    templateUrl: './callout.component.html',\r\n    styleUrls: ['./callout.component.scss'],\r\n    standalone: true,\r\n})\r\nexport class SdsCalloutComponent implements OnInit {\r\n    @Input() color: string = 'info';\r\n    @Input() backgroundColor: string = 'white';\r\n    \r\n\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div class=\"callout\"\r\n    [class]=\"(color ? 'callout-' + color : null)\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    >\r\n    <ng-content></ng-content>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAQa,mBAAmB,CAAA;AAM5B,IAAA,WAAA,GAAA;QALS,IAAA,CAAA,KAAK,GAAW,MAAM;QACtB,IAAA,CAAA,eAAe,GAAW,OAAO;IAI3B;AAEf,IAAA,QAAQ,KAAU;+GART,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,uICRhC,0LAMA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDEa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cAGX,IAAI,EAAA,QAAA,EAAA,0LAAA,EAAA;;sBAGf;;sBACA;;;AEVL;;AAEG;;;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-callout.mjs","sources":["../../../projects/ngx-sds-components/src/lib/callout/callout.component.ts","../../../projects/ngx-sds-components/src/lib/callout/callout.component.html","../../../projects/ngx-sds-components/src/lib/callout/spicainternational-ngx-sds-components-src-lib-callout.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n    selector: 'sds-callout',\n    templateUrl: './callout.component.html',\n    styleUrls: ['./callout.component.scss'],\n    standalone: true,\n})\nexport class SdsCalloutComponent implements OnInit {\n    @Input() color: string = 'info';\n    @Input() backgroundColor: string = 'white';\n    \n\n\n    constructor() {}\n\n    ngOnInit(): void {}\n}\n","<div class=\"callout\"\n    [class]=\"(color ? 'callout-' + color : null)\"\n    [style.backgroundColor]=\"backgroundColor\"\n    >\n    <ng-content></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAQa,mBAAmB,CAAA;AAM5B,IAAA,WAAA,GAAA;QALS,IAAA,CAAA,KAAK,GAAW,MAAM;QACtB,IAAA,CAAA,eAAe,GAAW,OAAO;IAI3B;AAEf,IAAA,QAAQ,KAAU;+GART,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,uICRhC,8KAMA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDEa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cAGX,IAAI,EAAA,QAAA,EAAA,8KAAA,EAAA;;sBAGf;;sBACA;;;AEVL;;AAEG;;"}