@spicainternational/ngx-sds-components 7.12.0-beta.1 → 8.0.0

package/fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-tooltip.mjs","sources":["../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.ts","../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.html","../../../projects/ngx-sds-components/src/lib/tooltip/utils/tooltip.utils.ts","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.directive.ts","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.module.ts","../../../projects/ngx-sds-components/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\nimport { TooltipPosition, TooltipTheme } from '../tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n    templateUrl: './tooltip.component.html',\r\n    styleUrls: ['./tooltip.component.scss'],\r\n})\r\nexport class SdsTooltipComponent implements OnInit {\r\n\r\n    public tooltip: string = '';\r\n    public left: number = 0;\r\n    public top: number = 0;\r\n    public visible: boolean = false;\r\n\r\n    public tooltipIcon?: IconProp;\r\n    public tooltipClass?: string;\r\n\r\n    public position: TooltipPosition = 'above';\r\n    public theme: TooltipTheme = 'dark';\r\n\r\n\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <fa-icon class=\"sds-tooltip-icon\"\r\n        *ngIf=\"tooltipIcon\" \r\n        [icon]=\"tooltipIcon\">\r\n    </fa-icon>\r\n\r\n    <small class=\"sds-tooltip-text\">\r\n        {{ tooltip }}\r\n    </small>\r\n\r\n</div>\r\n","/**\r\n * Check if device is mobile phone or tablet\r\n * {@link https://stackoverflow.com/a/11381730 | [SO] Detecting a mobile browser }\r\n */\r\nexport const isMobile  = function() {\r\n    let check = false;\r\n    (function(a){\r\n        if(\r\n            // RegExp for mobile devices\r\n            /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i\r\n            // preform regex check\r\n            .test(a.substr(0,4))\r\n        ) \r\n        check = true;\r\n    })(navigator.userAgent||navigator.vendor||(window as any).opera);\r\n    return check;\r\n  };\r\n  ","import {\r\n    ApplicationRef,\r\n    ComponentFactoryResolver,\r\n    ComponentRef,\r\n    Directive,\r\n    ElementRef,\r\n    EmbeddedViewRef,\r\n    HostListener,\r\n    Injector,\r\n    Input,\r\n    OnChanges,\r\n    Renderer2,\r\n    SimpleChanges,\r\n    ViewContainerRef,\r\n} from '@angular/core';\r\nimport { SdsTooltipComponent } from './components/tooltip.component';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { isMobile } from './utils';\r\n\r\n@Directive({\r\n    selector: '[sdsTooltip]',\r\n})\r\nexport class TooltipDirective implements OnChanges {\r\n    @Input() tooltip = '';\r\n    @Input() tooltipClass = '';\r\n    @Input() tooltipIcon?: IconProp;\r\n    @Input() position: TooltipPosition = 'above';\r\n    @Input() theme: TooltipTheme = 'dark';\r\n    @Input() showDelay = 0;\r\n    @Input() hideDelay = 0;\r\n\r\n    private componentRef: ComponentRef<any> | null = null;\r\n    private showTimeout?: number;\r\n    private hideTimeout?: number;\r\n    private touchTimeout?: number;\r\n\r\n\r\n    constructor(\r\n        private elementRef: ElementRef,\r\n        private appRef: ApplicationRef,\r\n        private componentFactoryResolver: ComponentFactoryResolver,\r\n        //   private viewContainerRef: ViewContainerRef,\r\n        private injector: Injector,\r\n        // private renderer2: Renderer2\r\n    ) {\r\n        // this.renderer2.listen('window', 'scroll', (_) => {\r\n        //     console.log('scroll');\r\n        //     this.setHideTooltipTimeout();\r\n        // });\r\n    }\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['tooltip']) {\r\n            if (this.componentRef !== null) {\r\n                this.componentRef.instance.tooltip = this.tooltip;\r\n            }            \r\n        }\r\n\r\n        if (changes['tooltipIcon']) {\r\n            if (this.componentRef !== null) {\r\n                this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n            }            \r\n        } \r\n        \r\n        if (changes['tooltipClass']) {\r\n            if (this.componentRef !== null) {\r\n                this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n            }            \r\n        }            \r\n    }\r\n\r\n    @HostListener('mouseenter')\r\n    onMouseEnter(): void {\r\n        if(isMobile()) return;\r\n\r\n        this.initializeTooltip();\r\n    }\r\n\r\n    @HostListener('mouseleave')\r\n    onMouseLeave(): void {\r\n        if(isMobile()) return;\r\n\r\n        this.setHideTooltipTimeout();\r\n    }\r\n\r\n    // @HostListener(\"window:scroll\", [])\r\n    // onWindowScroll() {\r\n    //     console.log('scroll');\r\n    //     this.setHideTooltipTimeout();\r\n    // }\r\n\r\n    // @HostListener('window:scroll') onScroll(e: Event): void {\r\n    //     console.log((e.target as Element).scrollTop);\r\n    //  }\r\n\r\n    //  @HostListener('scroll') onScrollHost(e: Event): void {\r\n    //     console.log((e.target as Element).scrollTop);\r\n    //  }\r\n\r\n    @HostListener('mousemove', ['$event'])\r\n    onMouseMove($event: MouseEvent): void {\r\n        if(isMobile()) return;\r\n\r\n        if (this.componentRef !== null && this.position === 'dynamic') {\r\n            this.componentRef.instance.left = $event.clientX;\r\n            this.componentRef.instance.top = $event.clientY;\r\n            this.componentRef.instance.tooltip = this.tooltip;\r\n            this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n            this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n        }\r\n    }\r\n\r\n    @HostListener('touchstart', ['$event'])\r\n    onTouchStart($event: TouchEvent): void {\r\n        // Only triggered on mobile devices, no need to check device type\r\n        \r\n        window.clearTimeout(this.touchTimeout);\r\n        this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);\r\n    }\r\n\r\n    @HostListener('touchend')\r\n    onTouchEnd(): void {\r\n        // Only triggered on mobile devices, no need to check device type\r\n\r\n        window.clearTimeout(this.touchTimeout);\r\n        this.setHideTooltipTimeout();\r\n    }\r\n\r\n    private initializeTooltip() {\r\n        if (this.componentRef === null) {\r\n            window.clearInterval(this.hideDelay);\r\n\r\n            if (this.tooltip) {\r\n                const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);\r\n                this.componentRef = componentFactory.create(this.injector);\r\n\r\n                this.appRef.attachView(this.componentRef.hostView);\r\n                const [tooltipDOMElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;\r\n\r\n                this.setTooltipComponentProperties();\r\n\r\n                document.body.appendChild(tooltipDOMElement);\r\n                this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);\r\n            }\r\n        }\r\n    }\r\n\r\n    private setTooltipComponentProperties() {\r\n        if (this.componentRef !== null) {\r\n            this.componentRef.instance.tooltip = this.tooltip;\r\n            this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n            this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n            this.componentRef.instance.position = this.position;\r\n            this.componentRef.instance.theme = this.theme;\r\n\r\n            const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();\r\n\r\n            switch (this.position) {\r\n                case 'below': {\r\n                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n                    this.componentRef.instance.top = Math.round(bottom);\r\n                    break;\r\n                }\r\n                case 'above': {\r\n                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n                    this.componentRef.instance.top = Math.round(top);\r\n                    break;\r\n                }\r\n                case 'right': {\r\n                    this.componentRef.instance.left = Math.round(right);\r\n                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n                    break;\r\n                }\r\n                case 'left': {\r\n                    this.componentRef.instance.left = Math.round(left);\r\n                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n                    break;\r\n                }\r\n                default: {\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private showTooltip() {\r\n        if (this.tooltip && this.componentRef !== null) {\r\n            this.componentRef.instance.visible = true;\r\n        }\r\n    }\r\n\r\n    private setHideTooltipTimeout() {\r\n        this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this.destroy();\r\n    }\r\n\r\n    destroy(): void {\r\n        if (this.componentRef !== null) {\r\n            window.clearInterval(this.showTimeout);\r\n            window.clearInterval(this.hideDelay);\r\n            this.appRef.detachView(this.componentRef.hostView);\r\n            this.componentRef.destroy();\r\n            this.componentRef = null;\r\n        }\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTooltipComponent } from '../tooltip/components/tooltip.component';\r\nimport { TooltipDirective } from './tooltip.directive';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsTooltipComponent,\r\n    TooltipDirective\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule\r\n  ],\r\n  exports: [\r\n    TooltipDirective\r\n  ]\r\n})\r\nexport class SdsTooltipModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,146 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Inject, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import { fromEvent, groupBy, mergeAll } from 'rxjs';
-import * as i3 from 'devextreme-angular/ui/popover';
-import { DxPopoverModule } from 'devextreme-angular/ui/popover';
-import * as i4 from 'devextreme-angular/ui/scroll-view';
-import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
-
-class SdsAppSwitcherComponent {
-    constructor(_document) {
-        this._document = _document;
-        this.switchText = '';
-        this.discoverText = '';
-        /**
-         * @description
-         * Aria label appended to native button element. Defaults to 'Switch between apps'
-         */
-        this.ariaLabel = 'Switch between apps';
-        this.productClick = new EventEmitter();
-        this.elementUUID = 'sds-as-' + crypto.randomUUID();
-        this.showDropdown = false;
-        this._subscriptions = [];
-        this.showSkeleton = true;
-        this.activatedProducts = new Array();
-        this.discoverProducts = new Array();
-    }
-    ngOnInit() {
-        const keyboardEventsSubscription = fromEvent(this._document, 'keydown')
-            .pipe(groupBy((e) => e.code), mergeAll())
-            .subscribe((keyboardEvent) => {
-            if (keyboardEvent.code === 'Escape') {
-                this.onCloseDropdownPressed();
-            }
-        });
-        this._subscriptions.push(keyboardEventsSubscription);
-    }
-    ngOnChanges(changes) {
-        if (changes['userProductCodes'] || changes['tenantProducts'] || changes['productCode']) {
-            if (this.userProductCodes !== undefined && this.tenantProducts !== undefined && this.productCode !== undefined) {
-                this.activatedProducts = [];
-                this.discoverProducts = [];
-                this.tenantProducts.forEach(product => {
-                    if (this.userProductCodes.includes(product.code)) {
-                        // exclude current product from the list
-                        if (product.code != this.productCode) {
-                            this.activatedProducts.push(product);
-                        }
-                    }
-                    else {
-                        this.discoverProducts.push(product);
-                    }
-                });
-                this.showSkeleton = false;
-            }
-            else {
-                this.showSkeleton = true;
-            }
-            this.popover?.instance.repaint();
-        }
-    }
-    ngOnDestroy() {
-    }
-    emitProductClick(product) {
-        this.productClick.emit(product);
-    }
-    onCloseDropdownPressed() {
-        if (this.showDropdown) {
-            this.showDropdown = false;
-            this.popover?.instance.hide();
-        }
-    }
-    onDropdownClicked() {
-        this.showDropdown = !this.showDropdown;
-    }
-    onProductKeyReleased(event, product) {
-        if (event.key === 'Enter') {
-            this.productClick.emit(product);
-        }
-    }
-}
-SdsAppSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAppSwitcherComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-SdsAppSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsAppSwitcherComponent, 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    [id]=\"elementUUID\"\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-dark 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    [id]=\"elementUUID + '_dropdown'\"\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\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-dark)}::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: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "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", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "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: "component", type: i4.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: "15.2.10", ngImport: i0, type: SdsAppSwitcherComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-app-switcher', changeDetection: ChangeDetectionStrategy.OnPush, 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    [id]=\"elementUUID\"\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-dark 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    [id]=\"elementUUID + '_dropdown'\"\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\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-dark)}::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: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: ['popover', { static: false }]
-            }], productCode: [{
-                type: Input
-            }], userProductCodes: [{
-                type: Input
-            }], tenantProducts: [{
-                type: Input
-            }], switchText: [{
-                type: Input
-            }], discoverText: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], productClick: [{
-                type: Output
-            }] } });
-
-class SdsAppSwitcherModule {
-}
-SdsAppSwitcherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAppSwitcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsAppSwitcherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsAppSwitcherModule, declarations: [SdsAppSwitcherComponent], imports: [A11yModule,
-        CommonModule,
-        DxPopoverModule,
-        DxScrollViewModule], exports: [SdsAppSwitcherComponent] });
-SdsAppSwitcherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAppSwitcherModule, imports: [A11yModule,
-        CommonModule,
-        DxPopoverModule,
-        DxScrollViewModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAppSwitcherModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SdsAppSwitcherComponent
-                    ],
-                    imports: [
-                        A11yModule,
-                        CommonModule,
-                        DxPopoverModule,
-                        DxScrollViewModule,
-                    ],
-                    exports: [
-                        SdsAppSwitcherComponent
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdsAppSwitcherComponent, SdsAppSwitcherModule };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-app-switcher.mjs.map

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

