@spicainternational/ngx-sds-components 5.0.1 → 5.2.0

package/esm2020/src/lib/tooltip/tooltip.directive.mjs

@@ -0,0 +1,155 @@
+import { Directive, HostListener, Input, } from '@angular/core';
+import { SdsTooltipComponent } from './components/tooltip.component';
+import * as i0 from "@angular/core";
+export class TooltipDirective {
+    constructor(elementRef, appRef, componentFactoryResolver, 
+    //   private viewContainerRef: ViewContainerRef,
+    injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.tooltip = '';
+        this.position = 'above';
+        this.theme = 'dark';
+        this.showDelay = 0;
+        this.hideDelay = 0;
+        this.componentRef = null;
+        // this.renderer2.listen('window', 'scroll', (_) => {
+        //     console.log('scroll');
+        //     this.setHideTooltipTimeout();
+        // });
+    }
+    onMouseEnter() {
+        this.initializeTooltip();
+    }
+    onMouseLeave() {
+        this.setHideTooltipTimeout();
+    }
+    // @HostListener("window:scroll", [])
+    // onWindowScroll() {
+    //     console.log('scroll');
+    //     this.setHideTooltipTimeout();
+    // }
+    // @HostListener('window:scroll') onScroll(e: Event): void {
+    //     console.log((e.target as Element).scrollTop);
+    //  }
+    //  @HostListener('scroll') onScrollHost(e: Event): void {
+    //     console.log((e.target as Element).scrollTop);
+    //  }
+    onMouseMove($event) {
+        if (this.componentRef !== null && this.position === 'dynamic') {
+            this.componentRef.instance.left = $event.clientX;
+            this.componentRef.instance.top = $event.clientY;
+            this.componentRef.instance.tooltip = this.tooltip;
+        }
+    }
+    onTouchStart($event) {
+        $event.preventDefault();
+        window.clearTimeout(this.touchTimeout);
+        this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);
+    }
+    onTouchEnd() {
+        window.clearTimeout(this.touchTimeout);
+        this.setHideTooltipTimeout();
+    }
+    initializeTooltip() {
+        if (this.componentRef === null) {
+            window.clearInterval(this.hideDelay);
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            const [tooltipDOMElement] = this.componentRef.hostView.rootNodes;
+            this.setTooltipComponentProperties();
+            document.body.appendChild(tooltipDOMElement);
+            this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
+        }
+    }
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tooltip;
+            this.componentRef.instance.position = this.position;
+            this.componentRef.instance.theme = this.theme;
+            const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
+            switch (this.position) {
+                case 'below': {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(bottom);
+                    break;
+                }
+                case 'above': {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(top);
+                    break;
+                }
+                case 'right': {
+                    this.componentRef.instance.left = Math.round(right);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                case 'left': {
+                    this.componentRef.instance.left = Math.round(left);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+    showTooltip() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.visible = true;
+        }
+    }
+    setHideTooltipTimeout() {
+        this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            window.clearInterval(this.showTimeout);
+            window.clearInterval(this.hideDelay);
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: TooltipDirective, selector: "[sdsTooltip]", inputs: { tooltip: "tooltip", position: "position", theme: "theme", showDelay: "showDelay", hideDelay: "hideDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { tooltip: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], showDelay: [{
+                type: Input
+            }], hideDelay: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90b29sdGlwL3Rvb2x0aXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFJSCxTQUFTLEVBR1QsWUFBWSxFQUVaLEtBQUssR0FHUixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFNckUsTUFBTSxPQUFPLGdCQUFnQjtJQWF6QixZQUNZLFVBQXNCLEVBQ3RCLE1BQXNCLEVBQ3RCLHdCQUFrRDtJQUMxRCxnREFBZ0Q7SUFDeEMsUUFBa0I7UUFKbEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixXQUFNLEdBQU4sTUFBTSxDQUFnQjtRQUN0Qiw2QkFBd0IsR0FBeEIsd0JBQXdCLENBQTBCO1FBRWxELGFBQVEsR0FBUixRQUFRLENBQVU7UUFqQnJCLFlBQU8sR0FBRyxFQUFFLENBQUM7UUFDYixhQUFRLEdBQW9CLE9BQU8sQ0FBQztRQUNwQyxVQUFLLEdBQWlCLE1BQU0sQ0FBQztRQUM3QixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUVmLGlCQUFZLEdBQTZCLElBQUksQ0FBQztRQWNsRCxxREFBcUQ7UUFDckQsNkJBQTZCO1FBQzdCLG9DQUFvQztRQUNwQyxNQUFNO0lBQ1YsQ0FBQztJQUdELFlBQVk7UUFDUixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBR0QsWUFBWTtRQUNSLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQ2pDLENBQUM7SUFFRCxxQ0FBcUM7SUFDckMscUJBQXFCO0lBQ3JCLDZCQUE2QjtJQUM3QixvQ0FBb0M7SUFDcEMsSUFBSTtJQUVKLDREQUE0RDtJQUM1RCxvREFBb0Q7SUFD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QVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZO2dCQW9CMUIsV0FBVztzQkFEVixZQUFZO3VCQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFVckMsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLFlBQVksRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFRdEMsVUFBVTtzQkFEVCxZQUFZO3VCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gICAgQXBwbGljYXRpb25SZWYsXHJcbiAgICBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXHJcbiAgICBDb21wb25lbnRSZWYsXHJcbiAgICBEaXJlY3RpdmUsXHJcbiAgICBFbGVtZW50UmVmLFxyXG4gICAgRW1iZWRkZWRWaWV3UmVmLFxyXG4gICAgSG9zdExpc3RlbmVyLFxyXG4gICAgSW5qZWN0b3IsXHJcbiAgICBJbnB1dCxcclxuICAgIFJlbmRlcmVyMixcclxuICAgIFZpZXdDb250YWluZXJSZWYsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkc1Rvb2x0aXBDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdG9vbHRpcC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBUb29sdGlwUG9zaXRpb24sIFRvb2x0aXBUaGVtZSB9IGZyb20gJy4vdG9vbHRpcC50eXBlcyc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICAgIHNlbGVjdG9yOiAnW3Nkc1Rvb2x0aXBdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvb2x0aXBEaXJlY3RpdmUge1xyXG4gICAgQElucHV0KCkgdG9vbHRpcCA9ICcnO1xyXG4gICAgQElucHV0KCkgcG9zaXRpb246IFRvb2x0aXBQb3NpdGlvbiA9ICdhYm92ZSc7XHJcbiAgICBASW5wdXQoKSB0aGVtZTogVG9vbHRpcFRoZW1lID0gJ2RhcmsnO1xyXG4gICAgQElucHV0KCkgc2hvd0RlbGF5ID0gMDtcclxuICAgIEBJbnB1dCgpIGhpZGVEZWxheSA9IDA7XHJcblxyXG4gICAgcHJpdmF0ZSBjb21wb25lbnRSZWY6IENvbXBvbmVudFJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XHJcbiAgICBwcml2YXRlIHNob3dUaW1lb3V0PzogbnVtYmVyO1xyXG4gICAgcHJpdmF0ZSBoaWRlVGltZW91dD86IG51bWJlcjtcclxuICAgIHByaXZhdGUgdG91Y2hUaW1lb3V0PzogbnVtYmVyO1xyXG5cclxuXHJcbiAgICBjb25zdHJ1Y3RvcihcclxuICAgICAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXHJcbiAgICAgICAgcHJpdmF0ZSBhcHBSZWY6IEFwcGxpY2F0aW9uUmVmLFxyXG4gICAgICAgIHByaXZhdGUgY29tcG9uZW50RmFjdG9yeVJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXHJcbiAgICAgICAgLy8gICBwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYsXHJcbiAgICAgICAgcHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IsXHJcbiAgICAgICAgLy8gcHJpdmF0ZSByZW5kZXJlcjI6IFJlbmRlcmVyMlxyXG4gICAgKSB7XHJcbiAgICAgICAgLy8gdGhpcy5yZW5kZXJlcjIubGlzdGVuKCd3aW5kb3cnLCAnc2Nyb2xsJywgKF8pID0+IHtcclxuICAgICAgICAvLyAgICAgY29uc29sZS5sb2coJ3Njcm9sbCcpO1xyXG4gICAgICAgIC8vICAgICB0aGlzLnNldEhpZGVUb29sdGlwVGltZW91dCgpO1xyXG4gICAgICAgIC8vIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxyXG4gICAgb25Nb3VzZUVudGVyKCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuaW5pdGlhbGl6ZVRvb2x0aXAoKTtcclxuICAgIH1cclxuXHJcbiAgICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJylcclxuICAgIG9uTW91c2VMZWF2ZSgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNldEhpZGVUb29sdGlwVGltZW91dCgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIEBIb3N0TGlzdGVuZXIoXCJ3aW5kb3c6c2Nyb2xsXCIsIFtdKVxyXG4gICAgLy8gb25XaW5kb3dTY3JvbGwoKSB7XHJcbiAgICAvLyAgICAgY29uc29sZS5sb2coJ3Njcm9sbCcpO1xyXG4gICAgLy8gICAgIHRoaXMuc2V0SGlkZVRvb2x0aXBUaW1lb3V0KCk7XHJcbiAgICAvLyB9XHJcblxyXG4gICAgLy8gQEhvc3RMaXN0ZW5lcignd2luZG93OnNjcm9sbCcpIG9uU2Nyb2xsKGU6IEV2ZW50KTogdm9pZCB7XHJcbiAgICAvLyAgICAgY29uc29sZS5sb2coKGUudGFyZ2V0IGFzIEVsZW1lbnQpLnNjcm9sbFRvcCk7XHJcbiAgICAvLyAgfVxyXG5cclxuICAgIC8vICBASG9zdExpc3RlbmVyKCdzY3JvbGwnKSBvblNjcm9sbEhvc3QoZTogRXZlbnQpOiB2b2lkIHtcclxuICAgIC8vICAgICBjb25zb2xlLmxvZygoZS50YXJnZXQgYXMgRWxlbWVudCkuc2Nyb2xsVG9wKTtcclxuICAgIC8vICB9XHJcblxyXG4gICAgQEhvc3RMaXN0ZW5lcignbW91c2Vtb3ZlJywgWyckZXZlbnQnXSlcclxuICAgIG9uTW91c2VNb3ZlKCRldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLmNvbXBvbmVudFJlZiAhPT0gbnVsbCAmJiB0aGlzLnBvc2l0aW9uID09PSAnZHluYW1pYycpIHtcclxuICAgICAgICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UubGVmdCA9ICRldmVudC5jbGllbnRYO1xyXG4gICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS50b3AgPSAkZXZlbnQuY2xpZW50WTtcclxuICAgICAgICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UudG9vbHRpcCA9IHRoaXMudG9vbHRpcDtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgQEhvc3RMaXN0ZW5lcigndG91Y2hzdGFydCcsIFsnJGV2ZW50J10pXHJcbiAgICBvblRvdWNoU3RhcnQoJGV2ZW50OiBUb3VjaEV2ZW50KTogdm9pZCB7XHJcbiAgICAgICAgJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgICAgd2luZG93LmNsZWFyVGltZW91dCh0aGlzLnRvdWNoVGltZW91dCk7XHJcbiAgICAgICAgdGhpcy50b3VjaFRpbWVvdXQgPSB3aW5kb3cuc2V0VGltZW91dCh0aGlzLmluaXRpYWxpemVUb29sdGlwLmJpbmQodGhpcyksIDUwMCk7XHJcbiAgICB9XHJcblxyXG4gICAgQEhvc3RMaXN0ZW5lcigndG91Y2hlbmQnKVxyXG4gICAgb25Ub3VjaEVuZCgpOiB2b2lkIHtcclxuICAgICAgICB3aW5kb3cuY2xlYXJUaW1lb3V0KHRoaXMudG91Y2hUaW1lb3V0KTtcclxuICAgICAgICB0aGlzLnNldEhpZGVUb29sdGlwVGltZW91dCgpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgaW5pdGlhbGl6ZVRvb2x0aXAoKSB7XHJcbiAgICAgICAgaWYgKHRoaXMuY29tcG9uZW50UmVmID09PSBudWxsKSB7XHJcbiAgICAgICAgICAgIHdpbmRvdy5jbGVhckludGVydmFsKHRoaXMuaGlkZURlbGF5KTtcclxuICAgICAgICAgICAgY29uc3QgY29tcG9uZW50RmFjdG9yeSA9IHRoaXMuY29tcG9uZW50RmFjdG9yeVJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KFNkc1Rvb2x0aXBDb21wb25lbnQpO1xyXG4gICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZiA9IGNvbXBvbmVudEZhY3RvcnkuY3JlYXRlKHRoaXMuaW5qZWN0b3IpO1xyXG5cclxuICAgICAgICAgICAgdGhpcy5hcHBSZWYuYXR0YWNoVmlldyh0aGlzLmNvbXBvbmVudFJlZi5ob3N0Vmlldyk7XHJcbiAgICAgICAgICAgIGNvbnN0IFt0b29sdGlwRE9NRWxlbWVudF0gPSAodGhpcy5jb21wb25lbnRSZWYuaG9zdFZpZXcgYXMgRW1iZWRkZWRWaWV3UmVmPGFueT4pLnJvb3ROb2RlcztcclxuXHJcbiAgICAgICAgICAgIHRoaXMuc2V0VG9vbHRpcENvbXBvbmVudFByb3BlcnRpZXMoKTtcclxuXHJcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQodG9vbHRpcERPTUVsZW1lbnQpO1xyXG4gICAgICAgICAgICB0aGlzLnNob3dUaW1lb3V0ID0gd2luZG93LnNldFRpbWVvdXQodGhpcy5zaG93VG9vbHRpcC5iaW5kKHRoaXMpLCB0aGlzLnNob3dEZWxheSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0VG9vbHRpcENvbXBvbmVudFByb3BlcnRpZXMoKSB7XHJcbiAgICAgICAgaWYgKHRoaXMuY29tcG9uZW50UmVmICE9PSBudWxsKSB7XHJcbiAgICAgICAgICAgIHRoaXMuY29tcG9uZW50UmVmLmluc3RhbmNlLnRvb2x0aXAgPSB0aGlzLnRvb2x0aXA7XHJcbiAgICAgICAgICAgIHRoaXMuY29tcG9uZW50UmVmLmluc3RhbmNlLnBvc2l0aW9uID0gdGhpcy5wb3NpdGlvbjtcclxuICAgICAgICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UudGhlbWUgPSB0aGlzLnRoZW1lO1xyXG5cclxuICAgICAgICAgICAgY29uc3QgeyBsZWZ0LCByaWdodCwgdG9wLCBib3R0b20gfSA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG5cclxuICAgICAgICAgICAgc3dpdGNoICh0aGlzLnBvc2l0aW9uKSB7XHJcbiAgICAgICAgICAgICAgICBjYXNlICdiZWxvdyc6IHtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS5sZWZ0ID0gTWF0aC5yb3VuZCgocmlnaHQgLSBsZWZ0KSAvIDIgKyBsZWZ0KTtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS50b3AgPSBNYXRoLnJvdW5kKGJvdHRvbSk7XHJcbiAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICBjYXNlICdhYm92ZSc6IHtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS5sZWZ0ID0gTWF0aC5yb3VuZCgocmlnaHQgLSBsZWZ0KSAvIDIgKyBsZWZ0KTtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS50b3AgPSBNYXRoLnJvdW5kKHRvcCk7XHJcbiAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICBjYXNlICdyaWdodCc6IHtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS5sZWZ0ID0gTWF0aC5yb3VuZChyaWdodCk7XHJcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UudG9wID0gTWF0aC5yb3VuZCh0b3AgKyAoYm90dG9tIC0gdG9wKSAvIDIpO1xyXG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgICAgY2FzZSAnbGVmdCc6IHtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS5sZWZ0ID0gTWF0aC5yb3VuZChsZWZ0KTtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS50b3AgPSBNYXRoLnJvdW5kKHRvcCArIChib3R0b20gLSB0b3ApIC8gMik7XHJcbiAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICBkZWZhdWx0OiB7XHJcbiAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBzaG93VG9vbHRpcCgpIHtcclxuICAgICAgICBpZiAodGhpcy5jb21wb25lbnRSZWYgIT09IG51bGwpIHtcclxuICAgICAgICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UudmlzaWJsZSA9IHRydWU7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0SGlkZVRvb2x0aXBUaW1lb3V0KCkge1xyXG4gICAgICAgIHRoaXMuaGlkZVRpbWVvdXQgPSB3aW5kb3cuc2V0VGltZW91dCh0aGlzLmRlc3Ryb3kuYmluZCh0aGlzKSwgdGhpcy5oaWRlRGVsYXkpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuZGVzdHJveSgpO1xyXG4gICAgfVxyXG5cclxuICAgIGRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuY29tcG9uZW50UmVmICE9PSBudWxsKSB7XHJcbiAgICAgICAgICAgIHdpbmRvdy5jbGVhckludGVydmFsKHRoaXMuc2hvd1RpbWVvdXQpO1xyXG4gICAgICAgICAgICB3aW5kb3cuY2xlYXJJbnRlcnZhbCh0aGlzLmhpZGVEZWxheSk7XHJcbiAgICAgICAgICAgIHRoaXMuYXBwUmVmLmRldGFjaFZpZXcodGhpcy5jb21wb25lbnRSZWYuaG9zdFZpZXcpO1xyXG4gICAgICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5kZXN0cm95KCk7XHJcbiAgICAgICAgICAgIHRoaXMuY29tcG9uZW50UmVmID0gbnVsbDtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIl19

package/esm2020/src/lib/tooltip/tooltip.module.mjs

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SdsTooltipComponent } from '../tooltip/components/tooltip.component';
+import { TooltipDirective } from './tooltip.directive';
+import * as i0 from "@angular/core";
+export class SdsTooltipModule {
+}
+SdsTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, declarations: [SdsTooltipComponent,
+        TooltipDirective], imports: [CommonModule], exports: [TooltipDirective] });
+SdsTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsTooltipComponent,
+                        TooltipDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        TooltipDirective
+                    ]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90b29sdGlwL3Rvb2x0aXAubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQWlCdkQsTUFBTSxPQUFPLGdCQUFnQjs7NkdBQWhCLGdCQUFnQjs4R0FBaEIsZ0JBQWdCLGlCQVZ6QixtQkFBbUI7UUFDbkIsZ0JBQWdCLGFBR2hCLFlBQVksYUFHWixnQkFBZ0I7OEdBR1AsZ0JBQWdCLFlBUGxCO1lBQ1AsWUFBWTtTQUNiOzJGQUtVLGdCQUFnQjtrQkFaNUIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osbUJBQW1CO3dCQUNuQixnQkFBZ0I7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3FCQUNiO29CQUNELE9BQU8sRUFBRTt3QkFDUCxnQkFBZ0I7cUJBQ2pCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU2RzVG9vbHRpcENvbXBvbmVudCB9IGZyb20gJy4uL3Rvb2x0aXAvY29tcG9uZW50cy90b29sdGlwLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFRvb2x0aXBEaXJlY3RpdmUgfSBmcm9tICcuL3Rvb2x0aXAuZGlyZWN0aXZlJztcclxuaW1wb3J0IHsgVG9vbHRpcFBvc2l0aW9uLCBUb29sdGlwVGhlbWUgfSBmcm9tICcuL3Rvb2x0aXAudHlwZXMnO1xyXG5cclxuXHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgU2RzVG9vbHRpcENvbXBvbmVudCxcclxuICAgIFRvb2x0aXBEaXJlY3RpdmVcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZVxyXG4gIF0sXHJcbiAgZXhwb3J0czogW1xyXG4gICAgVG9vbHRpcERpcmVjdGl2ZVxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc1Rvb2x0aXBNb2R1bGUgeyB9XHJcbiJdfQ==

