@spicainternational/ngx-sds-components 6.5.8 → 6.6.1

package/esm2020/src/lib/avatar/avatar-group.component.mjs

@@ -58,7 +58,7 @@ export class SdsAvatarGroupComponent {
     }
 }
 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: i4.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: i4.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "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"] }]

package/esm2020/src/lib/avatar/avatar.component.mjs

@@ -7,6 +7,12 @@ import * as i1 from "@angular/common";
  * @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} 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
  */
 export class SdsAvatarComponent {
     constructor(_change) {
@@ -14,6 +20,10 @@ export class SdsAvatarComponent {
         this.showHint = false;
         this.borderStyle = 'none';
         this.size = 2;
+        this.badgeVisible = false;
+        this.badgePosition = 'bottom-right';
+        this.badgeBackgroundColor = 'var(--bs-danger)';
+        this.badgeTextColor = 'white';
         this.label = '';
         this.showPicture = false;
         this.colorClass = 'color18';
@@ -79,10 +89,10 @@ export class SdsAvatarComponent {
     }
 }
 SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], 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" }, 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;-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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", 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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n\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>\r\n\r\n\r\n", 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;text-decoration:none}.avatar.circle .initials:hover{text-decoration:none}.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"] }], 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\"\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;-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}\n"] }]
+            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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n\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>\r\n\r\n\r\n", 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;text-decoration:none}.avatar.circle .initials:hover{text-decoration:none}.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 [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], colorKey: [{
@@ -101,5 +111,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], badgeVisible: [{
+                type: Input
+            }], badgePosition: [{
+                type: Input
+            }], badgeBackgroundColor: [{
+                type: Input
+            }], badgeTextColor: [{
+                type: Input
+            }], badgeHint: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2F2YXRhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUgsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxLQUFLLEdBSVIsTUFBTSxlQUFlLENBQUM7OztBQUV2Qjs7Ozs7O0dBTUc7QUFPSCxNQUFNLE9BQU8sa0JBQWtCO0lBZTNCLFlBQW9CLE9BQTBCO1FBQTFCLFlBQU8sR0FBUCxPQUFPLENBQW1CO1FBWHJDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFDMUIsZ0JBQVcsR0FBMkMsTUFBTSxDQUFDO1FBSTdELFNBQUksR0FBVyxDQUFDLENBQUM7UUFPdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7SUFDaEMsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNwRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLE9BQU8sQ0FBQyxjQUFjLENBQUMsRUFBRTtZQUN6QixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7U0FDbkI7UUFFRCxJQUFJLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRTtZQUNqQixJQUFJLENBQUMs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QUFNO3NCQUFkLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIEFmdGVyVmlld0luaXQsXHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENoYW5nZURldGVjdG9yUmVmLFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgSW5wdXQsXHJcbiAgICBPbkNoYW5nZXMsXHJcbiAgICBPbkluaXQsXHJcbiAgICBTaW1wbGVDaGFuZ2VzLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIENsYXNzIGRlZmluaXRpb25cclxuICogQHByb3BlcnR5IHtzdHJpbmd9IHRleHQgLSB0ZXh0IHRoYXQgaXMgcGFyc2VkIGZvciBpbml0aWFscy4gSWYgc2hvd0hpbnQgaXMgc2V0IHRvIHRydWUgdGhpcyB0ZXh0IHdpbGwgYmUgc2hvd24gaW4gaGludFxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gY29sb3JLZXkgLSB2YWx1ZSB0aGF0IGlzIGJhc2UgZm9yIGNhbGN1bGF0aW5nIGNvbG9yIG9mIGF2YXRhclxyXG4gKiBAcHJvcGVydHkge2Jvb2xlYW59IHNob3dIaW50IC0gc2hvdyBoaW50IHdpdGggdGV4dFxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gaW5pdGlhbHNUZXh0IC0gb3ZlcnJpZGUgaW50ZXJuYWwgZXh0cmFjdGlvbiBvZiBpbml0aWFscyBhbmQgc2V0IGF2YXRhciB0ZXh0IGRpcmVjdGx5XHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWF2YXRhcicsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0F2YXRhckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcyB7XHJcbiAgICBASW5wdXQoKSB0ZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgY29sb3JLZXk/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBwaWN0dXJlVXJpPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgc2hvd0hpbnQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIGJvcmRlclN0eWxlOiAnc29saWQnIHwgJ2Rhc2hlZCcgfCAnZG90dGVkJyB8ICdub25lJyA9ICdub25lJztcclxuICAgIEBJbnB1dCgpIGJvcmRlckNvbG9yPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgaW5pdGlhbHNUZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgY3Vyc29yPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgc2l6ZTogbnVtYmVyID0gMjtcclxuXHJcbiAgICBwdWJsaWMgbGFiZWw6IHN0cmluZztcclxuICAgIHB1YmxpYyBzaG93UGljdHVyZTogYm9vbGVhbjtcclxuICAgIHB1YmxpYyBjb2xvckNsYXNzOiBzdHJpbmc7XHJcblxyXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBfY2hhbmdlOiBDaGFuZ2VEZXRlY3RvclJlZikge1xyXG4gICAgICAgIHRoaXMubGFiZWwgPSAnJztcclxuICAgICAgICB0aGlzLnNob3dQaWN0dXJlID0gZmFsc2U7XHJcbiAgICAgICAgdGhpcy5jb2xvckNsYXNzID0gJ2NvbG9yMTgnO1xyXG4gICAgfVxyXG5cclxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgICAgICB0aGlzLnNob3dQaWN0dXJlID0gISF0aGlzLnBpY3R1cmVVcmkgJiYgdGhpcy5waWN0dXJlVXJpPy5sZW5ndGggPiAwO1xyXG4gICAgICAgIHRoaXMuc2V0Q29sb3JDbGFzcygpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgICAgICBpZiAoY2hhbmdlc1snaW5pdGlhbHNUZXh0J10pIHtcclxuICAgICAgICAgICAgdGhpcy5zZXRMYWJlbCgpO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKGNoYW5nZXNbJ3RleHQnXSkge1xyXG4gICAgICAgICAgICB0aGlzLnNldExhYmVsKCk7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBpZiAoY2hhbmdlc1sncGljdHVyZVVyaSddKSB7XHJcbiAgICAgICAgICAgIHRoaXMuc2hvd1BpY3R1cmUgPSAhIXRoaXMucGljdHVyZVVyaSAmJiB0aGlzLnBpY3R1cmVVcmk/Lmxlbmd0aCA+IDA7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBpZiAoY2hhbmdlc1snY29sb3JLZXknXSl7XHJcbiAgICAgICAgICAgIHRoaXMuc2V0Q29sb3JDbGFzcygpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIHNldENvbG9yQ2xhc3MoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuY29sb3JLZXkpIHtcclxuICAgICAgICAgICAgdGhpcy5jb2xvckNsYXNzID0gJ2NvbG9yJyArIHRoaXMuZ2V0Q29sb3JJbmRleCh0aGlzLmNvbG9yS2V5KTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICB0aGlzLmNvbG9yQ2xhc3MgPSAnY29sb3IxOCc7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0TGFiZWwoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuaW5pdGlhbHNUZXh0ICYmIHRoaXMuaW5pdGlhbHNUZXh0Py5sZW5ndGggPiAwKSB7XHJcbiAgICAgICAgICAgIHRoaXMubGFiZWwgPSB0aGlzLmluaXRpYWxzVGV4dDtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICB0aGlzLmxhYmVsID0gJyc7XHJcblxyXG4gICAgICAgICAgICBpZiAodGhpcy50ZXh0ICYmIHRoaXMudGV4dD8ubGVuZ3RoID4gMCl7XHJcbiAgICAgICAgICAgICAgICBjb25zdCBpbml0aWFsc0Zyb21UZXh0ID0gdGhpcy50ZXh0XHJcbiAgICAgICAgICAgICAgICAgICAgLnRyaW0oKVxyXG4gICAgICAgICAgICAgICAgICAgIC50b1VwcGVyQ2FzZSgpXHJcbiAgICAgICAgICAgICAgICAgICAgLnNwbGl0KCcgJylcclxuICAgICAgICAgICAgICAgICAgICAubWFwKChuKSA9PiBuWzBdKVxyXG4gICAgICAgICAgICAgICAgICAgIC5maWx0ZXIoeCA9PiAhIXgpO1xyXG5cclxuICAgICAgICAgICAgICAgIGlmIChpbml0aWFsc0Zyb21UZXh0Lmxlbmd0aCA+IDApIHtcclxuICAgICAgICAgICAgICAgICAgICB0aGlzLmxhYmVsID0gaW5pdGlhbHNGcm9tVGV4dFswXTtcclxuICAgICAgICAgICAgICAgICAgICBpZiAoaW5pdGlhbHNGcm9tVGV4dC5sZW5ndGggPiAxKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMubGFiZWwgPSBgJHt0aGlzLmxhYmVsfSR7aW5pdGlhbHNGcm9tVGV4dFtpbml0aWFsc0Zyb21UZXh0Lmxlbmd0aCAtIDFdfWBcclxuICAgICAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBnZXRDb2xvckluZGV4KHM6IHN0cmluZyk6IG51bWJlciB7XHJcbiAgICAgICAgY29uc3QgbGVuZ3RoID0gMTA7XHJcbiAgICAgICAgaWYgKCFzKSB7XHJcbiAgICAgICAgICAgIHJldHVybiAwO1xyXG4gICAgICAgIH1cclxuICAgICAgICBsZXQgc3VtT2ZDaGFycyA9IHNcclxuICAgICAgICAgICAgLnNwbGl0KCcnKVxyXG4gICAgICAgICAgICAubWFwKCh4KSA9PiB4LmNoYXJDb2RlQXQoMCkpXHJcbiAgICAgICAgICAgIC5yZWR1Y2UoKGEsIGIpID0+IGEgKyBiLCAwKTtcclxuICAgICAgICByZXR1cm4gc3VtT2ZDaGFycyAlIGxlbmd0aDtcclxuICAgIH1cclxuXHJcbn1cclxuIiwiPGRpdlxyXG4gICAgY2xhc3M9XCJhdmF0YXIgY2lyY2xlIGQtZmxleCBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyIGFsaWduLWl0ZW1zLWNlbnRlclwiXHJcbiAgICBbY2xhc3NdPVwiY29sb3JDbGFzc1wiXHJcbiAgICBbY2xhc3MuaGFzUGljdHVyZV09XCJzaG93UGljdHVyZVwiXHJcbiAgICBbdGl0bGVdPVwic2hvd0hpbnQgPyB0ZXh0IDogJydcIlxyXG4gICAgW3N0eWxlLmJvcmRlci1zdHlsZV09XCJib3JkZXJTdHlsZS50b1N0cmluZygpXCJcclxuICAgIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiYm9yZGVyQ29sb3JcIlxyXG4gICAgW3N0eWxlLmN1cnNvcl09XCJjdXJzb3IgPyBjdXJzb3IgOiAnZGVmYXVsdCdcIlxyXG4gICAgW3N0eWxlLmZvbnQtc2l6ZS5yZW1dPVwic2l6ZVwiXHJcbj5cclxuICAgIDxzcGFuIFxyXG4gICAgICAgICpuZ0lmPVwiIXNob3dQaWN0dXJlXCIgXHJcbiAgICAgICAgY2xhc3M9XCJpbml0aWFsc1wiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIHt7IGxhYmVsIH19XHJcbiAgICA8L3NwYW4+XHJcblxyXG4gICAgPGltZyBcclxuICAgICAgICAqbmdJZj1cInNob3dQaWN0dXJlXCIgXHJcbiAgICAgICAgW3NyY109XCJwaWN0dXJlVXJpXCJcclxuICAgICAgICBhbHQ9XCJcIiAvPlxyXG48L2Rpdj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2F2YXRhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUgsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxLQUFLLEdBSVIsTUFBTSxlQUFlLENBQUM7OztBQUV2Qjs7Ozs7Ozs7Ozs7O0dBWUc7QUFPSCxNQUFNLE9BQU8sa0JBQWtCO0lBc0IzQixZQUFvQixPQUEwQjtRQUExQixZQUFPLEdBQVAsT0FBTyxDQUFtQjtRQWxCckMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixnQkFBVyxHQUEyQyxNQUFNLENBQUM7UUFJN0QsU0FBSSxHQUFXLENBQUMsQ0FBQztRQUVqQixpQkFBWSxHQUFZLEtBQUssQ0FBQztRQUM5QixrQkFBYSxHQUFpQyxjQUFjLENBQUM7UUFDN0QseUJBQW9CLEdBQUcsa0JBQWtCLENBQUM7UUFDMUMsbUJBQWMsR0FBRyxPQUFPLENBQUM7UUFTOUIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7SUFDaEMsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNwRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5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QUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIEFmdGVyVmlld0luaXQsXHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENoYW5nZURldGVjdG9yUmVmLFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgSW5wdXQsXHJcbiAgICBPbkNoYW5nZXMsXHJcbiAgICBPbkluaXQsXHJcbiAgICBTaW1wbGVDaGFuZ2VzLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIENsYXNzIGRlZmluaXRpb25cclxuICogQHByb3BlcnR5IHtzdHJpbmd9IHRleHQgLSB0ZXh0IHRoYXQgaXMgcGFyc2VkIGZvciBpbml0aWFscy4gSWYgc2hvd0hpbnQgaXMgc2V0IHRvIHRydWUgdGhpcyB0ZXh0IHdpbGwgYmUgc2hvd24gaW4gaGludFxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gY29sb3JLZXkgLSB2YWx1ZSB0aGF0IGlzIGJhc2UgZm9yIGNhbGN1bGF0aW5nIGNvbG9yIG9mIGF2YXRhclxyXG4gKiBAcHJvcGVydHkge2Jvb2xlYW59IHNob3dIaW50IC0gc2hvdyBoaW50IHdpdGggdGV4dFxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gaW5pdGlhbHNUZXh0IC0gb3ZlcnJpZGUgaW50ZXJuYWwgZXh0cmFjdGlvbiBvZiBpbml0aWFscyBhbmQgc2V0IGF2YXRhciB0ZXh0IGRpcmVjdGx5XHJcbiAqIFxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gYmFkZ2VWaXNpYmxlIC0gc2hvdyBiYWRnZSBvbiBhdmF0YXJcclxuICogQHByb3BlcnR5IHtzdHJpbmd9IGJhZGdlUG9zaXRpb24gLSBwb3NpdGlvbiBvZiBiYWRnZVxyXG4gKiBAcHJvcGVydHkge3N0cmluZ30gYmFkZ2VCYWNrZ3JvdW5kQ29sb3IgLSBiYWNrZ3JvdW5kIGNvbG9yIG9mIGJhZGdlXHJcbiAqIEBwcm9wZXJ0eSB7c3RyaW5nfSBiYWRnZVRleHRDb2xvciAtIHRleHQgY29sb3Igb2YgYmFkZ2VcclxuICogQHByb3BlcnR5IHtzdHJpbmd9IGJhZGdlSGludCAtIGhpbnQgdGV4dCBmb3IgYmFkZ2VcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtYXZhdGFyJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcclxuICAgIEBJbnB1dCgpIHRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjb2xvcktleT86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHBpY3R1cmVVcmk/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBzaG93SGludDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgYm9yZGVyU3R5bGU6ICdzb2xpZCcgfCAnZGFzaGVkJyB8ICdkb3R0ZWQnIHwgJ25vbmUnID0gJ25vbmUnO1xyXG4gICAgQElucHV0KCkgYm9yZGVyQ29sb3I/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBpbml0aWFsc1RleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjdXJzb3I/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBzaXplOiBudW1iZXIgPSAyO1xyXG5cclxuICAgIEBJbnB1dCgpIGJhZGdlVmlzaWJsZTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgYmFkZ2VQb3NpdGlvbjogJ3RvcC1yaWdodCcgfCAnYm90dG9tLXJpZ2h0JyA9ICdib3R0b20tcmlnaHQnO1xyXG4gICAgQElucHV0KCkgYmFkZ2VCYWNrZ3JvdW5kQ29sb3IgPSAndmFyKC0tYnMtZGFuZ2VyKSc7XHJcbiAgICBASW5wdXQoKSBiYWRnZVRleHRDb2xvciA9ICd3aGl0ZSc7XHJcbiAgICBASW5wdXQoKSBiYWRnZUhpbnQ/OiBzdHJpbmc7XHJcblxyXG5cclxuICAgIHB1YmxpYyBsYWJlbDogc3RyaW5nO1xyXG4gICAgcHVibGljIHNob3dQaWN0dXJlOiBib29sZWFuO1xyXG4gICAgcHVibGljIGNvbG9yQ2xhc3M6IHN0cmluZztcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9jaGFuZ2U6IENoYW5nZURldGVjdG9yUmVmKSB7XHJcbiAgICAgICAgdGhpcy5sYWJlbCA9ICcnO1xyXG4gICAgICAgIHRoaXMuc2hvd1BpY3R1cmUgPSBmYWxzZTtcclxuICAgICAgICB0aGlzLmNvbG9yQ2xhc3MgPSAnY29sb3IxOCc7XHJcbiAgICB9XHJcblxyXG4gICAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgICAgIHRoaXMuc2hvd1BpY3R1cmUgPSAhIXRoaXMucGljdHVyZVVyaSAmJiB0aGlzLnBpY3R1cmVVcmk/Lmxlbmd0aCA+IDA7XHJcbiAgICAgICAgdGhpcy5zZXRDb2xvckNsYXNzKCk7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgICAgIGlmIChjaGFuZ2VzWydpbml0aWFsc1RleHQnXSkge1xyXG4gICAgICAgICAgICB0aGlzLnNldExhYmVsKCk7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBpZiAoY2hhbmdlc1sndGV4dCddKSB7XHJcbiAgICAgICAgICAgIHRoaXMuc2V0TGFiZWwoKTtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChjaGFuZ2VzWydwaWN0dXJlVXJpJ10pIHtcclxuICAgICAgICAgICAgdGhpcy5zaG93UGljdHVyZSA9ICEhdGhpcy5waWN0dXJlVXJpICYmIHRoaXMucGljdHVyZVVyaT8ubGVuZ3RoID4gMDtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChjaGFuZ2VzWydjb2xvcktleSddKXtcclxuICAgICAgICAgICAgdGhpcy5zZXRDb2xvckNsYXNzKCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0Q29sb3JDbGFzcygpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5jb2xvcktleSkge1xyXG4gICAgICAgICAgICB0aGlzLmNvbG9yQ2xhc3MgPSAnY29sb3InICsgdGhpcy5nZXRDb2xvckluZGV4KHRoaXMuY29sb3JLZXkpO1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIHRoaXMuY29sb3JDbGFzcyA9ICdjb2xvcjE4JztcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBzZXRMYWJlbCgpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5pbml0aWFsc1RleHQgJiYgdGhpcy5pbml0aWFsc1RleHQ/Lmxlbmd0aCA+IDApIHtcclxuICAgICAgICAgICAgdGhpcy5sYWJlbCA9IHRoaXMuaW5pdGlhbHNUZXh0O1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIHRoaXMubGFiZWwgPSAnJztcclxuXHJcbiAgICAgICAgICAgIGlmICh0aGlzLnRleHQgJiYgdGhpcy50ZXh0Py5sZW5ndGggPiAwKXtcclxuICAgICAgICAgICAgICAgIGNvbnN0IGluaXRpYWxzRnJvbVRleHQgPSB0aGlzLnRleHRcclxuICAgICAgICAgICAgICAgICAgICAudHJpbSgpXHJcbiAgICAgICAgICAgICAgICAgICAgLnRvVXBwZXJDYXNlKClcclxuICAgICAgICAgICAgICAgICAgICAuc3BsaXQoJyAnKVxyXG4gICAgICAgICAgICAgICAgICAgIC5tYXAoKG4pID0+IG5bMF0pXHJcbiAgICAgICAgICAgICAgICAgICAgLmZpbHRlcih4ID0+ICEheCk7XHJcblxyXG4gICAgICAgICAgICAgICAgaWYgKGluaXRpYWxzRnJvbVRleHQubGVuZ3RoID4gMCkge1xyXG4gICAgICAgICAgICAgICAgICAgIHRoaXMubGFiZWwgPSBpbml0aWFsc0Zyb21UZXh0WzBdO1xyXG4gICAgICAgICAgICAgICAgICAgIGlmIChpbml0aWFsc0Zyb21UZXh0Lmxlbmd0aCA+IDEpIHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5sYWJlbCA9IGAke3RoaXMubGFiZWx9JHtpbml0aWFsc0Zyb21UZXh0W2luaXRpYWxzRnJvbVRleHQubGVuZ3RoIC0gMV19YFxyXG4gICAgICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGdldENvbG9ySW5kZXgoczogc3RyaW5nKTogbnVtYmVyIHtcclxuICAgICAgICBjb25zdCBsZW5ndGggPSAxMDtcclxuICAgICAgICBpZiAoIXMpIHtcclxuICAgICAgICAgICAgcmV0dXJuIDA7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIGxldCBzdW1PZkNoYXJzID0gc1xyXG4gICAgICAgICAgICAuc3BsaXQoJycpXHJcbiAgICAgICAgICAgIC5tYXAoKHgpID0+IHguY2hhckNvZGVBdCgwKSlcclxuICAgICAgICAgICAgLnJlZHVjZSgoYSwgYikgPT4gYSArIGIsIDApO1xyXG4gICAgICAgIHJldHVybiBzdW1PZkNoYXJzICUgbGVuZ3RoO1xyXG4gICAgfVxyXG5cclxufVxyXG4iLCI8ZGl2XHJcbiAgICBjbGFzcz1cImF2YXRhciBjaXJjbGUgZC1mbGV4IGp1c3RpZnktY29udGVudC1jZW50ZXIgYWxpZ24taXRlbXMtY2VudGVyIHBvc2l0aW9uLXJlbGF0aXZlXCJcclxuICAgIFtjbGFzc109XCJjb2xvckNsYXNzXCJcclxuICAgIFtjbGFzcy5oYXNQaWN0dXJlXT1cInNob3dQaWN0dXJlXCJcclxuICAgIFt0aXRsZV09XCJzaG93SGludCA/IHRleHQgOiAnJ1wiXHJcbiAgICBbc3R5bGUuYm9yZGVyLXN0eWxlXT1cImJvcmRlclN0eWxlLnRvU3RyaW5nKClcIlxyXG4gICAgW3N0eWxlLmJvcmRlci1jb2xvcl09XCJib3JkZXJDb2xvclwiXHJcbiAgICBbc3R5bGUuY3Vyc29yXT1cImN1cnNvciA/IGN1cnNvciA6ICdkZWZhdWx0J1wiXHJcbiAgICBbc3R5bGUuZm9udC1zaXplLnJlbV09XCJzaXplXCJcclxuPlxyXG4gICAgPHNwYW4gXHJcbiAgICAgICAgKm5nSWY9XCIhc2hvd1BpY3R1cmVcIiBcclxuICAgICAgICBjbGFzcz1cImluaXRpYWxzXCJcclxuICAgICAgICA+XHJcbiAgICAgICAge3sgbGFiZWwgfX1cclxuICAgIDwvc3Bhbj5cclxuXHJcbiAgICA8aW1nIFxyXG4gICAgICAgICpuZ0lmPVwic2hvd1BpY3R1cmVcIiBcclxuICAgICAgICBbc3JjXT1cInBpY3R1cmVVcmlcIlxyXG4gICAgICAgIGFsdD1cIlwiIC8+XHJcblxyXG5cclxuICAgICAgICA8c3BhbiBcclxuICAgICAgICAgICAgKm5nSWY9XCJiYWRnZVZpc2libGVcIlxyXG4gICAgICAgICAgICBjbGFzcz1cInBvc2l0aW9uLWFic29sdXRlIG5vdGlmaWNhdGlvbi1iYWRnZSBib3JkZXIgYm9yZGVyLWxpZ2h0IHJvdW5kZWQtY2lyY2xlXCJcclxuICAgICAgICAgICAgW2NsYXNzLnRvcC1yaWdodF09XCJiYWRnZVBvc2l0aW9uID09PSAndG9wLXJpZ2h0J1wiXHJcbiAgICAgICAgICAgIFtjbGFzcy5ib3R0b20tcmlnaHRdPVwiYmFkZ2VQb3NpdGlvbiA9PT0gJ2JvdHRvbS1yaWdodCdcIlxyXG4gICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJiYWRnZUJhY2tncm91bmRDb2xvclwiXHJcbiAgICAgICAgICAgIFtzdHlsZS5jb2xvcl09XCJiYWRnZVRleHRDb2xvclwiXHJcbiAgICAgICAgICAgIFt0aXRsZV09XCJiYWRnZUhpbnQgPyBiYWRnZUhpbnQgOiAnJ1wiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICA8L3NwYW4+XHJcbjwvZGl2PlxyXG5cclxuXHJcbiJdfQ==

