@spicainternational/ngx-sds-components 2.22.7 → 2.22.8

package/esm2020/src/lib/modal/dialog/dialog.component.mjs

@@ -13,6 +13,7 @@ export class SdsDialogComponent {
         this.secondaryButtonClass = 'btn-secondary';
         this.showHeader = true;
         this.showCloseButton = true;
+        this.showPrimaryButton = true;
         this.showSecondaryButton = true;
     }
     ngOnInit() { }
@@ -47,10 +48,10 @@ export class SdsDialogComponent {
     }
 }
 SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showHeader: "showHeader", showCloseButton: "showCloseButton", showSecondaryButton: "showSecondaryButton" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>", styles: [""], components: [{ type: i1.SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "translations", "isScrollable"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            *ngIf=\"showPrimaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>\r\n", styles: [""], components: [{ type: i1.SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "translations", "isScrollable", "closeOnEscape"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>", styles: [""] }]
+            args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            *ngIf=\"showPrimaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>\r\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], closeText: [{
@@ -69,10 +70,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], showCloseButton: [{
                 type: Input
+            }], showPrimaryButton: [{
+                type: Input
             }], showSecondaryButton: [{
                 type: Input
             }], _modal: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFnQixLQUFLLEVBQTRDLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVVwSCxNQUFNLE9BQU8sa0JBQWtCO0lBb0IzQjtRQW5CZ0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQVksT0FBTyxDQUFDO1FBQzdCLFNBQUksR0FBOEIsSUFBSSxDQUFDO1FBRXZDLHNCQUFpQixHQUFXLElBQUksQ0FBQztRQUNqQyx3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFFdkMsdUJBQWtCLEdBQVcsYUFBYSxDQUFDO1FBQzNDLHlCQUFvQixHQUFXLGVBQWUsQ0FBQztRQUUvQyxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLHdCQUFtQixHQUFZLElBQUksQ0FBQztJQU9yQyxDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRVosSUFBSSxDQUFDLFFBQW1ELEVBQUUsSUFBVTtRQUN2RSxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUMxQixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUUxQixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDdEI7SUFDTCxDQUFDO0lBRU8sS0FBSztRQUNULElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN2QjtJQUNMLENBQUM7SUFFTSxnQkFBZ0I7UUFDbkIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNuRDtRQUNELElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sY0FBYztRQUNqQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ2pEO1FBQ0QsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFTSxZQUFZO1FBQ2YsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMvQztJQUNMLENBQUM7OytHQXpEUSxrQkFBa0I7bUdBQWxCLGtCQUFrQix5ZkNWL0Isb3pCQTBCWTsyRkRoQkMsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNJLFlBQVk7MEVBS04sS0FBSztzQkFBcEIsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBRVUsaUJBQWlCO3NCQUFoQyxLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFFVSxrQkFBa0I7c0JBQWpDLEtBQUs7Z0JBQ1Usb0JBQW9CO3NCQUFuQyxLQUFLO2dCQUVVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFDVSxtQkFBbUI7c0JBQWxDLEtBQUs7Z0JBRXdDLE1BQU07c0JBQW5ELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwuY29tcG9uZW50JztcclxuXHJcbnR5cGUgbW9kYWxCdXR0b24gPSAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdjbG9zZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWRpYWxvZycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0aXRsZTogc3RyaW5nID0gJyc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgY2xvc2VUZXh0Pzogc3RyaW5nID0gJ2Nsb3NlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuICAgIFxyXG4gICAgQElucHV0KCkgcHVibGljIHByaW1hcnlCdXR0b25UZXh0OiBzdHJpbmcgPSAnT2snO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNlY29uZGFyeUJ1dHRvblRleHQ6IHN0cmluZyA9ICdDYW5jZWwnO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBwcmltYXJ5QnV0dG9uQ2xhc3M6IHN0cmluZyA9ICdidG4tcHJpbWFyeSc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2Vjb25kYXJ5QnV0dG9uQ2xhc3M6IHN0cmluZyA9ICdidG4tc2Vjb25kYXJ5JzsgICAgXHJcbiAgICBcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93SGVhZGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dTZWNvbmRhcnlCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ21vZGFsJywgeyBzdGF0aWM6IHRydWUgfSkgcHJpdmF0ZSBfbW9kYWw6IFNkc01vZGFsQ29tcG9uZW50IHwgdW5kZWZpbmVkO1xyXG5cclxuICAgIHByaXZhdGUgX2NhbGxiYWNrPzogRnVuY3Rpb247XHJcbiAgICBwcml2YXRlIF9jYWxsYmFja0RhdGE6IGFueTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICAgIHB1YmxpYyBvcGVuKGNhbGxiYWNrPzogKGJ1dHRvbjogbW9kYWxCdXR0b24sIGRhdGE6IGFueSkgPT4gdm9pZCwgZGF0YT86IGFueSk6IHZvaWR7XHJcbiAgICAgICAgdGhpcy5fY2FsbGJhY2sgPSBjYWxsYmFjaztcclxuICAgICAgICB0aGlzLl9jYWxsYmFja0RhdGEgPSBkYXRhO1xyXG5cclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm9wZW4oKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBjbG9zZSgpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLmNsb3NlKCk7XHJcbiAgICAgICAgfSAgICAgICAgXHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uU2Vjb25kYXJ5Q2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdzZWNvbmRhcnknLCB0aGlzLl9jYWxsYmFja0RhdGEpO1xyXG4gICAgICAgIH1cclxuICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uUHJpbWFyeUNsaWNrKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9jYWxsYmFjaykge1xyXG4gICAgICAgICAgICB0aGlzLl9jYWxsYmFjaygncHJpbWFyeScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH0gICAgXHJcblxyXG4gICAgcHVibGljIG9uQ2xvc2VDbGljaygpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fY2FsbGJhY2spIHtcclxuICAgICAgICAgICAgdGhpcy5fY2FsbGJhY2soJ2Nsb3NlJywgdGhpcy5fY2FsbGJhY2tEYXRhKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG59XHJcblxyXG5cclxuXHJcbiIsIjxzZHMtbW9kYWxcclxuICAgICNtb2RhbFxyXG4gICAgW21vZGFsVGl0bGVdPVwidGl0bGVcIlxyXG4gICAgW3NpemVdPVwic2l6ZVwiXHJcbiAgICBbc2hvd0Nsb3NlQnV0dG9uXT1cInNob3dDbG9zZUJ1dHRvblwiXHJcbiAgICBbc2hvd0hlYWRlcl09XCJzaG93SGVhZGVyXCJcclxuICAgIFt0cmFuc2xhdGlvbnNdPVwieyBjbG9zZTogY2xvc2VUZXh0fVwiXHJcbiAgICAoY2xvc2VDbGljayk9XCJvbkNsb3NlQ2xpY2soKVwiXHJcbj5cclxuICAgIDxkaXY+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPG5nLWNvbnRhaW5lciAjZm9vdGVyIG5nUHJvamVjdEFzPSdmb290ZXInPlxyXG4gICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgKm5nSWY9XCJzaG93U2Vjb25kYXJ5QnV0dG9uXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxyXG4gICAgICAgICAgICBbY2xhc3NdPVwic2Vjb25kYXJ5QnV0dG9uQ2xhc3NcIlxyXG4gICAgICAgICAgICAoY2xpY2spPVwib25TZWNvbmRhcnlDbGljaygpXCJcclxuICAgICAgICA+e3tzZWNvbmRhcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuXCJcclxuICAgICAgICAgICAgW2NsYXNzXT1cInByaW1hcnlCdXR0b25DbGFzc1wiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJvblByaW1hcnlDbGljaygpXCJcclxuICAgICAgICA+e3twcmltYXJ5QnV0dG9uVGV4dH19PC9idXR0b24+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuPC9zZHMtbW9kYWw+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFnQixLQUFLLEVBQTRDLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVVwSCxNQUFNLE9BQU8sa0JBQWtCO0lBcUIzQjtRQXBCZ0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQVksT0FBTyxDQUFDO1FBQzdCLFNBQUksR0FBOEIsSUFBSSxDQUFDO1FBRXZDLHNCQUFpQixHQUFXLElBQUksQ0FBQztRQUNqQyx3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFFdkMsdUJBQWtCLEdBQVcsYUFBYSxDQUFDO1FBQzNDLHlCQUFvQixHQUFXLGVBQWUsQ0FBQztRQUUvQyxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLHNCQUFpQixHQUFZLElBQUksQ0FBQztRQUNsQyx3QkFBbUIsR0FBWSxJQUFJLENBQUM7SUFPckMsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVaLElBQUksQ0FBQyxRQUFtRCxFQUFFLElBQVU7UUFDdkUsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7UUFDMUIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFFMUIsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3RCO0lBQ0wsQ0FBQztJQUVPLEtBQUs7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDdkI7SUFDTCxDQUFDO0lBRU0sZ0JBQWdCO1FBQ25CLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDbkQ7UUFDRCxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVNLGNBQWM7UUFDakIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNqRDtRQUNELElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sWUFBWTtRQUNmLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDL0M7SUFDTCxDQUFDOzsrR0ExRFEsa0JBQWtCO21HQUFsQixrQkFBa0IsaWlCQ1YvQixtMkJBNEJBOzJGRGxCYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0ksWUFBWTswRUFLTixLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFFVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsbUJBQW1CO3NCQUFsQyxLQUFLO2dCQUVVLGtCQUFrQjtzQkFBakMsS0FBSztnQkFDVSxvQkFBb0I7c0JBQW5DLEtBQUs7Z0JBRVUsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxtQkFBbUI7c0JBQWxDLEtBQUs7Z0JBRXdDLE1BQU07c0JBQW5ELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwuY29tcG9uZW50JztcclxuXHJcbnR5cGUgbW9kYWxCdXR0b24gPSAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdjbG9zZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWRpYWxvZycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0aXRsZTogc3RyaW5nID0gJyc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgY2xvc2VUZXh0Pzogc3RyaW5nID0gJ2Nsb3NlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgcHJpbWFyeUJ1dHRvblRleHQ6IHN0cmluZyA9ICdPayc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2Vjb25kYXJ5QnV0dG9uVGV4dDogc3RyaW5nID0gJ0NhbmNlbCc7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHByaW1hcnlCdXR0b25DbGFzczogc3RyaW5nID0gJ2J0bi1wcmltYXJ5JztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzZWNvbmRhcnlCdXR0b25DbGFzczogc3RyaW5nID0gJ2J0bi1zZWNvbmRhcnknO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93SGVhZGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dQcmltYXJ5QnV0dG9uOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93U2Vjb25kYXJ5QnV0dG9uOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgX21vZGFsOiBTZHNNb2RhbENvbXBvbmVudCB8IHVuZGVmaW5lZDtcclxuXHJcbiAgICBwcml2YXRlIF9jYWxsYmFjaz86IEZ1bmN0aW9uO1xyXG4gICAgcHJpdmF0ZSBfY2FsbGJhY2tEYXRhOiBhbnk7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbihjYWxsYmFjaz86IChidXR0b246IG1vZGFsQnV0dG9uLCBkYXRhOiBhbnkpID0+IHZvaWQsIGRhdGE/OiBhbnkpOiB2b2lke1xyXG4gICAgICAgIHRoaXMuX2NhbGxiYWNrID0gY2FsbGJhY2s7XHJcbiAgICAgICAgdGhpcy5fY2FsbGJhY2tEYXRhID0gZGF0YTtcclxuXHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5vcGVuKCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgY2xvc2UoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5jbG9zZSgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25TZWNvbmRhcnlDbGljaygpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fY2FsbGJhY2spIHtcclxuICAgICAgICAgICAgdGhpcy5fY2FsbGJhY2soJ3NlY29uZGFyeScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25QcmltYXJ5Q2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdwcmltYXJ5JywgdGhpcy5fY2FsbGJhY2tEYXRhKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgdGhpcy5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkNsb3NlQ2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdjbG9zZScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxufVxyXG5cclxuXHJcblxyXG4iLCI8c2RzLW1vZGFsXHJcbiAgICAjbW9kYWxcclxuICAgIFttb2RhbFRpdGxlXT1cInRpdGxlXCJcclxuICAgIFtzaXplXT1cInNpemVcIlxyXG4gICAgW3Nob3dDbG9zZUJ1dHRvbl09XCJzaG93Q2xvc2VCdXR0b25cIlxyXG4gICAgW3Nob3dIZWFkZXJdPVwic2hvd0hlYWRlclwiXHJcbiAgICBbdHJhbnNsYXRpb25zXT1cInsgY2xvc2U6IGNsb3NlVGV4dH1cIlxyXG4gICAgKGNsb3NlQ2xpY2spPVwib25DbG9zZUNsaWNrKClcIlxyXG4+XHJcbiAgICA8ZGl2PlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxuZy1jb250YWluZXIgI2Zvb3RlciBuZ1Byb2plY3RBcz0nZm9vdGVyJz5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd1NlY29uZGFyeUJ1dHRvblwiXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuXCJcclxuICAgICAgICAgICAgW2NsYXNzXT1cInNlY29uZGFyeUJ1dHRvbkNsYXNzXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uU2Vjb25kYXJ5Q2xpY2soKVwiXHJcbiAgICAgICAgPnt7c2Vjb25kYXJ5QnV0dG9uVGV4dH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAqbmdJZj1cInNob3dQcmltYXJ5QnV0dG9uXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxyXG4gICAgICAgICAgICBbY2xhc3NdPVwicHJpbWFyeUJ1dHRvbkNsYXNzXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uUHJpbWFyeUNsaWNrKClcIlxyXG4gICAgICAgID57e3ByaW1hcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L3Nkcy1tb2RhbD5cclxuIl19

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

@@ -11,6 +11,7 @@ export class SdsModalComponent {
         this.size = 'md';
         this.showCloseButton = true;
         this.isScrollable = true;
+        this.closeOnEscape = false;
         this.modalOpen = new EventEmitter();
         this.modalClose = new EventEmitter();
         this.closeClick = new EventEmitter();
@@ -23,6 +24,7 @@ export class SdsModalComponent {
     open() {
         if (this._modal != undefined) {
             this._modal.nativeElement.style.display = 'block';
+            this._modal.nativeElement.focus();
             this.modalOpen.emit();
         }
     }
@@ -36,12 +38,30 @@ export class SdsModalComponent {
         this.closeClick.emit();
         this.close();
     }
+    // @HostListener('document:keydown.escape') onKeyDown() {
+    //     console.log(`${this.constructor.name}: got ESC`);
+    //     if (
+    //         this. closeOnEscape && 
+    //         this._modal != undefined && 
+    //         this._modal.nativeElement.style.display === 'block'){
+    //         this.close();
+    //     }
+    // }
+    onKeydown(event) {
+        if (event.code === 'Escape' &&
+            this.closeOnEscape &&
+            this._modal != undefined &&
+            this._modal.nativeElement.style.display === 'block') {
+            console.log(`${this.constructor.name} got event: ${event.code}`);
+            this.close();
+        }
+    }
 }
 SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton", translations: "translations", isScrollable: "isScrollable" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\r\n    <div\r\n        class=\"modal-dialog modal-dialog-centered\"\r\n        [class.modal-dialog-scrollable] = \"isScrollable\"\r\n        [id]=\"modalDialogId\"\r\n        [ngClass]=\"'modal-' + size\"\r\n        role=\"document\"\r\n    >\r\n        <div class=\"modal-content\">\r\n\r\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n                <ng-content select='header'></ng-content>\r\n            </div>             \r\n\r\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n                <button \r\n                    *ngIf=\"showCloseButton\"\r\n                    type=\"button\" \r\n                    class=\"close\" \r\n                    [title]=\"translations.close ?? ''\"\r\n                    (click)=\"onCloseButtonClick()\">\r\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n\r\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n            </div>            \r\n        </div>\r\n    </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n    <div\r\n        class=\"modal-dialog modal-dialog-centered\"\r\n        [class.modal-dialog-scrollable] = \"isScrollable\"\r\n        [id]=\"modalDialogId\"\r\n        [ngClass]=\"'modal-' + size\"\r\n        role=\"document\"\r\n        >\r\n        <div class=\"modal-content\">\r\n\r\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n                <ng-content select='header'></ng-content>\r\n            </div>             \r\n\r\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n                <button \r\n                    *ngIf=\"showCloseButton\"\r\n                    type=\"button\" \r\n                    class=\"close\" \r\n                    [title]=\"translations.close ?? ''\"\r\n                    (click)=\"onCloseButtonClick()\">\r\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n\r\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n            </div>            \r\n        </div>\r\n    </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\r\n    <div\r\n        class=\"modal-dialog modal-dialog-centered\"\r\n        [class.modal-dialog-scrollable] = \"isScrollable\"\r\n        [id]=\"modalDialogId\"\r\n        [ngClass]=\"'modal-' + size\"\r\n        role=\"document\"\r\n    >\r\n        <div class=\"modal-content\">\r\n\r\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n                <ng-content select='header'></ng-content>\r\n            </div>             \r\n\r\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n                <button \r\n                    *ngIf=\"showCloseButton\"\r\n                    type=\"button\" \r\n                    class=\"close\" \r\n                    [title]=\"translations.close ?? ''\"\r\n                    (click)=\"onCloseButtonClick()\">\r\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n\r\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n            </div>            \r\n        </div>\r\n    </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
+            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n    <div\r\n        class=\"modal-dialog modal-dialog-centered\"\r\n        [class.modal-dialog-scrollable] = \"isScrollable\"\r\n        [id]=\"modalDialogId\"\r\n        [ngClass]=\"'modal-' + size\"\r\n        role=\"document\"\r\n        >\r\n        <div class=\"modal-content\">\r\n\r\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n                <ng-content select='header'></ng-content>\r\n            </div>             \r\n\r\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n                <button \r\n                    *ngIf=\"showCloseButton\"\r\n                    type=\"button\" \r\n                    class=\"close\" \r\n                    [title]=\"translations.close ?? ''\"\r\n                    (click)=\"onCloseButtonClick()\">\r\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n\r\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n            </div>            \r\n        </div>\r\n    </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
                 type: ContentChild,
                 args: ['header']
@@ -61,6 +81,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], isScrollable: [{
                 type: Input
+            }], closeOnEscape: [{
+                type: Input
             }], modalOpen: [{
                 type: Output
             }], modalClose: [{
@@ -71,4 +93,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: ViewChild,
                 args: ['modal', { static: false }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxHQUNmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQVE3RCxNQUFNLE9BQU8saUJBQWlCO0lBdUIxQjtRQXRCd0Isa0JBQWEsR0FBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUdqRSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsU0FBSSxHQUE4QixJQUFJLENBQUM7UUFFdkMsb0JBQWUsR0FBWSxJQUFJLENBQUM7UUFHaEMsaUJBQVksR0FBRyxJQUFJLENBQUM7UUFFbkIsY0FBUyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3pELGVBQVUsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUxRCxlQUFVLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFcEUsY0FBUyxHQUFHLE9BQU8sQ0FBQztRQU12QixJQUFJLENBQUMsWUFBWSxHQUFHO1lBQ2hCLEtBQUssRUFBRSxTQUFTO1NBQ25CLENBQUE7SUFDTCxDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFWixJQUFJO1FBQ1AsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztZQUNsRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3pCO0lBQ0wsQ0FBQztJQUVNLEtBQUs7UUFDUixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1lBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDMUI7SUFDTCxDQUFDO0lBRU0sa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2pCLENBQUM7OzhHQWhEUSxpQkFBaUI7a0dBQWpCLGlCQUFpQix3akJDbEI5Qiw4MENBbUNNOzJGRGpCTyxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0ksV0FBVzswRUFLRyxhQUFhO3NCQUFwQyxZQUFZO3VCQUFDLFFBQVE7Z0JBRU4sVUFBVTtzQkFBekIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxhQUFhO3NCQUE1QixLQUFLO2dCQUNVLGVBQWU7c0JBQTlCLEtBQUs7Z0JBRVUsWUFBWTtzQkFBM0IsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUVXLFNBQVM7c0JBQXpCLE1BQU07Z0JBQ1UsVUFBVTtzQkFBMUIsTUFBTTtnQkFFVSxVQUFVO3NCQUExQixNQUFNO2dCQUl3QyxNQUFNO3NCQUFwRCxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRWxlbWVudFJlZixcclxuICAgIElucHV0LFxyXG4gICAgT25Jbml0LFxyXG4gICAgT3V0cHV0LFxyXG4gICAgVmlld0NoaWxkLFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgQ29udGVudENoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IE1vZGFsVHJhbnNsYXRpb25zIH0gZnJvbSAnLi9tb2RhbC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1vZGFsJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9tb2RhbC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTW9kYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgQENvbnRlbnRDaGlsZCgnaGVhZGVyJykgaGVhZGVyQ29udGVudDogRWxlbWVudFJlZiA9IHsgbmF0aXZlRWxlbWVudDogdW5kZWZpbmVkIH07XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIG1vZGFsVGl0bGU/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0hlYWRlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0Zvb3RlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyA9ICdtZCc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbW9kYWxEaWFsb2dJZD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0cmFuc2xhdGlvbnM6IE1vZGFsVHJhbnNsYXRpb25zO1xyXG4gICAgQElucHV0KCkgcHVibGljIGlzU2Nyb2xsYWJsZSA9IHRydWU7XHJcblxyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBtb2RhbE9wZW46IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgbW9kYWxDbG9zZTogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgY2xvc2VDbGljazogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ21vZGFsJywgeyBzdGF0aWM6IGZhbHNlIH0pIHByaXZhdGUgX21vZGFsOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkO1xyXG4gICAgXHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgdGhpcy50cmFuc2xhdGlvbnMgPSB7XHJcbiAgICAgICAgICAgIGNsb3NlOiB1bmRlZmluZWRcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICAgIHB1YmxpYyBvcGVuKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQpIHtcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJztcclxuICAgICAgICAgICAgdGhpcy5tb2RhbE9wZW4uZW1pdCgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgY2xvc2UoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5uYXRpdmVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XHJcbiAgICAgICAgICAgIHRoaXMubW9kYWxDbG9zZS5lbWl0KCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkNsb3NlQnV0dG9uQ2xpY2soKXtcclxuICAgICAgICB0aGlzLmNsb3NlQ2xpY2suZW1pdCgpO1xyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2ICNtb2RhbCBjbGFzcz1cIm1vZGFsXCI+XHJcbiAgICA8ZGl2XHJcbiAgICAgICAgY2xhc3M9XCJtb2RhbC1kaWFsb2cgbW9kYWwtZGlhbG9nLWNlbnRlcmVkXCJcclxuICAgICAgICBbY2xhc3MubW9kYWwtZGlhbG9nLXNjcm9sbGFibGVdID0gXCJpc1Njcm9sbGFibGVcIlxyXG4gICAgICAgIFtpZF09XCJtb2RhbERpYWxvZ0lkXCJcclxuICAgICAgICBbbmdDbGFzc109XCInbW9kYWwtJyArIHNpemVcIlxyXG4gICAgICAgIHJvbGU9XCJkb2N1bWVudFwiXHJcbiAgICA+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cclxuXHJcbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93SGVhZGVyICYmIGhlYWRlckNvbnRlbnRcIiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PSdoZWFkZXInPjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+ICAgICAgICAgICAgIFxyXG5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXIgJiYgIWhlYWRlckNvbnRlbnRcIiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxyXG4gICAgICAgICAgICAgICAgPGg1IGNsYXNzPVwibW9kYWwtdGl0bGVcIj57e21vZGFsVGl0bGV9fTwvaDU+XHJcbiAgICAgICAgICAgICAgICA8YnV0dG9uIFxyXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwic2hvd0Nsb3NlQnV0dG9uXCJcclxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJjbG9zZVwiIFxyXG4gICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCJ0cmFuc2xhdGlvbnMuY2xvc2UgPz8gJydcIlxyXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsb3NlQnV0dG9uQ2xpY2soKVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cImNsb3NlSWNvblwiPjwvZmEtaWNvbj5cclxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1ib2R5XCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dGb290ZXJcIiBjbGFzcz1cIm1vZGFsLWZvb3RlclwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZm9vdGVyXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICA8L2Rpdj4gICAgICAgICAgICBcclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxHQUVmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQVE3RCxNQUFNLE9BQU8saUJBQWlCO0lBd0IxQjtRQXZCd0Isa0JBQWEsR0FBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUdqRSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsU0FBSSxHQUE4QixJQUFJLENBQUM7UUFFdkMsb0JBQWUsR0FBWSxJQUFJLENBQUM7UUFHaEMsaUJBQVksR0FBRyxJQUFJLENBQUM7UUFDcEIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFFckIsY0FBUyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3pELGVBQVUsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUxRCxlQUFVLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFcEUsY0FBUyxHQUFHLE9BQU8sQ0FBQztRQU12QixJQUFJLENBQUMsWUFBWSxHQUFHO1lBQ2hCLEtBQUssRUFBRSxTQUFTO1NBQ25CLENBQUE7SUFDTCxDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFWixJQUFJO1FBQ1AsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztZQUNsRCxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNsQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3pCO0lBQ0wsQ0FBQztJQUVNLEtBQUs7UUFDUixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1lBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDMUI7SUFDTCxDQUFDO0lBRU0sa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRCx5REFBeUQ7SUFDekQsd0RBQXdEO0lBQ3hELFdBQVc7SUFDWCxrQ0FBa0M7SUFDbEMsdUNBQXVDO0lBQ3ZDLGdFQUFnRTtJQUNoRSx3QkFBd0I7SUFDeEIsUUFBUTtJQUNSLElBQUk7SUFFSixTQUFTLENBQUMsS0FBb0I7UUFDMUIsSUFDSSxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVE7WUFDdkIsSUFBSSxDQUFFLGFBQWE7WUFDbkIsSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTO1lBQ3hCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEtBQUssT0FBTyxFQUFDO1lBQ2hELE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksZUFBZSxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztZQUNqRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDcEI7SUFDTCxDQUFDOzs4R0F2RVEsaUJBQWlCO2tHQUFqQixpQkFBaUIsd2xCQ25COUIsaTRDQW1DTTsyRkRoQk8saUJBQWlCO2tCQUw3QixTQUFTOytCQUNJLFdBQVc7MEVBS0csYUFBYTtzQkFBcEMsWUFBWTt1QkFBQyxRQUFRO2dCQUVOLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUVVLFlBQVk7c0JBQTNCLEtBQUs7Z0JBQ1UsWUFBWTtzQkFBM0IsS0FBSztnQkFDVSxhQUFhO3NCQUE1QixLQUFLO2dCQUVXLFNBQVM7c0JBQXpCLE1BQU07Z0JBQ1UsVUFBVTtzQkFBMUIsTUFBTTtnQkFFVSxVQUFVO3NCQUExQixNQUFNO2dCQUl3QyxNQUFNO3NCQUFwRCxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRWxlbWVudFJlZixcclxuICAgIElucHV0LFxyXG4gICAgT25Jbml0LFxyXG4gICAgT3V0cHV0LFxyXG4gICAgVmlld0NoaWxkLFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgQ29udGVudENoaWxkLFxyXG4gICAgSG9zdExpc3RlbmVyLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IE1vZGFsVHJhbnNsYXRpb25zIH0gZnJvbSAnLi9tb2RhbC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1vZGFsJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9tb2RhbC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTW9kYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgQENvbnRlbnRDaGlsZCgnaGVhZGVyJykgaGVhZGVyQ29udGVudDogRWxlbWVudFJlZiA9IHsgbmF0aXZlRWxlbWVudDogdW5kZWZpbmVkIH07XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIG1vZGFsVGl0bGU/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0hlYWRlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0Zvb3RlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyA9ICdtZCc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbW9kYWxEaWFsb2dJZD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0cmFuc2xhdGlvbnM6IE1vZGFsVHJhbnNsYXRpb25zO1xyXG4gICAgQElucHV0KCkgcHVibGljIGlzU2Nyb2xsYWJsZSA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgY2xvc2VPbkVzY2FwZSA9IGZhbHNlO1xyXG5cclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgbW9kYWxPcGVuOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcbiAgICBAT3V0cHV0KCkgcHVibGljIG1vZGFsQ2xvc2U6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIGNsb3NlQ2xpY2s6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgICBwdWJsaWMgY2xvc2VJY29uID0gZmFYbWFyaztcclxuXHJcbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiBmYWxzZSB9KSBwcml2YXRlIF9tb2RhbDogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcclxuICAgIFxyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICAgIHRoaXMudHJhbnNsYXRpb25zID0ge1xyXG4gICAgICAgICAgICBjbG9zZTogdW5kZWZpbmVkXHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbigpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcclxuICAgICAgICAgICAgdGhpcy5tb2RhbE9wZW4uZW1pdCgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgY2xvc2UoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5uYXRpdmVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XHJcbiAgICAgICAgICAgIHRoaXMubW9kYWxDbG9zZS5lbWl0KCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkNsb3NlQnV0dG9uQ2xpY2soKXtcclxuICAgICAgICB0aGlzLmNsb3NlQ2xpY2suZW1pdCgpO1xyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH1cclxuXHJcbiAgICAvLyBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLmVzY2FwZScpIG9uS2V5RG93bigpIHtcclxuICAgIC8vICAgICBjb25zb2xlLmxvZyhgJHt0aGlzLmNvbnN0cnVjdG9yLm5hbWV9OiBnb3QgRVNDYCk7XHJcbiAgICAvLyAgICAgaWYgKFxyXG4gICAgLy8gICAgICAgICB0aGlzLiBjbG9zZU9uRXNjYXBlICYmIFxyXG4gICAgLy8gICAgICAgICB0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQgJiYgXHJcbiAgICAvLyAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9PT0gJ2Jsb2NrJyl7XHJcbiAgICAvLyAgICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIC8vICAgICB9XHJcbiAgICAvLyB9XHJcblxyXG4gICAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KXtcclxuICAgICAgICBpZiAoXHJcbiAgICAgICAgICAgIGV2ZW50LmNvZGUgPT09ICdFc2NhcGUnICYmXHJcbiAgICAgICAgICAgIHRoaXMuIGNsb3NlT25Fc2NhcGUgJiYgXHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCAmJiBcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID09PSAnYmxvY2snKXtcclxuICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKGAke3RoaXMuY29uc3RydWN0b3IubmFtZX0gZ290IGV2ZW50OiAke2V2ZW50LmNvZGV9YCk7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIC8vIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleXByZXNzJywgWyckZXZlbnQnXSlcclxuICAgIC8vIGhhbmRsZUtleWJvYXJkRXZlbnQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHsgXHJcbiAgICAvLyAgICAgaWYgKHRoaXMub3Blbikge1xyXG5cclxuICAgIC8vICAgICB9XHJcblxyXG4gICAgLy8gICAgIGNvbnNvbGUubG9nKGV2ZW50KTtcclxuICAgIC8vICAgLy90aGlzLmtleSA9IGV2ZW50LmtleTtcclxuICAgIC8vIH0gICAgXHJcblxyXG4gICAgLy8gcHVibGljIG9uS2V5UHJlc3MoZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcclxuICAgIC8vICAgICBjb25zb2xlLmxvZyhldmVudCk7XHJcbiAgICAvLyB9XHJcbn1cclxuIiwiPGRpdiAjbW9kYWwgY2xhc3M9XCJtb2RhbFwiIChrZXlkb3duKT1cIm9uS2V5ZG93bigkZXZlbnQpXCIgdGFiaW5kZXg9XCIxXCI+XHJcbiAgICA8ZGl2XHJcbiAgICAgICAgY2xhc3M9XCJtb2RhbC1kaWFsb2cgbW9kYWwtZGlhbG9nLWNlbnRlcmVkXCJcclxuICAgICAgICBbY2xhc3MubW9kYWwtZGlhbG9nLXNjcm9sbGFibGVdID0gXCJpc1Njcm9sbGFibGVcIlxyXG4gICAgICAgIFtpZF09XCJtb2RhbERpYWxvZ0lkXCJcclxuICAgICAgICBbbmdDbGFzc109XCInbW9kYWwtJyArIHNpemVcIlxyXG4gICAgICAgIHJvbGU9XCJkb2N1bWVudFwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+XHJcblxyXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0hlYWRlciAmJiBoZWFkZXJDb250ZW50XCIgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIj5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD0naGVhZGVyJz48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICAgICBcclxuXHJcbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93SGVhZGVyICYmICFoZWFkZXJDb250ZW50XCIgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIj5cclxuICAgICAgICAgICAgICAgIDxoNSBjbGFzcz1cIm1vZGFsLXRpdGxlXCI+e3ttb2RhbFRpdGxlfX08L2g1PlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiBcclxuICAgICAgICAgICAgICAgICAgICAqbmdJZj1cInNob3dDbG9zZUJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiIFxyXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiY2xvc2VcIiBcclxuICAgICAgICAgICAgICAgICAgICBbdGl0bGVdPVwidHJhbnNsYXRpb25zLmNsb3NlID8/ICcnXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbG9zZUJ1dHRvbkNsaWNrKClcIj5cclxuICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjbG9zZUljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93Rm9vdGVyXCIgY2xhc3M9XCJtb2RhbC1mb290ZXJcIj5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiPjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+ICAgICAgICAgICAgXHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19

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';
@@ -218,6 +218,30 @@ class SdsDatePickerComponent {
         this.singleDatePickerBox = undefined;
         this.selectedDateStartBox = undefined;
         this.calendar = undefined;
+        this._selectedDateRangeButton = undefined;
+        // @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent): boolean {
+        //     if (this.showDatepicker) {
+        //         if (event.code === 'Escape') {
+        //             console.log(`${this.constructor.name}: acting on event: ${event.code}`);
+        //             // event.stopPropagation();
+        //             // event.preventDefault();
+        //             this.showDatepicker = false;
+        //             event.stopImmediatePropagation();
+        //             return false;
+        //             // this.closeDatepickerPopup(false);
+        //         } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+        //             console.log(`${this.constructor.name}: acting on event: ${event.code}`);
+        //             // event.stopPropagation();
+        //             // event.preventDefault();
+        //             if (!this.disabled) {
+        //                 this.applyPeriodPicker();
+        //             }
+        //             event.stopImmediatePropagation();
+        //             return false;
+        //         } 
+        //     }
+        //     return true;
+        // }    
         this.randomIdReference = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
         this.dateRangeDefinitions = [];
         this.minDateDefault = new Date(1900, 1, 1);
@@ -341,21 +365,6 @@ class SdsDatePickerComponent {
             this.generateDateRanges(true);
         }
     }
-    onKeydownHandler(event) {
-        if (this.showDatepicker) {
-            if (event.code === 'Escape') {
-                event.stopPropagation();
-                this.showDatepicker = false;
-                // this.closeDatepickerPopup(false);
-            }
-            else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-                event.stopPropagation();
-                if (!this.disabled) {
-                    this.applyPeriodPicker();
-                }
-            }
-        }
-    }
     setDateRangeDefinitions(definitions) {
         this.dateRangeDefinitions = definitions;
         this.generateDateRanges(true);
@@ -506,6 +515,9 @@ class SdsDatePickerComponent {
             }
             // this.hidingConfirmedDate = false;
         }
+        if (this._selectedDateRangeButton) {
+            this._selectedDateRangeButton.nativeElement.focus({ focusVisible: false });
+        }
         // }
     }
     onHiddenCalendarPopover() {
@@ -745,12 +757,34 @@ class SdsDatePickerComponent {
             this.dateRanges.push(this.customDateRange);
         }
     }
+    onKeydown(event) {
+        console.log(`${this.constructor.name} got event: ${event.code}`);
+        if (this.showDatepicker) {
+            if (event.code === 'Escape') {
+                console.log(`${this.constructor.name}: acting on event: ${event.code}`);
+                // event.stopPropagation();
+                // event.preventDefault();
+                this.showDatepicker = false;
+                event.stopImmediatePropagation();
+                // this.closeDatepickerPopup(false);
+            }
+            else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+                console.log(`${this.constructor.name}: acting on event: ${event.code}`);
+                // event.stopPropagation();
+                // event.preventDefault();
+                if (!this.disabled) {
+                    this.applyPeriodPicker();
+                }
+                event.stopImmediatePropagation();
+            }
+        }
+    }
 }
 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", 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" }, host: { listeners: { "document:keydown": "onKeydownHandler($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        [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                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"pl-2 ml-1 mr-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \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                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \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 border-0\"\r\n                            [class.selected] = \"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 = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\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)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\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 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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\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)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\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}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\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 }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-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                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"pl-2 ml-1 mr-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \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                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \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 border-0\"\r\n                            [class.selected] = \"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            #selectedDateRangeButton\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 = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\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)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\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'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\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 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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\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)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\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 .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!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}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\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        [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                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"pl-2 ml-1 mr-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \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                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \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 border-0\"\r\n                            [class.selected] = \"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 = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\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)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\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 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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\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)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\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}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
+            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-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                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"pl-2 ml-1 mr-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \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                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \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 border-0\"\r\n                            [class.selected] = \"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            #selectedDateRangeButton\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 = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\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)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\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'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\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 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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\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)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\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 .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!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}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
                 type: Input
             }], dateRangeDefinitions: [{
@@ -806,9 +840,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             }], calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
-            }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
+            }], _selectedDateRangeButton: [{
+                type: ViewChild,
+                args: ['selectedDateRangeButton', { static: true }]
             }] } });
 
 const components = [