@spicainternational/ngx-sds-components 5.0.1 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-navigation.mjs","sources":["../../../projects/ngx-sds-components/src/lib/navigation/navigation-separator/navigation-separator.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-separator/navigation-separator.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-header/navigation-header.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-header/navigation-header.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-route-link/navigation-route-link.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-route-link/navigation-route-link.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-group/navigation-group.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-group/navigation-group.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-container/navigation-container.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-container/navigation-container.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-external-link/navigation-external-link.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-external-link/navigation-external-link.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation.module.ts","../../../projects/ngx-sds-components/src/lib/navigation/spicainternational-ngx-sds-components-src-lib-navigation.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sds-navigation-separator',\r\n  templateUrl: './navigation-separator.component.html',\r\n  styleUrls: ['./navigation-separator.component.scss']\r\n})\r\nexport class SdsNavigationSeparatorComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n}\r\n","<div class=\"sds-navigation-separator nav-separator\"></div>\r\n","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-header',\r\n    templateUrl: './navigation-header.component.html',\r\n    styleUrls: ['./navigation-header.component.scss'],\r\n})\r\nexport class SdsNavigationHeaderComponent implements OnInit {\r\n    @Input() text: string;\r\n\r\n    constructor() {\r\n        this.text = '';\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-navigation-header\">\r\n    {{ text }}\r\n</div>\r\n","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-route-link',\r\n    templateUrl: './navigation-route-link.component.html',\r\n    styleUrls: ['./navigation-route-link.component.scss'],\r\n})\r\nexport class SdsNavigationRouteLinkComponent implements OnInit {\r\n    @Input() routerLink: string = '';\r\n    @Input() text: string = '';\r\n\r\n    @Input() additionalInfo: string | undefined = undefined;\r\n\r\n    constructor() {\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\r\n<div \r\n    class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n    routerLinkActive=\"active\">\r\n    <a class=\"sds-navigation-item-content w-100\" [routerLink]=\"routerLink\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n            <div class=\"sds-navigation-text\">\r\n                {{ text }}\r\n            </div>\r\n            <span *ngIf=\"additionalInfo\"\r\n                class=\"sds-navigation-router-link-additional-info badge badge-pill badge-warning\"\r\n                >{{ additionalInfo }}</span\r\n            > \r\n        </div>\r\n    </a>\r\n</div>","import {\r\n    AfterContentInit,\r\n    Component,\r\n    ContentChildren,\r\n    Input,\r\n    OnInit,\r\n    QueryList,\r\n} from '@angular/core';\r\nimport { NavigationStart, Router } from '@angular/router';\r\nimport { SdsNavigationRouteLinkComponent } from '../navigation-route-link/navigation-route-link.component';\r\n\r\nimport { faAngleUp, faAngleDown } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n\r\n\r\n@Component({\r\n    selector: 'sds-navigation-group',\r\n    templateUrl: './navigation-group.component.html',\r\n    styleUrls: ['./navigation-group.component.scss'],\r\n})\r\nexport class SdsNavigationGroupComponent implements OnInit, AfterContentInit {\r\n    @Input() text: string = '';\r\n    @Input() icon: string = '';\r\n    @Input() defaultRouterLink: string = '';\r\n    @Input() reverse = false;\r\n\r\n    @ContentChildren(SdsNavigationRouteLinkComponent)\r\n    routerLinkComponents: QueryList<SdsNavigationRouteLinkComponent> = new QueryList<SdsNavigationRouteLinkComponent>();\r\n\r\n    active: boolean = false;\r\n\r\n    faAngleUpRegular = faAngleUp;\r\n    faAngleDownRegular = faAngleDown;\r\n\r\n    constructor(private _router: Router) {}\r\n\r\n    ngOnInit(): void {\r\n    }\r\n\r\n    ngAfterContentInit() {\r\n        this._router.events.subscribe((event) => {\r\n            if (event instanceof NavigationStart) {\r\n                this.active =\r\n                    this.routerLinkComponents.find(\r\n                        (item) =>\r\n                            (item as SdsNavigationRouteLinkComponent)\r\n                                .routerLink === event.url\r\n                    ) != null;\r\n            }\r\n        });\r\n    }\r\n\r\n    navigateToDefaultRouterLink() {\r\n        this._router.navigateByUrl(this.defaultRouterLink);\r\n    }\r\n\r\n}\r\n","<div class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.active] = \"active\" >\r\n    <a class=\"w-100 sds-navigation-item-content\" style=\"cursor: pointer\"\r\n        (click)=\"navigateToDefaultRouterLink()\">\r\n        \r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n            <div class=\"sds-navigation-text\">\r\n                {{ text }}\r\n            </div>\r\n            <div class=\"text-right\">\r\n                <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n            </div>\r\n        </div>\r\n    </a>\r\n    <div class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n</div>","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-container',\r\n    templateUrl: './navigation-container.component.html',\r\n    styleUrls: ['./navigation-container.component.scss'],\r\n})\r\nexport class SdsNavigationContainerComponent implements OnInit {\r\n    @Input() product: string;\r\n\r\n    constructor() {\r\n        this.product = 'all-hours';\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div \r\n    class=\"sds-navigation-container\"\r\n    [class]=\"'product-' + product\">\r\n    <ng-content></ng-content>\r\n</div>","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sds-navigation-external-link',\r\n  templateUrl: './navigation-external-link.component.html',\r\n  styleUrls: ['./navigation-external-link.component.scss']\r\n})\r\nexport class SdsNavigationExternalLinkComponent implements OnInit {\r\n\r\n    @Input() link: string = '';\r\n    @Input() text: string = '';\r\n    @Input() tabName: string = '_blank'\r\n\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  openLink(){\r\n    window.open(this.link, this.tabName);\r\n  }\r\n\r\n}\r\n","<!-- class=\"sds-navigation-router-link d-flex justify-content-start align-items-center py-1\"> -->\r\n<div \r\n    class=\"sds-navigation-router-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n            <div class=\"sds-navigation-text\">\r\n                {{ text }}\r\n            </div>\r\n        </div>\r\n    </a>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RouterModule } from '@angular/router';\r\n\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\nimport { SdsNavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';\r\nimport { SdsNavigationHeaderComponent } from './navigation-header/navigation-header.component';\r\nimport { SdsNavigationGroupComponent } from './navigation-group/navigation-group.component';\r\nimport { SdsNavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';\r\nimport { SdsNavigationContainerComponent } from './navigation-container/navigation-container.component';\r\nimport { SdsNavigationExternalLinkComponent } from './navigation-external-link/navigation-external-link.component';\r\n\r\n// import { NavigationGroupComponent } from './navigation-group/navigation-group.component';\r\n// import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';\r\n// import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';\r\n// import { NavigationHeaderComponent } from './navigation-header/navigation-header.component';\r\n\r\nconst components = [\r\n    SdsNavigationGroupComponent,\r\n    SdsNavigationRouteLinkComponent,\r\n    SdsNavigationSeparatorComponent,\r\n    SdsNavigationHeaderComponent,\r\n    SdsNavigationContainerComponent,\r\n    SdsNavigationExternalLinkComponent\r\n]\r\n  \r\n@NgModule({\r\n  declarations: [\r\n      ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    RouterModule,\r\n    FontAwesomeModule    \r\n  ],\r\n  exports: [\r\n    ...components\r\n  ]\r\n})\r\nexport class SdsNavigationModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i3"],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-navigation.mjs","sources":["../../../projects/ngx-sds-components/src/lib/navigation/navigation-separator/navigation-separator.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-separator/navigation-separator.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-header/navigation-header.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-header/navigation-header.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-route-link/navigation-route-link.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-route-link/navigation-route-link.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-group/navigation-group.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-group/navigation-group.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-container/navigation-container.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-container/navigation-container.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation-external-link/navigation-external-link.component.ts","../../../projects/ngx-sds-components/src/lib/navigation/navigation-external-link/navigation-external-link.component.html","../../../projects/ngx-sds-components/src/lib/navigation/navigation.module.ts","../../../projects/ngx-sds-components/src/lib/navigation/spicainternational-ngx-sds-components-src-lib-navigation.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sds-navigation-separator',\r\n  templateUrl: './navigation-separator.component.html',\r\n  styleUrls: ['./navigation-separator.component.scss']\r\n})\r\nexport class SdsNavigationSeparatorComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n}\r\n","<div class=\"sds-navigation-separator nav-separator\"></div>\r\n","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-header',\r\n    templateUrl: './navigation-header.component.html',\r\n    styleUrls: ['./navigation-header.component.scss'],\r\n})\r\nexport class SdsNavigationHeaderComponent implements OnInit {\r\n    @Input() text: string;\r\n\r\n    constructor() {\r\n        this.text = '';\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-navigation-header\">\r\n    {{ text }}\r\n</div>\r\n","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-route-link',\r\n    templateUrl: './navigation-route-link.component.html',\r\n    styleUrls: ['./navigation-route-link.component.scss'],\r\n})\r\nexport class SdsNavigationRouteLinkComponent implements OnInit {\r\n    @Input() routerLink: string = '';\r\n    @Input() text: string = '';\r\n\r\n    @Input() additionalInfo: string | undefined = undefined;\r\n\r\n    constructor() {\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\r\n<div \r\n    class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n    routerLinkActive=\"active\">\r\n    <a class=\"sds-navigation-item-content w-100\" [routerLink]=\"routerLink\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n            <div class=\"sds-navigation-text\">\r\n                {{ text }}\r\n            </div>\r\n            <span *ngIf=\"additionalInfo\"\r\n                class=\"sds-navigation-router-link-additional-info badge badge-pill badge-warning\"\r\n                >{{ additionalInfo }}</span\r\n            > \r\n        </div>\r\n    </a>\r\n</div>","import {\r\n    AfterContentInit,\r\n    Component,\r\n    ContentChildren,\r\n    Input,\r\n    OnInit,\r\n    QueryList,\r\n} from '@angular/core';\r\nimport { NavigationStart, Router } from '@angular/router';\r\nimport { SdsNavigationRouteLinkComponent } from '../navigation-route-link/navigation-route-link.component';\r\n\r\nimport { faAngleUp, faAngleDown } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n\r\n\r\n@Component({\r\n    selector: 'sds-navigation-group',\r\n    templateUrl: './navigation-group.component.html',\r\n    styleUrls: ['./navigation-group.component.scss'],\r\n})\r\nexport class SdsNavigationGroupComponent implements OnInit, AfterContentInit {\r\n    @Input() text: string = '';\r\n    @Input() icon: string = '';\r\n    @Input() defaultRouterLink: string = '';\r\n    @Input() reverse = false;\r\n\r\n    @ContentChildren(SdsNavigationRouteLinkComponent)\r\n    routerLinkComponents: QueryList<SdsNavigationRouteLinkComponent> = new QueryList<SdsNavigationRouteLinkComponent>();\r\n\r\n    active: boolean = false;\r\n\r\n    faAngleUpRegular = faAngleUp;\r\n    faAngleDownRegular = faAngleDown;\r\n\r\n    constructor(private _router: Router) {}\r\n\r\n    ngOnInit(): void {\r\n    }\r\n\r\n    ngAfterContentInit() {\r\n        this._router.events.subscribe((event) => {\r\n            if (event instanceof NavigationStart) {\r\n                this.active =\r\n                    this.routerLinkComponents.find(\r\n                        (item) =>\r\n                            (item as SdsNavigationRouteLinkComponent)\r\n                                .routerLink === event.url\r\n                    ) != null;\r\n            }\r\n        });\r\n    }\r\n\r\n    navigateToDefaultRouterLink() {\r\n        this._router.navigateByUrl(this.defaultRouterLink);\r\n    }\r\n\r\n}\r\n","<div class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.active] = \"active\" >\r\n    <a class=\"w-100 sds-navigation-item-content\" style=\"cursor: pointer\"\r\n        (click)=\"navigateToDefaultRouterLink()\">\r\n        \r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n            <div class=\"sds-navigation-text\">\r\n                {{ text }}\r\n            </div>\r\n            <div class=\"text-right\">\r\n                <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n            </div>\r\n        </div>\r\n    </a>\r\n    <div class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n</div>","import { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-navigation-container',\r\n    templateUrl: './navigation-container.component.html',\r\n    styleUrls: ['./navigation-container.component.scss'],\r\n})\r\nexport class SdsNavigationContainerComponent implements OnInit {\r\n    @Input() product: string;\r\n\r\n    constructor() {\r\n        this.product = 'all-hours';\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div \r\n    class=\"sds-navigation-container\"\r\n    [class]=\"'product-' + product\">\r\n    <ng-content></ng-content>\r\n</div>","import { Component, Input, OnInit } from '@angular/core';\r\nimport { faExternalLink } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n  selector: 'sds-navigation-external-link',\r\n  templateUrl: './navigation-external-link.component.html',\r\n  styleUrls: ['./navigation-external-link.component.scss']\r\n})\r\nexport class SdsNavigationExternalLinkComponent implements OnInit {\r\n\r\n    @Input() link: string = '';\r\n    @Input() text: string = '';\r\n    @Input() tabName: string = '_blank'\r\n    @Input() externalLinkHint = '';\r\n    @Input() showExternalLinkIcon = true;\r\n\r\n\r\n    public externalLinkIcon = faExternalLink;\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  openLink(){\r\n    window.open(this.link, this.tabName);\r\n  }\r\n\r\n}\r\n","<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <div class=\"sds-navigation-text\">\r\n                <span>{{ text }}</span>\r\n            </div>\r\n\r\n            <div \r\n                class=\"sds-navigation-external-link-info-container\">\r\n                <fa-icon \r\n                    class=\"sds-navigation-external-link-info-icon\"\r\n                    *ngIf=\"showExternalLinkIcon\"\r\n\r\n                    [icon]=\"externalLinkIcon\"\r\n                    [size]=\"'xs'\"\r\n                    [title]=\"externalLinkHint\"\r\n                    >\r\n                </fa-icon>\r\n            </div>             \r\n\r\n        </div>\r\n    </a>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RouterModule } from '@angular/router';\r\n\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\nimport { SdsNavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';\r\nimport { SdsNavigationHeaderComponent } from './navigation-header/navigation-header.component';\r\nimport { SdsNavigationGroupComponent } from './navigation-group/navigation-group.component';\r\nimport { SdsNavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';\r\nimport { SdsNavigationContainerComponent } from './navigation-container/navigation-container.component';\r\nimport { SdsNavigationExternalLinkComponent } from './navigation-external-link/navigation-external-link.component';\r\n\r\n// import { NavigationGroupComponent } from './navigation-group/navigation-group.component';\r\n// import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';\r\n// import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';\r\n// import { NavigationHeaderComponent } from './navigation-header/navigation-header.component';\r\n\r\nconst components = [\r\n    SdsNavigationGroupComponent,\r\n    SdsNavigationRouteLinkComponent,\r\n    SdsNavigationSeparatorComponent,\r\n    SdsNavigationHeaderComponent,\r\n    SdsNavigationContainerComponent,\r\n    SdsNavigationExternalLinkComponent\r\n]\r\n  \r\n@NgModule({\r\n  declarations: [\r\n      ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    RouterModule,\r\n    FontAwesomeModule    \r\n  ],\r\n  exports: [\r\n    ...components\r\n  ]\r\n})\r\nexport class SdsNavigationModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i3","i1"],"mappings":";;;;;;;;;;MAOa,+BAA+B,CAAA;AAE1C,IAAA,WAAA,GAAA,GAAiB;IAEjB,QAAQ,GAAA;KACP;;4HALU,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA/B,+BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,gECP5C,kEACA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDMa,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAL3C,SAAS;+BACE,0BAA0B,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;;MEIzB,4BAA4B,CAAA;AAGrC,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;KAClB;AAED,IAAA,QAAQ,MAAW;;yHAPV,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,4BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,uFCPzC,uEAGA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDIa,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBALxC,SAAS;+BACI,uBAAuB,EAAA,QAAA,EAAA,uEAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAKxB,IAAI,EAAA,CAAA;sBAAZ,KAAK;;;MEDG,+BAA+B,CAAA;AAMxC,IAAA,WAAA,GAAA;AALS,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE,CAAC;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAElB,QAAA,IAAc,CAAA,cAAA,GAAuB,SAAS,CAAC;KAGvD;AAED,IAAA,QAAQ,MAAW;;4HATV,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA/B,+BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,uJCP5C,03BAkBM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDXO,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAL3C,SAAS;+BACI,2BAA2B,EAAA,QAAA,EAAA,03BAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAK5B,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,cAAc,EAAA,CAAA;sBAAtB,KAAK;;;MESG,2BAA2B,CAAA;AAcpC,IAAA,WAAA,CAAoB,OAAe,EAAA;AAAf,QAAA,IAAO,CAAA,OAAA,GAAP,OAAO,CAAQ;AAb1B,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAClB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAClB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE,CAAC;AAC/B,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAGzB,QAAA,IAAA,CAAA,oBAAoB,GAA+C,IAAI,SAAS,EAAmC,CAAC;AAEpH,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK,CAAC;AAExB,QAAA,IAAgB,CAAA,gBAAA,GAAG,SAAS,CAAC;AAC7B,QAAA,IAAkB,CAAA,kBAAA,GAAG,WAAW,CAAC;KAEM;IAEvC,QAAQ,GAAA;KACP;IAED,kBAAkB,GAAA;QACd,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;YACpC,IAAI,KAAK,YAAY,eAAe,EAAE;AAClC,gBAAA,IAAI,CAAC,MAAM;oBACP,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAC1B,CAAC,IAAI,KACA,IAAwC;AACpC,yBAAA,UAAU,KAAK,KAAK,CAAC,GAAG,CACpC,IAAI,IAAI,CAAC;AACjB,aAAA;AACL,SAAC,CAAC,CAAC;KACN;IAED,2BAA2B,GAAA;QACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACtD;;wHAlCQ,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4GAA3B,2BAA2B,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,SAAA,EAMnB,+BAA+B,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1BpD,qgCAwBM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDJO,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBALvC,SAAS;+BACI,sBAAsB,EAAA,QAAA,EAAA,qgCAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;6FAKvB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAGN,oBAAoB,EAAA,CAAA;sBADnB,eAAe;uBAAC,+BAA+B,CAAA;;;MEnBvC,+BAA+B,CAAA;AAGxC,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;KAC9B;AAED,IAAA,QAAQ,MAAW;;4HAPV,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA/B,+BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,gGCP5C,qIAIM,EAAA,MAAA,EAAA,CAAA,qHAAA,CAAA,EAAA,CAAA,CAAA;2FDGO,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAL3C,SAAS;+BACI,0BAA0B,EAAA,QAAA,EAAA,qIAAA,EAAA,MAAA,EAAA,CAAA,qHAAA,CAAA,EAAA,CAAA;0EAK3B,OAAO,EAAA,CAAA;sBAAf,KAAK;;;MEAG,kCAAkC,CAAA;AAW7C,IAAA,WAAA,GAAA;AATW,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAClB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE,CAAC;AAClB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ,CAAA;AAC1B,QAAA,IAAgB,CAAA,gBAAA,GAAG,EAAE,CAAC;AACtB,QAAA,IAAoB,CAAA,oBAAA,GAAG,IAAI,CAAC;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAG,cAAc,CAAC;KAE1B;IAEjB,QAAQ,GAAA;KACP;IAED,QAAQ,GAAA;QACN,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;;+HAlBU,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlC,kCAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,oNCR/C,2gCA2BM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDnBO,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAL9C,SAAS;+BACE,8BAA8B,EAAA,QAAA,EAAA,2gCAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAM7B,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;;;AEDV;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;IACf,2BAA2B;IAC3B,+BAA+B;IAC/B,+BAA+B;IAC/B,4BAA4B;IAC5B,+BAA+B;IAC/B,kCAAkC;CACrC,CAAA;MAeY,mBAAmB,CAAA;;gHAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,iBArB5B,2BAA2B;QAC3B,+BAA+B;QAC/B,+BAA+B;QAC/B,4BAA4B;QAC5B,+BAA+B;AAC/B,QAAA,kCAAkC,aAQlC,YAAY;QACZ,YAAY;AACZ,QAAA,iBAAiB,aAfjB,2BAA2B;QAC3B,+BAA+B;QAC/B,+BAA+B;QAC/B,4BAA4B;QAC5B,+BAA+B;QAC/B,kCAAkC,CAAA,EAAA,CAAA,CAAA;AAgBzB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EATrB,OAAA,EAAA,CAAA;YACP,YAAY;YACZ,YAAY;YACZ,iBAAiB;SAClB,CAAA,EAAA,CAAA,CAAA;2FAKU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;AACV,wBAAA,GAAG,UAAU;AAChB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,YAAY;wBACZ,iBAAiB;AAClB,qBAAA;AACD,oBAAA,OAAO,EAAE;AACP,wBAAA,GAAG,UAAU;AACd,qBAAA;iBACF,CAAA;;;ACvCD;;AAEG;;;;"}

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

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { ElementRef, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i2 from 'devextreme-angular/ui/popover';
+import { DxPopoverModule } from 'devextreme-angular/ui/popover';
+import * as i3 from 'devextreme-angular/ui/nested';
+
+class SdsQuickInfoComponent {
+    constructor() {
+        this.popoverMaxWidth = 300;
+    }
+    onHiding(e) {
+        const popoverContent = e.component.content().parentNode;
+        const isMouseInsidePopover = popoverContent.matches(':hover');
+        e.cancel = isMouseInsidePopover;
+        popoverContent.addEventListener('mouseleave', () => {
+            e.component.hide();
+        });
+    }
+}
+SdsQuickInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsQuickInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsQuickInfoComponent, selector: "sds-quick-info", inputs: { popoverMaxWidth: "popoverMaxWidth" }, viewQueries: [{ propertyName: "buttonElementRef", first: true, predicate: ["popoverTarget"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<fa-icon \r\n    #popoverTarget    \r\n    [icon]=\"['far', 'info-circle']\"\r\n> </fa-icon>\r\n\r\n<dx-popover\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    showEvent=\"dxhoverstart\"\r\n    [hideEvent]=\"{ name: 'dxhoverend', delay: 200 }\"\r\n    (onHiding)=\"onHiding($event)\"\r\n>\r\n<dxo-animation>\r\n    <dxo-show\r\n        type=\"fade\"\r\n        duration=\"200\"\r\n        [from]=\"0\"\r\n        [to]=\"1\"\r\n    ></dxo-show>\r\n    <dxo-hide\r\n        type=\"fade\"\r\n        duration=\"10\"\r\n        [from]=\"1\"\r\n        [to]=\"0\"\r\n    ></dxo-hide>\r\n</dxo-animation>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i3.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i3.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-quick-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fa-icon \r\n    #popoverTarget    \r\n    [icon]=\"['far', 'info-circle']\"\r\n> </fa-icon>\r\n\r\n<dx-popover\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    showEvent=\"dxhoverstart\"\r\n    [hideEvent]=\"{ name: 'dxhoverend', delay: 200 }\"\r\n    (onHiding)=\"onHiding($event)\"\r\n>\r\n<dxo-animation>\r\n    <dxo-show\r\n        type=\"fade\"\r\n        duration=\"200\"\r\n        [from]=\"0\"\r\n        [to]=\"1\"\r\n    ></dxo-show>\r\n    <dxo-hide\r\n        type=\"fade\"\r\n        duration=\"10\"\r\n        [from]=\"1\"\r\n        [to]=\"0\"\r\n    ></dxo-hide>\r\n</dxo-animation>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { popoverMaxWidth: [{
+                type: Input
+            }], buttonElementRef: [{
+                type: ViewChild,
+                args: ['popoverTarget', { read: ElementRef, static: true }]
+            }] } });
+
+const components = [SdsQuickInfoComponent];
+class SdsQuickInfoModule {
+}
+SdsQuickInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsQuickInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoModule, declarations: [SdsQuickInfoComponent], imports: [CommonModule,
+        FontAwesomeModule,
+        DxPopoverModule], exports: [SdsQuickInfoComponent] });
+SdsQuickInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoModule, imports: [[
+            CommonModule,
+            FontAwesomeModule,
+            DxPopoverModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsQuickInfoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...components
+                    ],
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        DxPopoverModule,
+                    ],
+                    exports: [
+                        ...components
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsQuickInfoComponent, SdsQuickInfoModule };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-quick-info.mjs","sources":["../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.ts","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.html","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.module.ts","../../../projects/ngx-sds-components/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    ViewChild,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-quick-info',\r\n    templateUrl: './quick-info.component.html',\r\n    styleUrls: ['./quick-info.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdsQuickInfoComponent {\r\n    @Input() popoverMaxWidth: number = 300;\r\n    @ViewChild('popoverTarget', { read: ElementRef, static: true }) public buttonElementRef?: ElementRef;\r\n\r\n    constructor() {\r\n    }\r\n\r\n    onHiding(e: any) {\r\n        const popoverContent = e.component.content().parentNode;\r\n        const isMouseInsidePopover = popoverContent.matches(':hover');\r\n        e.cancel = isMouseInsidePopover;\r\n\r\n        popoverContent.addEventListener('mouseleave', () => {\r\n            e.component.hide();\r\n        });\r\n    }\r\n}\r\n","<fa-icon \r\n    #popoverTarget    \r\n    [icon]=\"['far', 'info-circle']\"\r\n> </fa-icon>\r\n\r\n<dx-popover\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    showEvent=\"dxhoverstart\"\r\n    [hideEvent]=\"{ name: 'dxhoverend', delay: 200 }\"\r\n    (onHiding)=\"onHiding($event)\"\r\n>\r\n<dxo-animation>\r\n    <dxo-show\r\n        type=\"fade\"\r\n        duration=\"200\"\r\n        [from]=\"0\"\r\n        [to]=\"1\"\r\n    ></dxo-show>\r\n    <dxo-hide\r\n        type=\"fade\"\r\n        duration=\"10\"\r\n        [from]=\"1\"\r\n        [to]=\"0\"\r\n    ></dxo-hide>\r\n</dxo-animation>\r\n    <ng-content></ng-content>\r\n</dx-popover>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsQuickInfoComponent } from './quick-info.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\n\r\n\r\nconst components = [SdsQuickInfoComponent];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule,\r\n  ],\r\n  exports: [\r\n    ...components\r\n  ]\r\n})\r\nexport class SdsQuickInfoModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -5,24 +5,27 @@ import { CommonModule } from '@angular/common';
 
 class SdsSegmentedControlComponent {
     constructor() {
-        this.valueExpr = "value";
-        this.displayExpr = "text";
-        this.disabled = false;
         this.itemChange = new EventEmitter();
         this.valueChange = new EventEmitter();
+        this.valueExpr = 'value';
+        this.displayExpr = 'text';
+        this.disabled = false;
+        this.style = 'default';
     }
     ngOnInit() { }
-    itemSelected(item) {
-        this.value = item[this.valueExpr];
-        this.valueChange.emit(this.value);
-        this.itemChange.emit(item);
+    selectItem(item) {
+        if (!this.disabled) {
+            this.value = item[this.valueExpr];
+            this.valueChange.emit(this.value);
+            this.itemChange.emit(item);
+        }
     }
 }
 SdsSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSegmentedControlComponent, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [class.disabled]=\"disabled\">\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"itemSelected(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSegmentedControlComponent, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled", style: "style" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted'\r\n    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [class.disabled]=\"disabled\">\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"itemSelected(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'sds-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted'\r\n    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { items: [{
                 type: Input
             }], value: [{
@@ -37,6 +40,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], style: [{
+                type: Input
             }], itemChange: [{
                 type: Output
             }], valueChange: [{

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.module.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sds-segmented-control',\r\n  templateUrl: './segmented-control.component.html',\r\n  styleUrls: ['./segmented-control.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit {\r\n\r\n    @Input() items: any[] | undefined;\r\n    @Input() value: any;\r\n    @Input() valueExpr: string = \"value\";\r\n    @Input() displayExpr: string = \"text\";\r\n    @Input() tooltipExpr: string | undefined;\r\n    @Input() idExpr: string | undefined;\r\n    @Input() disabled: boolean = false;\r\n\r\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit() {}\r\n\r\n    public itemSelected(item: any): void {\r\n        this.value = item[this.valueExpr];\r\n\r\n        this.valueChange.emit(this.value);\r\n        this.itemChange.emit(item);\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n","<div \r\n    class=\"sds-segmented-control-container\" \r\n    [class.disabled]=\"disabled\">\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"itemSelected(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSegmentedControlComponent } from './segmented-control.component';\r\n\r\n\r\nconst components = [SdsSegmentedControlComponent];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  exports: [\r\n    ...components\r\n]\r\n})\r\nexport class SdsSegmentedControlModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.module.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    EventEmitter,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-segmented-control',\r\n    templateUrl: './segmented-control.component.html',\r\n    styleUrls: ['./segmented-control.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit {\r\n    @Input() items: any[] | undefined;\r\n    @Input() value: any;\r\n    @Input() valueExpr;\r\n    @Input() displayExpr;\r\n    @Input() tooltipExpr: string | undefined;\r\n    @Input() idExpr: string | undefined;\r\n    @Input() disabled: boolean;\r\n\r\n    @Input() style: string;\r\n\r\n    @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n    @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n\r\n    constructor() {\r\n        this.valueExpr = 'value';\r\n        this.displayExpr = 'text'; \r\n        this.disabled = false;\r\n        this.style = 'default';\r\n    }\r\n\r\n    ngOnInit() {}\r\n\r\n    public selectItem(item: any): void {\r\n        if (!this.disabled) {\r\n            this.value = item[this.valueExpr];\r\n            this.valueChange.emit(this.value);\r\n            this.itemChange.emit(item);\r\n        }\r\n    }\r\n}\r\n","<div \r\n    class=\"sds-segmented-control-container\" \r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted'\r\n    }\"\r\n    >\r\n    <div *ngFor=\"let item of items let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item)\">\r\n\r\n        <div>\r\n            <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n            <span>{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSegmentedControlComponent } from './segmented-control.component';\r\n\r\n\r\nconst components = [SdsSegmentedControlComponent];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  exports: [\r\n    ...components\r\n]\r\n})\r\nexport class SdsSegmentedControlModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -7,6 +7,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
 export * from '@spicainternational/ngx-sds-components/src/lib/modal';
 export * from '@spicainternational/ngx-sds-components/src/lib/navigation';
 export * from '@spicainternational/ngx-sds-components/src/lib/pane';
+export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
 

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

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

@@ -1,55 +1,78 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
 import * as i3 from 'devextreme-angular/ui/scroll-view';
 import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
 
+/**
+ * Class definition
+ * @property {string} text - text that is parsed for initials. If showHint is set to true this text will be shown in hint
+ * @property {string} colorKey - value that is base for calculating color of avatar
+ * @property {boolean} showHint - show hint with text
+ * @property {string} initialsText - override internal extraction of initials and set avatar text directly
+ */
 class SdsAvatarComponent {
-    constructor() {
-        this.text = '';
-        this.colorKey = '';
-        this.pictureUri = '';
+    constructor(_change) {
+        this._change = _change;
         this.showHint = false;
         this.borderStyle = 'none';
-        this.isPictureReady = false;
-        this.initials = '';
+        this.size = 2;
+        this.label = '';
+        this.showPicture = false;
+        this.colorClass = 'color18';
     }
     ngAfterViewInit() {
-        this.loadUserPicture();
+        this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;
+        this.setColorClass();
     }
     ngOnChanges(changes) {
-        if (changes['text'] &&
-            changes['text'].currentValue != changes['text'].previousValue &&
-            this.initialsText == undefined) {
-            this.extractInitials();
+        console.log('change');
+        console.log(changes);
+        if (changes['initialsText']) {
+            this.setLabel();
+        }
+        if (changes['text']) {
+            this.setLabel();
         }
-        if (changes['pictureUri'] &&
-            changes['pictureUri'].currentValue !=
-                changes['pictureUri'].previousValue) {
-            this.loadUserPicture();
+        if (changes['pictureUri']) {
+            this.showPicture = !!this.pictureUri && this.pictureUri?.length > 0;
         }
-        if (changes['initialsText'] && this.initialsText) {
-            this.initials = this.initialsText;
+        if (changes['colorKey']) {
+            this.setColorClass();
         }
     }
     setColorClass() {
         if (this.colorKey) {
-            return 'color' + this.getColorIndex(this.colorKey);
+            this.colorClass = 'color' + this.getColorIndex(this.colorKey);
+        }
+        else {
+            this.colorClass = 'color18';
         }
-        return 'color18';
     }
-    extractInitials() {
-        this.initials = this.text
-            ? this.text
+    setLabel() {
+        if (this.initialsText && this.initialsText?.length > 0) {
+            this.label = this.initialsText;
+            console.log('initialsText');
+            console.log(this.initialsText);
+        }
+        else if (this.text && this.text?.length > 0) {
+            this.label = this.text
                 .toUpperCase()
                 .split(' ')
                 .map((n) => n[0])
                 .slice(0, 2)
-                .join('')
-            : '';
+                .join('');
+            console.log('text');
+            console.log(this.text);
+        }
+        else {
+            this.label = '';
+            console.log('empty');
+        }
+        console.log(`label: ${this.label}`);
     }
     getColorIndex(s) {
         const length = 10;
@@ -62,21 +85,13 @@ class SdsAvatarComponent {
             .reduce((a, b) => a + b, 0);
         return sumOfChars % length;
     }
-    loadUserPicture() {
-        if (this.pictureUri && this.pictureUri !== '') {
-            this.isPictureReady = true;
-        }
-        else {
-            this.isPictureReady = false;
-        }
-    }
 }
-SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarComponent, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", initialsText: "initialsText", cursor: "cursor" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.avatar.color0{color:#f44336;background-color:#feeceb;border-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SdsAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarComponent, selector: "sds-avatar", inputs: { text: "text", colorKey: "colorKey", pictureUri: "pictureUri", showHint: "showHint", borderStyle: "borderStyle", borderColor: "borderColor", initialsText: "initialsText", cursor: "cursor", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class]=\"colorClass\"\r\n    [class.hasPicture]=\"showPicture\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n    [style.font-size.rem]=\"size\"\r\n>\r\n    <span \r\n        *ngIf=\"!showPicture\" \r\n        class=\"initials\"\r\n        >\r\n        {{ label }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.avatar.color0{color:#f44336;background-color:#feeceb;border-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar', template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.avatar.color0{color:#f44336;background-color:#feeceb;border-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'sds-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class]=\"colorClass\"\r\n    [class.hasPicture]=\"showPicture\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n    [style.font-size.rem]=\"size\"\r\n>\r\n    <span \r\n        *ngIf=\"!showPicture\" \r\n        class=\"initials\"\r\n        >\r\n        {{ label }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"showPicture\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n", styles: [".avatar{display:flex;align-items:center;justify-content:center}.avatar.color0{color:#f44336;background-color:#feeceb;border-width:1px;border-style:solid;border-color:#f4433680}.avatar.color1{color:#e91e63;background-color:#fde9ef;border-width:1px;border-style:solid;border-color:#e91e6380}.avatar.color2{color:#9c27b0;background-color:#f5e9f7;border-width:1px;border-style:solid;border-color:#9c27b080}.avatar.color3{color:#673ab7;background-color:#f0ebf8;border-width:1px;border-style:solid;border-color:#673ab780}.avatar.color4{color:#3f51b5;background-color:#eceef8;border-width:1px;border-style:solid;border-color:#3f51b580}.avatar.color5{color:#2196f3;background-color:#e9f5fe;border-width:1px;border-style:solid;border-color:#2196f380}.avatar.color6{color:#03a9f4;background-color:#e6f6fe;border-width:1px;border-style:solid;border-color:#03a9f480}.avatar.color7{color:#00bcd4;background-color:#e6f8fb;border-width:1px;border-style:solid;border-color:#00bcd480}.avatar.color8{color:#009688;background-color:#e6f5f3;border-width:1px;border-style:solid;border-color:#00968880}.avatar.color9{color:#8bc34a;background-color:#edf7ee;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color10{color:#8bc34a;background-color:#f3f9ed;border-width:1px;border-style:solid;border-color:#8bc34a80}.avatar.color11{color:#aebc21;background-color:#f7f8e9;border-width:1px;border-style:solid;border-color:#aebc2180}.avatar.color12{color:#d1bc04;background-color:#faf8e6;border-width:1px;border-style:solid;border-color:#d1bc0480}.avatar.color13{color:#edb201;background-color:#fdf7e6;border-width:1px;border-style:solid;border-color:#edb20180}.avatar.color14{color:#ff5722;background-color:#ffeee9;border-width:1px;border-style:solid;border-color:#ff572280}.avatar.color15{color:#e48901;background-color:#fcf3e6;border-width:1px;border-style:solid;border-color:#e4890180}.avatar.color16{color:#795548;background-color:#f2eeed;border-width:1px;border-style:solid;border-color:#79554880}.avatar.color17{color:#9e9e9e;background-color:#f5f5f5;border-width:1px;border-style:solid;border-color:#9e9e9e80}.avatar.color18{color:#607d8b;background-color:#eff2f3;border-width:1px;border-style:solid;border-color:#607d8b80}.avatar img{width:100%;height:100%;border-radius:50%}.avatar.circle{border-radius:50%;height:1em;text-align:center;width:1em}.avatar.circle .initials{font-size:.3703703704em;font-weight:500}.avatar.circle.hasPicture{border-width:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], colorKey: [{
                 type: Input
@@ -92,31 +107,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], cursor: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 class SdsAvatarGroupComponent {
     constructor() {
-        this.stacked = false;
-        this.fontSize = 2;
-        this.data = [];
+        // this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();
+        this.dropdownContents = 'all';
+        // init values in constructor so storybook doesn't have issues with initial state
+        this.overflowElementUUID = `sds-ag-${Math.ceil(Math.random() * 1000000)}`;
+        this.overFlowBorderStyle = 'none';
+        this.showDropdown = false;
+        this.showOverflow = false;
+        this.avatars = [];
         this.overflow = [];
         this.inflow = [];
         this.overflowCountDisplay = '';
-        this.overFlowBorderStyle = 'none';
-        this.overflowElementUUID = 'sds-ag-' + crypto.randomUUID();
-        this.showDropdown = false;
+        this.size = 2;
+        this.stacked = false;
     }
     ngOnChanges(changes) {
-        if (changes['data'] || changes['maxCount']) {
-            if (this.maxCount && this.data) {
-                this.overflow = [...this.data];
-                this.inflow = this.overflow.splice(0, this.maxCount);
-                console.log(this.overflow.length);
+        if (changes['avatars'] || changes['max']) {
+            if (this.max && this.avatars) {
+                let avatars = [...this.avatars];
+                this.inflow = avatars.splice(0, this.max);
+                this.overflow = avatars;
+                this.showOverflow = this.overflow.length > 0;
                 this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;
-                this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';
+                this.overFlowBorderStyle = this.avatars.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';
             }
             else {
-                this.inflow = [...this.data];
+                this.inflow = [...this.avatars];
             }
         }
     }
@@ -126,19 +148,21 @@ class SdsAvatarGroupComponent {
     }
 }
 SdsAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", maxCount: "maxCount", fontSize: "fontSize", borderColor: "borderColor", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n        \r\n    <sds-avatar \r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\" \r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        >\r\n        <dx-scroll-view \r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of overflow\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [style.font-size.rem]=\"1.8\" \r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"], components: [{ type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", max: "max", size: "size", borderColor: "borderColor", avatars: "avatars", dropdownContents: "dropdownContents" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked()\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"], components: [{ type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-avatar-group', template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n        \r\n    <sds-avatar \r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\" \r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        >\r\n        <dx-scroll-view \r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of overflow\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [style.font-size.rem]=\"1.8\" \r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"] }]
+            args: [{ selector: 'sds-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [size]=\"size\"\r\n        [style.margin-right.rem]=\"stacked ? size/-3 : size/15\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"showOverflow\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [size]=\"size\"\r\n        (click)=\"onOverflowClicked()\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? avatars : overflow)\"\r\n                    class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [size]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ms-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { stacked: [{
                 type: Input
-            }], maxCount: [{
+            }], max: [{
                 type: Input
-            }], fontSize: [{
+            }], size: [{
                 type: Input
             }], borderColor: [{
                 type: Input
-            }], data: [{
+            }], avatars: [{
+                type: Input
+            }], dropdownContents: [{
                 type: Input
             }] } });