package/esm2020/src/lib/tooltip/tooltip.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC50eXBlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC50eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgVG9vbHRpcFBvc2l0aW9uID0gJ2Fib3ZlJyB8ICdiZWxvdycgfCAnbGVmdCcgfCAncmlnaHQnIHwgJ2R5bmFtaWMnO1xyXG5cclxuZXhwb3J0IHR5cGUgVG9vbHRpcFRoZW1lID0gJ2RhcmsnIHwgJ2xpZ2h0JztcclxuIl19

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

@@ -1,55 +1,81 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
 import { CommonModule } 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
+ */
 class SdsAvatarComponent {
-    constructor() {
-        this.text = '';
-        this.colorKey = '';
-        this.pictureUri = '';
+    constructor(_change) {
+        this._change = _change;
         this.showHint = false;
         this.borderStyle = 'none';
-        this.isPictureReady = false;
-        this.initials = '';
+        this.size = 2;
+        this.label = '';
+        this.showPicture = false;
+        this.colorClass = 'color18';
     }
     ngAfterViewInit() {
-        this.loadUserPicture();
+        var _a;
+        this.showPicture = !!this.pictureUri && ((_a = this.pictureUri) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        this.setColorClass();
     }
     ngOnChanges(changes) {
-        if (changes['text'] &&
-            changes['text'].currentValue != changes['text'].previousValue &&
-            this.initialsText == undefined) {
-            this.extractInitials();
+        var _a;
+        console.log('change');
+        console.log(changes);
+        if (changes['initialsText']) {
+            this.setLabel();
+        }
+        if (changes['text']) {
+            this.setLabel();
         }
-        if (changes['pictureUri'] &&
-            changes['pictureUri'].currentValue !=
-                changes['pictureUri'].previousValue) {
-            this.loadUserPicture();
+        if (changes['pictureUri']) {
+            this.showPicture = !!this.pictureUri && ((_a = this.pictureUri) === null || _a === void 0 ? void 0 : _a.length) > 0;
         }
-        if (changes['initialsText'] && this.initialsText) {
-            this.initials = this.initialsText;
+        if (changes['colorKey']) {
+            this.setColorClass();
         }
     }
     setColorClass() {
         if (this.colorKey) {
-            return 'color' + this.getColorIndex(this.colorKey);
+            this.colorClass = 'color' + this.getColorIndex(this.colorKey);
+        }
+        else {
+            this.colorClass = 'color18';
         }
-        return 'color18';
     }
-    extractInitials() {
-        this.initials = this.text
-            ? this.text
+    setLabel() {
+        var _a, _b;
+        if (this.initialsText && ((_a = this.initialsText) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.label = this.initialsText;
+            console.log('initialsText');
+            console.log(this.initialsText);
+        }
+        else if (this.text && ((_b = this.text) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            this.label = this.text
                 .toUpperCase()
                 .split(' ')
                 .map((n) => n[0])
                 .slice(0, 2)
-                .join('')
-            : '';
+                .join('');
+            console.log('text');
+            console.log(this.text);
+        }
+        else {
+            this.label = '';
+            console.log('empty');
+        }
+        console.log(`label: ${this.label}`);
     }
     getColorIndex(s) {
         const length = 10;
@@ -62,21 +88,13 @@ class SdsAvatarComponent {
             .reduce((a, b) => a + b, 0);
         return sumOfChars % length;
     }
-    loadUserPicture() {
-        if (this.pictureUri && this.pictureUri !== '') {
-            this.isPictureReady = true;
-        }
-        else {
-            this.isPictureReady = false;
-        }
-    }
 }
-SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarComponent, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", initialsText: "initialsText", cursor: "cursor" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\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>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.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}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SdsAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarComponent, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", initialsText: "initialsText", cursor: "cursor", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.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}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar', template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\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>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'sds-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], colorKey: [{
                 type: Input
@@ -92,31 +110,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], cursor: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 class SdsAvatarGroupComponent {
     constructor() {
-        this.stacked = false;
-        this.fontSize = 2;
-        this.data = [];
+        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();
+        this.dropdownContents = 'all';
+        // 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.overFlowBorderStyle = 'none';
-        this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();
-        this.showDropdown = false;
+        this.size = 2;
+        this.stacked = false;
     }
     ngOnChanges(changes) {
-        if (changes['data'] || changes['maxCount']) {
-            if (this.maxCount && this.data) {
-                this.overflow = [...this.data];
-                this.inflow = this.overflow.splice(0, this.maxCount);
-                console.log(this.overflow.length);
+        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.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';
+                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';
             }
             else {
-                this.inflow = [...this.data];
+                this.inflow = [...this.avatars];
             }
         }
     }
@@ -126,19 +151,21 @@ class SdsAvatarGroupComponent {
     }
 }
 SdsAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", maxCount: "maxCount", fontSize: "fontSize", borderColor: "borderColor", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n        \r\n    <sds-avatar \r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\" \r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 overflow\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 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                        [style.font-size.rem]=\"1.8\" \r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"], components: [{ type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { 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"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", max: "max", size: "size", borderColor: "borderColor", avatars: "avatars", dropdownContents: "dropdownContents" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\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        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID\"\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()\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 ps-3 py-2 pe-5 my-2 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 class=\"ms-3\">{{avatar.text}}</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}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"], components: [{ type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { 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"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar-group', template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n        \r\n    <sds-avatar \r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\" \r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 overflow\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 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                        [style.font-size.rem]=\"1.8\" \r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"] }]
+            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\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\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        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID\"\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()\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 ps-3 py-2 pe-5 my-2 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 class=\"ms-3\">{{avatar.text}}</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}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { stacked: [{
                 type: Input
-            }], maxCount: [{
+            }], max: [{
                 type: Input
-            }], fontSize: [{
+            }], size: [{
                 type: Input
             }], borderColor: [{
                 type: Input
-            }], data: [{
+            }], avatars: [{
+                type: Input
+            }], dropdownContents: [{
                 type: Input
             }] } });
 

package/fesm2015/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/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n    AfterViewInit,\r\n    Component,\r\n    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-avatar',\r\n    templateUrl: './avatar.component.html',\r\n    styleUrls: ['./avatar.component.scss'],\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() initialsText?: string;\r\n    @Input() cursor?: string;\r\n\r\n    public isPictureReady: boolean = false;\r\n    public initials: string = '';\r\n\r\n    constructor() {}\r\n\r\n    ngAfterViewInit() {\r\n        this.loadUserPicture();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (\r\n            changes['text'] &&\r\n            changes['text'].currentValue != changes['text'].previousValue &&\r\n            this.initialsText == undefined\r\n        ) {\r\n            this.extractInitials();\r\n        }\r\n\r\n        if (\r\n            changes['pictureUri'] &&\r\n            changes['pictureUri'].currentValue !=\r\n                changes['pictureUri'].previousValue\r\n        ) {\r\n            this.loadUserPicture();\r\n        }\r\n\r\n        if (changes['initialsText'] && this.initialsText) {\r\n            this.initials = this.initialsText;\r\n        }\r\n    }\r\n\r\n    public setColorClass(): string {\r\n        if (this.colorKey) {\r\n            return 'color' + this.getColorIndex(this.colorKey);\r\n        }\r\n        return 'color18';\r\n    }\r\n\r\n    private extractInitials(): void {\r\n        this.initials = this.text\r\n            ? this.text\r\n                  .toUpperCase()\r\n                  .split(' ')\r\n                  .map((n) => n[0])\r\n                  .slice(0, 2)\r\n                  .join('')\r\n            : '';\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    public loadUserPicture() {\r\n        if (this.pictureUri && this.pictureUri !== '') {\r\n            this.isPictureReady = true;\r\n        } else {\r\n            this.isPictureReady = false;\r\n        }\r\n    }\r\n}\r\n","<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\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>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\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})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n    @Input() public stacked: boolean = false;\r\n    @Input() public maxCount?: number;\r\n    @Input() public fontSize: number = 2;\r\n    @Input() public borderColor?: string;\r\n    @Input() public data: Array<AvatarModel> = [];\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' = 'none';\r\n\r\n    public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n\r\n    constructor() {}\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['maxCount']){\r\n            if (this.maxCount && this.data) {\r\n                this.overflow = [...this.data];\r\n                this.inflow = this.overflow.splice(0, this.maxCount);\r\n                console.log(this.overflow.length);\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.data];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked() {\r\n        this.showDropdown = true;\r\n    }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n        \r\n    <sds-avatar \r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\" \r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 overflow\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 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                        [style.font-size.rem]=\"1.8\" \r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n    SdsAvatarComponent,\r\n    SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}
+{"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/avatar.module.ts","../../../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    ChangeDetectorRef,\r\n    Component,\r\n    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    SimpleChanges,\r\n} from '@angular/core';\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@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})\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() initialsText?: string;\r\n    @Input() cursor?: string;\r\n    @Input() size: number = 2;\r\n\r\n    public label: string;\r\n    public showPicture: boolean;\r\n    public colorClass: string;\r\n\r\n    constructor(private _change: ChangeDetectorRef) {\r\n        this.label = '';\r\n        this.showPicture = false;\r\n        this.colorClass = 'color18';\r\n    }\r\n\r\n    ngAfterViewInit() {\r\n        this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;\r\n        this.setColorClass();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        console.log('change');\r\n        console.log(changes);\r\n\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.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;\r\n        }\r\n\r\n        if (changes['colorKey']){\r\n            this.setColorClass();\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\r\n            console.log('initialsText');\r\n            console.log(this.initialsText);\r\n            \r\n        } else if (this.text && this.text?.length > 0){\r\n            this.label = this.text\r\n                .toUpperCase()\r\n                .split(' ')\r\n                .map((n) => n[0])\r\n                .slice(0, 2)\r\n                .join('');\r\n\r\n            console.log('text');\r\n            console.log(this.text);\r\n\r\n        } else {\r\n            this.label = '';\r\n\r\n            console.log('empty');\r\n        }\r\n        console.log(`label: ${this.label}`);\r\n\r\n\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}\r\n","<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n","import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\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})\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\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    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() {\r\n        this.showDropdown = true;\r\n    }\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\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        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID\"\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()\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\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 ps-3 py-2 pe-5 my-2 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 class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n    SdsAvatarComponent,\r\n    SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i1.SdsAvatarComponent"],"mappings":"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"}