@spicainternational/ngx-sds-components 2.16.0 → 2.16.2

package/esm2020/src/lib/expansion-panel/expansion-panel.component.mjs

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { faCaretDown, faCaretUp } from '@fortawesome/pro-solid-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@fortawesome/angular-fontawesome";
+import * as i2 from "@angular/common";
+export class ExpansionPanelComponent {
+    constructor() {
+        this.isOpen = false;
+        this.isOpenChange = new EventEmitter();
+        this.cardIsClosedIcon = faCaretDown;
+        this.cardIsOpenIcon = faCaretUp;
+    }
+    onToggleIsOpenClick() {
+        this.isOpen = !this.isOpen;
+        this.isOpenChange.emit(this.isOpen);
+    }
+}
+ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", descriptionText: "descriptionText", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div class=\"bg-light border-secondary rounded p-4\">\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <button\r\n        [id]=\"headerId\"\r\n        type=\"button\"\r\n        class=\"btn btn-link p-0\"\r\n        [ngClass]=\"isOpen ? 'mb-3' : 'mb-1'\"\r\n        (click)=\"onToggleIsOpenClick()\">\r\n        <span class=\"m-0 h4\">\r\n          {{ headerText }}\r\n          <fa-icon [icon]=\"isOpen ? cardIsOpenIcon : cardIsClosedIcon\"></fa-icon>\r\n        </span>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"!isOpen\">\r\n        {{ descriptionText}}\r\n      <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div *ngIf=\"isOpen\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n", styles: [".h4{color:#6c757d}\n"], 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-light border-secondary rounded p-4\">\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <button\r\n        [id]=\"headerId\"\r\n        type=\"button\"\r\n        class=\"btn btn-link p-0\"\r\n        [ngClass]=\"isOpen ? 'mb-3' : 'mb-1'\"\r\n        (click)=\"onToggleIsOpenClick()\">\r\n        <span class=\"m-0 h4\">\r\n          {{ headerText }}\r\n          <fa-icon [icon]=\"isOpen ? cardIsOpenIcon : cardIsClosedIcon\"></fa-icon>\r\n        </span>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"!isOpen\">\r\n        {{ descriptionText}}\r\n      <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div *ngIf=\"isOpen\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n", styles: [".h4{color:#6c757d}\n"] }]
+        }], propDecorators: { headerText: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], headerId: [{
+                type: Input
+            }], descriptionText: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBa0IsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7O0FBUzFGLE1BQU0sT0FBTyx1QkFBdUI7SUFQcEM7UUFzQmEsV0FBTSxHQUFZLEtBQUssQ0FBQztRQUN2QixpQkFBWSxHQUEwQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVELHFCQUFnQixHQUFtQixXQUFXLENBQUM7UUFDL0MsbUJBQWMsR0FBbUIsU0FBUyxDQUFDO0tBTXJEO0lBSlUsbUJBQW1CO1FBQ3hCLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QyxDQUFDOztvSEF4QlEsdUJBQXVCO3dHQUF2Qix1QkFBdUIsa1BDVnBDLDZ2QkF3QkE7MkZEZGEsdUJBQXVCO2tCQVBuQyxTQUFTOytCQUNFLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUlwQyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFVRyxlQUFlO3NCQUF2QixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEljb25EZWZpbml0aW9uLCBmYUNhcmV0RG93biwgZmFDYXJldFVwIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZHMtZXhwYW5zaW9uLXBhbmVsJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEV4cGFuc2lvblBhbmVsQ29tcG9uZW50IHtcclxuICAgIEBJbnB1dCgpIGhlYWRlclRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBoaWRlSGVhZGVyPzogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGhlYWRlcklkPzogc3RyaW5nO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogJ2Rlc2NyaXB0aW9uVGV4dCcgLSB0ZXh0IGRpc3BsYXllZCB3aGVuIGNvbXBvbmVudCBpcyBcImNsb3NlZFwiLlxyXG4gICAgICpcclxuICAgICAqIE5vdGU6IFVzZSBuZy1jb250ZW50ICdjb250ZW50T25DbG9zZWQnIGlmIG1vcmUgY29tcGxleCB1c2UtY2FzZSBpcyBuZWVkZWRcclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7c3RyaW5nfVxyXG4gICAgICogQG1lbWJlcm9mIEV4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGRlc2NyaXB0aW9uVGV4dD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKSBpc09wZW46IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBPdXRwdXQoKSBpc09wZW5DaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgICBwdWJsaWMgY2FyZElzQ2xvc2VkSWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNhcmV0RG93bjtcclxuICAgIHB1YmxpYyBjYXJkSXNPcGVuSWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNhcmV0VXA7XHJcblxyXG4gICAgcHVibGljIG9uVG9nZ2xlSXNPcGVuQ2xpY2soKTogdm9pZCB7XHJcbiAgICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xyXG4gICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiYmctbGlnaHQgYm9yZGVyLXNlY29uZGFyeSByb3VuZGVkIHAtNFwiPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFoaWRlSGVhZGVyXCI+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgIFtpZF09XCJoZWFkZXJJZFwiXHJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgcC0wXCJcclxuICAgICAgICBbbmdDbGFzc109XCJpc09wZW4gPyAnbWItMycgOiAnbWItMSdcIlxyXG4gICAgICAgIChjbGljayk9XCJvblRvZ2dsZUlzT3BlbkNsaWNrKClcIj5cclxuICAgICAgICA8c3BhbiBjbGFzcz1cIm0tMCBoNFwiPlxyXG4gICAgICAgICAge3sgaGVhZGVyVGV4dCB9fVxyXG4gICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiaXNPcGVuID8gY2FyZElzT3Blbkljb24gOiBjYXJkSXNDbG9zZWRJY29uXCI+PC9mYS1pY29uPlxyXG4gICAgICAgIDwvc3Bhbj5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8ZGl2ICpuZ0lmPVwiIWlzT3BlblwiPlxyXG4gICAgICAgIHt7IGRlc2NyaXB0aW9uVGV4dH19XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjb250ZW50T25DbG9zZWRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiAqbmdJZj1cImlzT3BlblwiPlxyXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuIl19