@@ -1 +0,0 @@
-{"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/app-switcher.module.ts","../../../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 } 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\nimport { DOCUMENT } from '@angular/common';\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})\r\nexport class SdsAppSwitcherComponent implements OnInit, OnChanges, OnDestroy {\r\n    @ViewChild('popover', {static: false}) private popover?: DxPopoverComponent;\r\n\r\n    @Input() public productCode: Number | undefined;\r\n    @Input() public userProductCodes: Number[] | 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 Number[]).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    [id]=\"elementUUID\"\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-dark 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    [id]=\"elementUUID + '_dropdown'\"\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\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","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport {A11yModule} from '@angular/cdk/a11y';\r\nimport { SdsAppSwitcherComponent } from './app-switcher.component';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsAppSwitcherComponent\r\n  ],\r\n  imports: [\r\n    A11yModule,\r\n    CommonModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule,\r\n  ],\r\n  exports: [\r\n    SdsAppSwitcherComponent\r\n  ]\r\n})\r\nexport class SdsAppSwitcherModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,282 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import * as i2 from 'devextreme-angular/ui/popover';
-import { DxPopoverModule } from 'devextreme-angular/ui/popover';
-import * as i3 from 'devextreme-angular/ui/scroll-view';
-import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
-
-/**
- * Class definition
- * @property {string} text - text that is parsed for initials. If showHint is set to true this text will be shown in hint
- * @property {string} colorKey - value that is base for calculating color of avatar
- * @property {boolean} showHint - show hint with text
- * @property {string} initialsText - override internal extraction of initials and set avatar text directly
- *
- * @property {string} pictureUri - uri of picture to show on avatar (supports http/https URLs and base64 data URIs)
- * @property {string} pictureImageAlt - alt text for image, for accessibility
- * @property {string} pictureLoading - loading strategy for image, lazy or eager (only applies to URLs, not base64)
- * @property {boolean} picturePriority - if true image is considered high priority and will be loaded before other images (only applies to URLs, not base64)
- *
- * @property {string} badgeVisible - show badge on avatar
- * @property {string} badgePosition - position of badge
- * @property {string} badgeBackgroundColor - background color of badge
- * @property {string} badgeTextColor - text color of badge
- * @property {string} badgeHint - hint text for badge
- */
-class SdsAvatarComponent {
-    constructor() {
-        this.showHint = false;
-        this.borderStyle = 'none';
-        this.size = 2;
-        this.pictureImageAlt = 'User avatar';
-        this.pictureLoading = 'lazy';
-        this.picturePriority = false;
-        this.badgeVisible = false;
-        this.badgePosition = 'bottom-right';
-        this.badgeBackgroundColor = 'var(--bs-danger)';
-        this.badgeTextColor = 'white';
-        this.isBase64Image = false;
-        this.label = '';
-        this.showPicture = false;
-        this.colorClass = 'color18';
-        this.imageSizeInPixels = this.calculatePixelSize();
-    }
-    ngAfterViewInit() {
-        this.setShowPicture();
-        this.setColorClass();
-    }
-    ngOnChanges(changes) {
-        if (changes['initialsText']) {
-            this.setLabel();
-        }
-        if (changes['text']) {
-            this.setLabel();
-        }
-        if (changes['pictureUri']) {
-            this.setShowPicture();
-            this.checkIfBase64();
-        }
-        if (changes['colorKey']) {
-            this.setColorClass();
-        }
-        if (changes['size']) {
-            this.imageSizeInPixels = this.calculatePixelSize();
-        }
-    }
-    setShowPicture() {
-        this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;
-    }
-    checkIfBase64() {
-        if (this.pictureUri) {
-            // Check if the URI is a data URI (base64)
-            this.isBase64Image = this.pictureUri.startsWith('data:');
-        }
-        else {
-            this.isBase64Image = false;
-        }
-    }
-    setColorClass() {
-        if (this.colorKey) {
-            this.colorClass = 'color' + this.getColorIndex(this.colorKey);
-        }
-        else {
-            this.colorClass = 'color18';
-        }
-    }
-    setLabel() {
-        if (this.initialsText && this.initialsText?.length > 0) {
-            this.label = this.initialsText;
-        }
-        else {
-            this.label = '';
-            if (this.text && this.text?.length > 0) {
-                const initialsFromText = this.text
-                    .trim()
-                    .toUpperCase()
-                    .split(' ')
-                    .map((n) => n[0])
-                    .filter(x => !!x);
-                if (initialsFromText.length > 0) {
-                    this.label = initialsFromText[0];
-                    if (initialsFromText.length > 1) {
-                        this.label = `${this.label}${initialsFromText[initialsFromText.length - 1]}`;
-                    }
-                }
-            }
-        }
-    }
-    calculatePixelSize() {
-        // Convert rem to pixels (assuming 1rem = 16px, which is the browser default)
-        // You can adjust this multiplier based on your root font-size
-        const remToPixelRatio = 15;
-        return Math.round(this.size * remToPixelRatio);
-    }
-    getColorIndex(s) {
-        const length = 10;
-        if (!s) {
-            return 0;
-        }
-        let sumOfChars = s
-            .split('')
-            .map((x) => x.charCodeAt(0))
-            .reduce((a, b) => a + b, 0);
-        return sumOfChars % length;
-    }
-}
-SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsAvatarComponent, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", 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.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-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-avatar', changeDetection: ChangeDetectionStrategy.OnPush, 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.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-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;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: function () { return []; }, propDecorators: { text: [{
-                type: Input
-            }], colorKey: [{
-                type: Input
-            }], pictureUri: [{
-                type: Input
-            }], showHint: [{
-                type: Input
-            }], borderStyle: [{
-                type: Input
-            }], borderColor: [{
-                type: Input
-            }], initialsText: [{
-                type: Input
-            }], cursor: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], pictureImageAlt: [{
-                type: Input
-            }], pictureLoading: [{
-                type: Input
-            }], picturePriority: [{
-                type: Input
-            }], badgeVisible: [{
-                type: Input
-            }], badgePosition: [{
-                type: Input
-            }], badgeBackgroundColor: [{
-                type: Input
-            }], badgeTextColor: [{
-                type: Input
-            }], badgeHint: [{
-                type: Input
-            }] } });
-
-class SdsAvatarGroupComponent {
-    constructor() {
-        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();
-        this.dropdownContents = 'all';
-        this.dropdownMaxHeight = '';
-        this.dropdownTargetId = '';
-        // init values in constructor so storybook doesn't have issues with initial state
-        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;
-        this.overFlowBorderStyle = 'none';
-        this.showDropdown = false;
-        this.showOverflow = false;
-        this.avatars = [];
-        this.overflow = [];
-        this.inflow = [];
-        this.overflowCountDisplay = '';
-        this.size = 2;
-        this.stacked = false;
-    }
-    ngOnChanges(changes) {
-        if (changes['avatars'] || changes['max']) {
-            if (this.max && this.avatars) {
-                let avatars = [...this.avatars];
-                this.inflow = avatars.splice(0, this.max);
-                this.overflow = avatars;
-                this.showOverflow = this.overflow.length > 0;
-                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;
-                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';
-            }
-            else {
-                this.inflow = [...this.avatars];
-            }
-        }
-    }
-    ngOnInit() { }
-    onOverflowClicked(event, index, avatar) {
-        event.stopPropagation();
-        if (this.dropdownContents === 'overflow' && this.overflow.length === 0) {
-            this.showDropdown = false;
-            return;
-        }
-        const newDropdownTargetId = this.overflowElementUUID + index;
-        if (this.showDropdown && this.dropdownTargetId === newDropdownTargetId) {
-            this.showDropdown = false;
-            return;
-        }
-        this.dropdownInitiator = avatar;
-        this.dropdownTargetId = this.overflowElementUUID + index;
-        this.showDropdown = true;
-    }
-    stopEventPropagation(event) {
-        event.stopPropagation();
-    }
-}
-SdsAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsAvatarGroupComponent, 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "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", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "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: "component", type: i3.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: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { stacked: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], borderColor: [{
-                type: Input
-            }], avatars: [{
-                type: Input
-            }], dropdownContents: [{
-                type: Input
-            }], dropdownMaxHeight: [{
-                type: Input
-            }] } });
-
-const components = [
-    SdsAvatarComponent,
-    SdsAvatarGroupComponent
-];
-class SdsAvatarModule {
-}
-SdsAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarModule, declarations: [SdsAvatarComponent,
-        SdsAvatarGroupComponent], imports: [CommonModule,
-        DxPopoverModule,
-        DxScrollViewModule,
-        NgOptimizedImage], exports: [SdsAvatarComponent,
-        SdsAvatarGroupComponent] });
-SdsAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarModule, imports: [CommonModule,
-        DxPopoverModule,
-        DxScrollViewModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...components
-                    ],
-                    imports: [
-                        CommonModule,
-                        DxPopoverModule,
-                        DxScrollViewModule,
-                        NgOptimizedImage
-                    ],
-                    exports: [
-                        ...components
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdsAvatarComponent, SdsAvatarGroupComponent, SdsAvatarModule };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-avatar.mjs.map