package/esm2020/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.mjs

@@ -35,7 +35,7 @@ export class SdsNavigationUserProfileComponent {
     }
 }
 SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", profilePictureUri: "profilePictureUri", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { 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"] }] });
+SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", profilePictureUri: "profilePictureUri", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]

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

@@ -13,6 +13,12 @@ import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
  * @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} 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(_change) {
@@ -20,6 +26,10 @@ class SdsAvatarComponent {
         this.showHint = false;
         this.borderStyle = 'none';
         this.size = 2;
+        this.badgeVisible = false;
+        this.badgePosition = 'bottom-right';
+        this.badgeBackgroundColor = 'var(--bs-danger)';
+        this.badgeTextColor = 'white';
         this.label = '';
         this.showPicture = false;
         this.colorClass = 'color18';
@@ -88,10 +98,10 @@ class SdsAvatarComponent {
     }
 }
 SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], 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" }, 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;-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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", 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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n\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>\r\n\r\n\r\n", 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;text-decoration:none}.avatar.circle .initials:hover{text-decoration:none}.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"] }], 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\"\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;-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}\n"] }]
+            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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n\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>\r\n\r\n\r\n", 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;text-decoration:none}.avatar.circle .initials:hover{text-decoration:none}.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 [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], colorKey: [{
@@ -110,6 +120,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], badgeVisible: [{
+                type: Input
+            }], badgePosition: [{
+                type: Input
+            }], badgeBackgroundColor: [{
+                type: Input
+            }], badgeTextColor: [{
+                type: Input
+            }], badgeHint: [{
+                type: Input
             }] } });
 
 class SdsAvatarGroupComponent {
@@ -166,7 +186,7 @@ class SdsAvatarGroupComponent {
     }
 }
 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", "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"] }]

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    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        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        } else {\r\n            this.label = '';\r\n\r\n            if (this.text && this.text?.length > 0){\r\n                const initialsFromText = this.text\r\n                    .trim()\r\n                    .toUpperCase()\r\n                    .split(' ')\r\n                    .map((n) => n[0])\r\n                    .filter(x => !!x);\r\n\r\n                if (initialsFromText.length > 0) {\r\n                    this.label = initialsFromText[0];\r\n                    if (initialsFromText.length > 1) {\r\n                        this.label = `${this.label}${initialsFromText[initialsFromText.length - 1]}`\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private 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    @Input() public dropdownMaxHeight: string = '';\r\n\r\n    public overflow: Array<AvatarModel>;\r\n    public inflow: Array<AvatarModel>;\r\n\r\n    public overflowCountDisplay: string;\r\n    public overFlowBorderStyle: 'solid' | 'none';\r\n\r\n    public overflowElementUUID: string;\r\n    public showDropdown: boolean;\r\n    public showOverflow: boolean;\r\n\r\n    public dropdownTargetId: string = '';\r\n    public dropdownInitiator?: AvatarModel;\r\n\r\n    constructor() {\r\n        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n\r\n        // init values in constructor so storybook doesn't have issues with initial state\r\n\r\n        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;\r\n        this.overFlowBorderStyle = 'none';\r\n        this.showDropdown = false;\r\n        this.showOverflow = false;\r\n        this.avatars = [];\r\n        this.overflow = [];\r\n        this.inflow = [];\r\n        this.overflowCountDisplay = '';\r\n        this.size = 2;\r\n        this.stacked = false;\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['avatars'] || changes['max']){\r\n            if (this.max && this.avatars) {\r\n                let avatars = [...this.avatars];\r\n                this.inflow = avatars.splice(0, this.max);\r\n                this.overflow = avatars;\r\n                this.showOverflow = this.overflow.length > 0;\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.avatars];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked(event: MouseEvent, index: number, avatar?: AvatarModel) {\r\n        event.stopPropagation();\r\n\r\n        if (this.dropdownContents === 'overflow' && this.overflow.length === 0) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        const newDropdownTargetId = this.overflowElementUUID + index;\r\n        if (this.showDropdown && this.dropdownTargetId === newDropdownTargetId) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        this.dropdownInitiator = avatar;\r\n        this.dropdownTargetId = this.overflowElementUUID + index;\r\n        this.showDropdown = true;\r\n    }\r\n\r\n    public stopEventPropagation(event: MouseEvent) {\r\n        event.stopPropagation();\r\n    }\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\r\n        [id]=\"overflowElementUUID + i\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        cursor=\"pointer\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        (click)=\"onOverflowClicked($event, i, avatar)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID + '-1'\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{dropdownTargetId}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\r\n        [maxHeight]=\"dropdownMaxHeight\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div \r\n                        class=\"ms-2 ps-1\"\r\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\r\n                        >\r\n                        {{avatar.text}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","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":["i4.SdsAvatarComponent"],"mappings":";;;;;;;;;AAWA;;;;;;AAMG;MAOU,kBAAkB,CAAA;AAe3B,IAAA,WAAA,CAAoB,OAA0B,EAAA;AAA1B,QAAA,IAAO,CAAA,OAAA,GAAP,OAAO,CAAmB;AAXrC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAC1B,QAAA,IAAW,CAAA,WAAA,GAA2C,MAAM,CAAC;AAI7D,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC,CAAC;AAOtB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;IAED,eAAe,GAAA;;AACX,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAC9B,QAAA,IAAI,OAAO,CAAC,cAAc,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;AAED,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;YACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;AAED,QAAA,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,CAAC;AACvE,SAAA;AAED,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,EAAC;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC;AACxB,SAAA;KACJ;IAEO,aAAa,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACjE,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;AAC/B,SAAA;KACJ;IAEO,QAAQ,GAAA;;AACZ,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,IAAG,CAAC,EAAE;AACpD,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAClC,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;AAEhB,YAAA,IAAI,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,IAAG,CAAC,EAAC;AACnC,gBAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI;AAC7B,qBAAA,IAAI,EAAE;AACN,qBAAA,WAAW,EAAE;qBACb,KAAK,CAAC,GAAG,CAAC;qBACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;qBAChB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtB,gBAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,oBAAA,IAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AACjC,oBAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,wBAAA,IAAI,CAAC,KAAK,GAAG,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,EAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAA;AAC/E,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;KACJ;AAEO,IAAA,aAAa,CAAC,CAAS,EAAA;QAC3B,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,CAAC,EAAE;AACJ,YAAA,OAAO,CAAC,CAAC;AACZ,SAAA;QACD,IAAI,UAAU,GAAG,CAAC;aACb,KAAK,CAAC,EAAE,CAAC;AACT,aAAA,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;AAC3B,aAAA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAChC,OAAO,UAAU,GAAG,MAAM,CAAC;KAC9B;;gHAtFQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,6RCxB/B,ooBAsBA,EAAA,MAAA,EAAA,CAAA,g8EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;4FDEa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;+BACI,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ooBAAA,EAAA,MAAA,EAAA,CAAA,g8EAAA,CAAA,EAAA,CAAA;wGAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;;;MExBG,uBAAuB,CAAA;AAuBhC,IAAA,WAAA,GAAA;;AAhBgB,QAAA,IAAgB,CAAA,gBAAA,GAAuB,KAAK,CAAC;AAC7C,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE,CAAC;AAYxC,QAAA,IAAgB,CAAA,gBAAA,GAAW,EAAE,CAAC;;AAQjC,QAAA,IAAI,CAAC,mBAAmB,GAAG,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;AAC1E,QAAA,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAAC;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;AAC/B,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAC;AACrC,YAAA,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE;gBAC1B,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;AAChC,gBAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1C,gBAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;gBACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;AAC7C,gBAAA,IAAI,CAAC,oBAAoB,GAAG,CAAI,CAAA,EAAA,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;AACrE,gBAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,MAAM,CAAC;AACpG,aAAA;AAAM,iBAAA;gBACH,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;AACnC,aAAA;AACJ,SAAA;KACJ;AAED,IAAA,QAAQ,MAAW;AAEZ,IAAA,iBAAiB,CAAC,KAAiB,EAAE,KAAa,EAAE,MAAoB,EAAA;QAC3E,KAAK,CAAC,eAAe,EAAE,CAAC;AAExB,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACpE,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,OAAO;AACV,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QAC7D,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,KAAK,mBAAmB,EAAE;AACpE,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,OAAO;AACV,SAAA;AAED,QAAA,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC;QAChC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;AACzD,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;AAEM,IAAA,oBAAoB,CAAC,KAAiB,EAAA;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;;qHA9EQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,qQCTpC,suFAiEA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,gCAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,WAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,UAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,aAAA,EAAA,cAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;4FDxDa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;+BACI,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,suFAAA,EAAA,MAAA,EAAA,CAAA,yPAAA,CAAA,EAAA,CAAA;0EAI/B,OAAO,EAAA,CAAA;sBAAtB,KAAK;gBACU,GAAG,EAAA,CAAA;sBAAlB,KAAK;gBACU,IAAI,EAAA,CAAA;sBAAnB,KAAK;gBACU,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBACU,OAAO,EAAA,CAAA;sBAAtB,KAAK;gBACU,gBAAgB,EAAA,CAAA;sBAA/B,KAAK;gBACU,iBAAiB,EAAA,CAAA;sBAAhC,KAAK;;;AEPV,MAAM,UAAU,GAAG;IACf,kBAAkB;IAClB,uBAAuB;CAC1B,CAAC;MAeW,eAAe,CAAA;;6GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,iBAjBxB,kBAAkB;AAClB,QAAA,uBAAuB,aAOvB,YAAY;QACZ,eAAe;AACf,QAAA,kBAAkB,aAVlB,kBAAkB;QAClB,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAgBd,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YATxB,YAAY;QACZ,eAAe;QACf,kBAAkB,CAAA,EAAA,CAAA,CAAA;4FAOT,eAAe,EAAA,UAAA,EAAA,CAAA;kBAd3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;AACZ,wBAAA,GAAG,UAAU;AACd,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,eAAe;wBACf,kBAAkB;AAEnB,qBAAA;AACD,oBAAA,OAAO,EAAE;AACL,wBAAA,GAAG,UAAU;AAChB,qBAAA;iBACF,CAAA;;;AC3BD;;AAEG;;;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/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 * @property {string} badgeVisible - show badge on avatar\r\n * @property {string} badgePosition - position of badge\r\n * @property {string} badgeBackgroundColor - background color of badge\r\n * @property {string} badgeTextColor - text color of badge\r\n * @property {string} badgeHint - hint text for badge\r\n */\r\n@Component({\r\n    selector: 'sds-avatar',\r\n    templateUrl: './avatar.component.html',\r\n    styleUrls: ['./avatar.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\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    @Input() badgeVisible: boolean = false;\r\n    @Input() badgePosition: 'top-right' | 'bottom-right' = 'bottom-right';\r\n    @Input() badgeBackgroundColor = 'var(--bs-danger)';\r\n    @Input() badgeTextColor = 'white';\r\n    @Input() badgeHint?: string;\r\n\r\n\r\n    public label: string;\r\n    public showPicture: boolean;\r\n    public colorClass: string;\r\n\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        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        } else {\r\n            this.label = '';\r\n\r\n            if (this.text && this.text?.length > 0){\r\n                const initialsFromText = this.text\r\n                    .trim()\r\n                    .toUpperCase()\r\n                    .split(' ')\r\n                    .map((n) => n[0])\r\n                    .filter(x => !!x);\r\n\r\n                if (initialsFromText.length > 0) {\r\n                    this.label = initialsFromText[0];\r\n                    if (initialsFromText.length > 1) {\r\n                        this.label = `${this.label}${initialsFromText[initialsFromText.length - 1]}`\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private 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 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    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n\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>\r\n\r\n\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    @Input() public dropdownMaxHeight: string = '';\r\n\r\n    public overflow: Array<AvatarModel>;\r\n    public inflow: Array<AvatarModel>;\r\n\r\n    public overflowCountDisplay: string;\r\n    public overFlowBorderStyle: 'solid' | 'none';\r\n\r\n    public overflowElementUUID: string;\r\n    public showDropdown: boolean;\r\n    public showOverflow: boolean;\r\n\r\n    public dropdownTargetId: string = '';\r\n    public dropdownInitiator?: AvatarModel;\r\n\r\n    constructor() {\r\n        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n\r\n        // init values in constructor so storybook doesn't have issues with initial state\r\n\r\n        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;\r\n        this.overFlowBorderStyle = 'none';\r\n        this.showDropdown = false;\r\n        this.showOverflow = false;\r\n        this.avatars = [];\r\n        this.overflow = [];\r\n        this.inflow = [];\r\n        this.overflowCountDisplay = '';\r\n        this.size = 2;\r\n        this.stacked = false;\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['avatars'] || changes['max']){\r\n            if (this.max && this.avatars) {\r\n                let avatars = [...this.avatars];\r\n                this.inflow = avatars.splice(0, this.max);\r\n                this.overflow = avatars;\r\n                this.showOverflow = this.overflow.length > 0;\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.avatars];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked(event: MouseEvent, index: number, avatar?: AvatarModel) {\r\n        event.stopPropagation();\r\n\r\n        if (this.dropdownContents === 'overflow' && this.overflow.length === 0) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        const newDropdownTargetId = this.overflowElementUUID + index;\r\n        if (this.showDropdown && this.dropdownTargetId === newDropdownTargetId) {\r\n            this.showDropdown = false;\r\n            return;\r\n        }\r\n\r\n        this.dropdownInitiator = avatar;\r\n        this.dropdownTargetId = this.overflowElementUUID + index;\r\n        this.showDropdown = true;\r\n    }\r\n\r\n    public stopEventPropagation(event: MouseEvent) {\r\n        event.stopPropagation();\r\n    }\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow; let i = index\"\r\n        [id]=\"overflowElementUUID + i\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        cursor=\"pointer\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        (click)=\"onOverflowClicked($event, i, avatar)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID + '-1'\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked($event, -1, undefined)\"\r\n        (mousedown)=\"stopEventPropagation($event)\"\r\n        (mouseup)=\"stopEventPropagation($event)\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{dropdownTargetId}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        [wrapperAttr]=\"{ class: 'sds-avatar-group-overflow-popover' }\"\r\n        [maxHeight]=\"dropdownMaxHeight\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div \r\n                        class=\"ms-2 ps-1\"\r\n                        [class.sds-fw-600] = \"dropdownInitiator && dropdownInitiator.colorKey === avatar.colorKey\"\r\n                        >\r\n                        {{avatar.text}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","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":["i4.SdsAvatarComponent"],"mappings":"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"}

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

@@ -299,7 +299,7 @@ class SdsNavigationUserProfileComponent {
     }
 }
 SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", profilePictureUri: "profilePictureUri", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { kind: "component", type: i4.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"] }] });
+SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", profilePictureUri: "profilePictureUri", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: i4.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [pictureUri]=\"profilePictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n          </span>\r\n    </div>\r\n\r\n    \r\n    <span\r\n        #nameElement \r\n        class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n            <div \r\n                class=\"flex-grow-1 flex-shrink-1\"\r\n                [style.minWidth.px]=\"1\"\r\n                >\r\n                <h5 class=\"m-0 text-truncate\">\r\n                    {{name}}\r\n                </h5>\r\n                <div class=\"mt-1 font-size-3 text-truncate\">\r\n                    {{email}}\r\n                </div>\r\n            </div>\r\n\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [pictureUri]=\"profilePictureUri\"\r\n                [size]=\"3\"\r\n                >    \r\n            </sds-avatar>\r\n            \r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]