package/esm2020/src/lib/expansion-panel/expansion-panel.module.mjs

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ExpansionPanelComponent } from './expansion-panel.component';
+import * as i0 from "@angular/core";
+/**
+ * Expansion panel - provides an expandable details-summary view. Used for 'progressive disclosure'.
+ *
+ * @export
+ * @class ExpansionPanelModule
+ */
+export class ExpansionPanelModule {
+}
+ExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [ExpansionPanelComponent] });
+ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelModule, imports: [[
+            CommonModule,
+            FontAwesomeModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ExpansionPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ExpansionPanelComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule
+                    ],
+                    exports: [ExpansionPanelComponent]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXJFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQUN0RTs7Ozs7R0FLRztBQVlILE1BQU0sT0FBTyxvQkFBb0I7O2lIQUFwQixvQkFBb0I7a0hBQXBCLG9CQUFvQixpQkFUN0IsdUJBQXVCLGFBR3ZCLFlBQVk7UUFDWixpQkFBaUIsYUFFVCx1QkFBdUI7a0hBR3RCLG9CQUFvQixZQVB0QjtZQUNQLFlBQVk7WUFDWixpQkFBaUI7U0FDbEI7MkZBSVUsb0JBQW9CO2tCQVhoQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWix1QkFBdUI7cUJBQ3hCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGlCQUFpQjtxQkFDbEI7b0JBQ0QsT0FBTyxFQUFFLENBQUMsdUJBQXVCLENBQUM7aUJBQ25DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XHJcblxyXG5pbXBvcnQgeyBFeHBhbnNpb25QYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudCc7XHJcbi8qKlxyXG4gKiBFeHBhbnNpb24gcGFuZWwgLSBwcm92aWRlcyBhbiBleHBhbmRhYmxlIGRldGFpbHMtc3VtbWFyeSB2aWV3LiBVc2VkIGZvciAncHJvZ3Jlc3NpdmUgZGlzY2xvc3VyZScuXHJcbiAqXHJcbiAqIEBleHBvcnRcclxuICogQGNsYXNzIEV4cGFuc2lvblBhbmVsTW9kdWxlXHJcbiAqL1xyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvbnRBd2Vzb21lTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbRXhwYW5zaW9uUGFuZWxDb21wb25lbnRdXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgRXhwYW5zaW9uUGFuZWxNb2R1bGUgeyB9XHJcbiJdfQ==

package/esm2020/src/lib/expansion-panel/public-api.mjs

@@ -0,0 +1,3 @@
+export * from './expansion-panel.module';
+export * from './expansion-panel.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyw2QkFBNkIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZXhwYW5zaW9uLXBhbmVsLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudCc7XHJcbiJdfQ==

package/esm2020/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BpY2FpbnRlcm5hdGlvbmFsLW5neC1zZHMtY29tcG9uZW50cy1zcmMtbGliLWV4cGFuc2lvbi1wYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9zcGljYWludGVybmF0aW9uYWwtbmd4LXNkcy1jb21wb25lbnRzLXNyYy1saWItZXhwYW5zaW9uLXBhbmVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

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

@@ -134,10 +134,10 @@ 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", 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        [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 (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-3 py-2 pr-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=\"ml-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"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { 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", maxCount: "maxCount", fontSize: "fontSize", borderColor: "borderColor", data: "data", 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        [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 (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-1 py-1 pr-2 my-1 mr-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [style.font-size.rem]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ml-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}\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", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { 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"] }] });
 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 (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-3 py-2 pr-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=\"ml-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"] }]
+            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 (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-1 py-1 pr-2 my-1 mr-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [style.font-size.rem]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ml-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}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { stacked: [{
                 type: Input
             }], maxCount: [{

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

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n    AfterViewInit,\r\n    Component,\r\n    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-avatar',\r\n    templateUrl: './avatar.component.html',\r\n    styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n    @Input() text: string = '';\r\n    @Input() colorKey: string = '';\r\n    @Input() pictureUri: string = '';\r\n    @Input() showHint: boolean = false;\r\n    @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\r\n    @Input() borderColor?: string;\r\n    @Input() initialsText?: string;\r\n    @Input() cursor?: string;\r\n\r\n    public isPictureReady: boolean = false;\r\n    public initials: string = '';\r\n\r\n    constructor() {}\r\n\r\n    ngAfterViewInit() {\r\n        this.loadUserPicture();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (\r\n            changes['text'] &&\r\n            changes['text'].currentValue != changes['text'].previousValue &&\r\n            this.initialsText == undefined\r\n        ) {\r\n            this.extractInitials();\r\n        }\r\n\r\n        if (\r\n            changes['pictureUri'] &&\r\n            changes['pictureUri'].currentValue !=\r\n                changes['pictureUri'].previousValue\r\n        ) {\r\n            this.loadUserPicture();\r\n        }\r\n\r\n        if (changes['initialsText'] && this.initialsText) {\r\n            this.initials = this.initialsText;\r\n        }\r\n    }\r\n\r\n    public setColorClass(): string {\r\n        if (this.colorKey) {\r\n            return 'color' + this.getColorIndex(this.colorKey);\r\n        }\r\n        return 'color18';\r\n    }\r\n\r\n    private extractInitials(): void {\r\n        this.initials = '';\r\n        if (this.text) {\r\n            const initialsFromText = this.text\r\n                .trim()\r\n                .toUpperCase()\r\n                .split(' ')\r\n                .map((n) => n[0])\r\n                .filter(x => !!x);\r\n\r\n            if (initialsFromText.length > 0) {\r\n                this.initials = initialsFromText[0];\r\n                if (initialsFromText.length > 1) {\r\n                    this.initials = `${this.initials}${initialsFromText[initialsFromText.length - 1]}`\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private getColorIndex(s: string): number {\r\n        const length = 10;\r\n        if (!s) {\r\n            return 0;\r\n        }\r\n        let sumOfChars = s\r\n            .split('')\r\n            .map((x) => x.charCodeAt(0))\r\n            .reduce((a, b) => a + b, 0);\r\n        return sumOfChars % length;\r\n    }\r\n\r\n    public loadUserPicture() {\r\n        if (this.pictureUri && this.pictureUri !== '') {\r\n            this.isPictureReady = true;\r\n        } else {\r\n            this.isPictureReady = false;\r\n        }\r\n    }\r\n}\r\n","<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n    selector: 'sds-avatar-group',\r\n    templateUrl: './avatar-group.component.html',\r\n    styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n    @Input() public stacked: boolean = false;\r\n    @Input() public maxCount?: number;\r\n    @Input() public fontSize: number = 2;\r\n    @Input() public borderColor?: string;\r\n    @Input() public data: Array<AvatarModel> = [];\r\n    @Input() public dropdownContents: 'all' | 'overflow' = 'all';\r\n\r\n    public overflow: Array<AvatarModel> = [];\r\n    public inflow: Array<AvatarModel> = [];\r\n\r\n    public overflowCountDisplay: string = '';\r\n    public overFlowBorderStyle: 'solid' | 'none' = 'none';\r\n\r\n    public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n\r\n    constructor() {}\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['maxCount']){\r\n            if (this.maxCount && this.data) {\r\n                this.overflow = [...this.data];\r\n                this.inflow = this.overflow.splice(0, this.maxCount);\r\n                console.log(this.overflow.length);\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.data];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked() {\r\n        this.showDropdown = true;\r\n    }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\"\r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-3 py-2 pr-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=\"ml-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n    SdsAvatarComponent,\r\n    SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n    AfterViewInit,\r\n    Component,\r\n    Input,\r\n    OnChanges,\r\n    OnInit,\r\n    SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'sds-avatar',\r\n    templateUrl: './avatar.component.html',\r\n    styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n    @Input() text: string = '';\r\n    @Input() colorKey: string = '';\r\n    @Input() pictureUri: string = '';\r\n    @Input() showHint: boolean = false;\r\n    @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\r\n    @Input() borderColor?: string;\r\n    @Input() initialsText?: string;\r\n    @Input() cursor?: string;\r\n\r\n    public isPictureReady: boolean = false;\r\n    public initials: string = '';\r\n\r\n    constructor() {}\r\n\r\n    ngAfterViewInit() {\r\n        this.loadUserPicture();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (\r\n            changes['text'] &&\r\n            changes['text'].currentValue != changes['text'].previousValue &&\r\n            this.initialsText == undefined\r\n        ) {\r\n            this.extractInitials();\r\n        }\r\n\r\n        if (\r\n            changes['pictureUri'] &&\r\n            changes['pictureUri'].currentValue !=\r\n                changes['pictureUri'].previousValue\r\n        ) {\r\n            this.loadUserPicture();\r\n        }\r\n\r\n        if (changes['initialsText'] && this.initialsText) {\r\n            this.initials = this.initialsText;\r\n        }\r\n    }\r\n\r\n    public setColorClass(): string {\r\n        if (this.colorKey) {\r\n            return 'color' + this.getColorIndex(this.colorKey);\r\n        }\r\n        return 'color18';\r\n    }\r\n\r\n    private extractInitials(): void {\r\n        this.initials = '';\r\n        if (this.text) {\r\n            const initialsFromText = this.text\r\n                .trim()\r\n                .toUpperCase()\r\n                .split(' ')\r\n                .map((n) => n[0])\r\n                .filter(x => !!x);\r\n\r\n            if (initialsFromText.length > 0) {\r\n                this.initials = initialsFromText[0];\r\n                if (initialsFromText.length > 1) {\r\n                    this.initials = `${this.initials}${initialsFromText[initialsFromText.length - 1]}`\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private getColorIndex(s: string): number {\r\n        const length = 10;\r\n        if (!s) {\r\n            return 0;\r\n        }\r\n        let sumOfChars = s\r\n            .split('')\r\n            .map((x) => x.charCodeAt(0))\r\n            .reduce((a, b) => a + b, 0);\r\n        return sumOfChars % length;\r\n    }\r\n\r\n    public loadUserPicture() {\r\n        if (this.pictureUri && this.pictureUri !== '') {\r\n            this.isPictureReady = true;\r\n        } else {\r\n            this.isPictureReady = false;\r\n        }\r\n    }\r\n}\r\n","<div\r\n    class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n    [class.hasPicture]=\"isPictureReady\"\r\n    [ngClass]=\"setColorClass()\"\r\n    [title]=\"showHint ? text : ''\"\r\n    [style.border-style]=\"borderStyle.toString()\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n    <span \r\n        *ngIf=\"!isPictureReady\" \r\n        class=\"initials\"\r\n        >\r\n        {{ initials }}\r\n    </span>\r\n\r\n    <img \r\n        *ngIf=\"isPictureReady\" \r\n        [src]=\"pictureUri\"\r\n        alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n    selector: 'sds-avatar-group',\r\n    templateUrl: './avatar-group.component.html',\r\n    styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n    @Input() public stacked: boolean = false;\r\n    @Input() public maxCount?: number;\r\n    @Input() public fontSize: number = 2;\r\n    @Input() public borderColor?: string;\r\n    @Input() public data: Array<AvatarModel> = [];\r\n    @Input() public dropdownContents: 'all' | 'overflow' = 'all';\r\n\r\n    public overflow: Array<AvatarModel> = [];\r\n    public inflow: Array<AvatarModel> = [];\r\n\r\n    public overflowCountDisplay: string = '';\r\n    public overFlowBorderStyle: 'solid' | 'none' = 'none';\r\n\r\n    public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n\r\n    constructor() {}\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['maxCount']){\r\n            if (this.maxCount && this.data) {\r\n                this.overflow = [...this.data];\r\n                this.inflow = this.overflow.splice(0, this.maxCount);\r\n                console.log(this.overflow.length);\r\n                this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n                this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n            } else {\r\n                this.inflow = [...this.data];\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public onOverflowClicked() {\r\n        this.showDropdown = true;\r\n    }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n    <sds-avatar *ngFor=\"let avatar of inflow\"\r\n        [text]=\"avatar.text\"\r\n        [colorKey]=\"avatar.colorKey\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n        [showHint]=\"true\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n        [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <sds-avatar\r\n        *ngIf=\"overflow.length > 0\"\r\n        [id]=\"overflowElementUUID\"\r\n        class=\"overflow\"\r\n        [initialsText]=\"overflowCountDisplay\"\r\n        [borderColor]=\"borderColor\"\r\n        [borderStyle]=\"overFlowBorderStyle\"\r\n        cursor=\"pointer\"\r\n        [style.font-size.rem]=\"fontSize\"\r\n\r\n        placement=\"bottom\"\r\n        container=\"body\"\r\n        triggers=\"\"\r\n        (click)=\"onOverflowClicked()\"\r\n        >\r\n    </sds-avatar>\r\n\r\n    <dx-popover\r\n        target=\"#{{overflowElementUUID}}\"\r\n        [(visible)]=\"showDropdown\"\r\n        >\r\n        <dx-scroll-view\r\n            showScrollbar=\"always\">\r\n            <div class=\"overflow-avatars-container rounded\">\r\n                <div *ngFor=\"let avatar of (dropdownContents === 'all' ? data : overflow)\"\r\n                    class=\"d-flex align-items-center pl-1 py-1 pr-2 my-1 mr-1 overflow-avatar-container\" >\r\n                    <sds-avatar\r\n                        [text]=\"avatar.text\"\r\n                        [colorKey]=\"avatar.colorKey\"\r\n                        [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n                        [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n                        borderColor=\"transparent\"\r\n                        [style.font-size.rem]=\"1.8\"\r\n                    >\r\n                    </sds-avatar>\r\n                    <div class=\"ml-3\">{{avatar.text}}</div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </dx-popover>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n    SdsAvatarComponent,\r\n    SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'devextreme-angular';
@@ -186,13 +186,13 @@ class SdsDatePickerComponent {
         this.disabled = false;
         this.validationError = '';
         this.isValid = true;
-        this.fixedWidth = 280;
         this.disabledDates = [];
         this.applyText = 'close';
         this.cancelText = 'close';
         this.firstDayOfWeek = 1;
         this.dateRangeDefinitionsWidth = '10rem';
         this.showPreviousAndNextButtons = true;
+        this.width = '30rem';
         // public properties
         this.previousPeriodIcon = faAngleLeft;
         this.nextPeriodIcon = faAngleRight;
@@ -252,6 +252,19 @@ class SdsDatePickerComponent {
         if (changes['dateRangeDefinitions']) {
             this.generateDateRanges(true);
         }
+        if (changes['selectionKind']) {
+            if (this.selectionKind == 'single') {
+                const date = new Date(this.selectedDateInternal);
+                this.setDateRangeText(date, date);
+                this.matchDateRange(date, date);
+            }
+            else {
+                const date1 = new Date(this.selectedDateStart);
+                const date2 = new Date(this.selectedDateEnd);
+                this.setDateRangeText(date1, date2);
+                this.matchDateRange(date1, date2);
+            }
+        }
         if (changes['translations']) {
             this.customDateRange.name = ((_a = this.translations) === null || _a === void 0 ? void 0 : _a.custom)
                 ? this.translations.custom
@@ -262,7 +275,7 @@ class SdsDatePickerComponent {
             this.dateEndOld = this.selectedDateEnd;
         }
         if (changes['selectedDate']) {
-            const value = changes['selectedDate'].currentValue;
+            const value = new Date(changes['selectedDate'].currentValue);
             this.selectedDateInternal = startOfDay(value);
             if (this.selectionKind == 'single') {
                 this.dateStart = this.selectedDateInternal;
@@ -338,6 +351,20 @@ class SdsDatePickerComponent {
             this.generateDateRanges(true);
         }
     }
+    onKeydownHandler(event) {
+        if (this.showDatepicker) {
+            if (event.code === 'Escape') {
+                event.stopPropagation();
+                this.closeDatepickerPopup();
+            }
+            else if (event.code === 'Enter') {
+                event.stopPropagation();
+                if (!this.disabled) {
+                    this.applyPeriodPicker();
+                }
+            }
+        }
+    }
     get selectedDateStartFocus() {
         return this.selectedDateFocus;
     }
@@ -462,8 +489,8 @@ class SdsDatePickerComponent {
         this.isSelectedPredefinedPeriod = false;
         if (emitChange) {
             if (this.selectionKind == 'single') {
-                this.selectedDateChange.emit(this.selectedDateInternal);
                 this.selectedDate = new Date(this.selectedDateInternal);
+                this.selectedDateChange.emit(this.selectedDateInternal);
             }
             else {
                 const dateStartNew = new Date(this.selectedDateStart);
@@ -657,17 +684,12 @@ class SdsDatePickerComponent {
             this.dateRanges.push(this.customDateRange);
         }
     }
-    onKeyupHandler(event) {
-        if (event.keyCode === 27) {
-            this.closeDatepickerPopup();
-        }
-    }
 }
 SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
-SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", fixedWidth: "fixedWidth", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 \r\n                    dropdown-toggle\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-right-0 pr-2\"\r\n            [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0\"\r\n            [class.rounded-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n            [class.border-right] = \"!showPreviousAndNextButtons\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white border-top border-bottom px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                    (onValueChanged)=\"closeDatepickerPopup()\"\r\n                                >\r\n                                </dx-date-box>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary ml-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{width:-moz-fit-content;width:fit-content}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popover-arrow:after{background-color:#f8f9fa}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{background-color:#f8f9fa;padding:0}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right \r\n                    dropdown-toggle\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-right-0 pr-2\"\r\n            [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-left-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n            [class.border-right] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n        >\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\"\r\n                    (keydown)=\"onKeydownHandler($event)\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                    (onValueChanged)=\"closeDatepickerPopup()\"\r\n                                >\r\n                                </dx-date-box>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary ml-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 \r\n                    dropdown-toggle\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-right-0 pr-2\"\r\n            [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0\"\r\n            [class.rounded-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n            [class.border-right] = \"!showPreviousAndNextButtons\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white border-top border-bottom px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                    (onValueChanged)=\"closeDatepickerPopup()\"\r\n                                >\r\n                                </dx-date-box>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary ml-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{width:-moz-fit-content;width:fit-content}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popover-arrow:after{background-color:#f8f9fa}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{background-color:#f8f9fa;padding:0}\n"] }]
+            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right \r\n                    dropdown-toggle\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-right-0 pr-2\"\r\n            [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-left-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n            [class.border-right] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n        >\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\"\r\n                    (keydown)=\"onKeydownHandler($event)\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                    (onValueChanged)=\"closeDatepickerPopup()\"\r\n                                >\r\n                                </dx-date-box>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary ml-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
                 type: Input
             }], dateRangeDefinitions: [{
@@ -698,8 +720,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], isValid: [{
                 type: Input
-            }], fixedWidth: [{
-                type: Input
             }], disabledDates: [{
                 type: Input
             }], applyText: [{
@@ -714,6 +734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], showPreviousAndNextButtons: [{
                 type: Input
+            }], width: [{
+                type: Input
             }], singleDatePickerBox: [{
                 type: ViewChild,
                 args: ['singleDatePickerBox', { static: false }]
@@ -723,9 +745,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             }], calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
-            }], onKeyupHandler: [{
-                type: HostListener,
-                args: ['document:keyup', ['$event']]
             }] } });
 
 const components = [