@spicainternational/ngx-sds-components 5.14.0 → 5.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/date-picker/date-picker.component.mjs +5 -5
- package/esm2020/src/lib/expansion-panel/expansion-panel.component.mjs +7 -3
- package/esm2020/src/lib/message/message.component.mjs +3 -3
- package/esm2020/src/lib/modal/modal.component.mjs +3 -3
- package/esm2020/src/lib/tooltip/components/tooltip.component.mjs +2 -2
- package/esm2020/src/lib/tooltip/tooltip.types.mjs +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +4 -4
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +6 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +4 -4
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +6 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-message.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-message.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/date-picker/date-picker.component.d.ts +1 -1
- package/src/lib/expansion-panel/expansion-panel.component.d.ts +3 -1
- package/src/lib/tooltip/tooltip.types.d.ts +1 -1
|
@@ -36,10 +36,10 @@ export class SdsExpansionPanelComponent {
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(
|
|
39
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
|
-
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(
|
|
42
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
43
43
|
}], propDecorators: { headerText: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], hideHeader: [{
|
|
@@ -58,5 +58,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
58
58
|
type: Input
|
|
59
59
|
}], isOpenChange: [{
|
|
60
60
|
type: Output
|
|
61
|
+
}], expandPanelText: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], collapsePanelText: [{
|
|
64
|
+
type: Input
|
|
61
65
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFlLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFjaEYsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVdhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFLNUQsY0FBUyxHQUFtQixhQUFhLENBQUM7S0FjcEQ7SUFaVSxtQkFBbUIsQ0FBQyxLQUFpQjtRQUN4QyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUN2QztJQUNMLENBQUM7O3VIQW5EUSwwQkFBMEI7MkdBQTFCLDBCQUEwQixnYUNyQnZDLGtrREFpREE7MkZENUJhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxjQUFjO3NCQUF0QixLQUFLO2dCQVFHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBVUcsZUFBZTtzQkFBdkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFFRSxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENvbXBvbmVudCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIElucHV0LFxyXG4gICAgT3V0cHV0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYUNoZXZyb25Eb3duLCBmYUNoZXZyb25VcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xyXG5pbXBvcnQge1xyXG4gICAgSWNvbkRlZmluaXRpb24sXHJcbiAgICBmYUNhcmV0RG93bixcclxuICAgIGZhQ2FyZXRVcCxcclxufSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IENhcmV0UGxhY2VtZW50IH0gZnJvbSAnLi9leHBhbnNpb24tcGFuZWwudHlwZXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy1leHBhbnNpb24tcGFuZWwnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnQge1xyXG4gICAgQElucHV0KCkgaGVhZGVyVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGhpZGVIZWFkZXI/OiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgaGVhZGVySWQ/OiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KCkgYW5pbWF0ZUNhcmV0ID0gZmFsc2U7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiB0b2dnbGVzIGdyZXlpc2ggYmFja2dyb3VuZFxyXG4gICAgICpcclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBzaG93QmFja2dyb3VuZCA9IHRydWU7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBwb3NpdGlvbiBjYXJldCBuZXh0IHRvIGhlYWRlciBvZiBvbiB0aGUgZmFyIGVuZCBvZiB0aGUgY29tcG9uZW50XHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUgeygnbmV4dFRvSGVhZGVyJyB8ICdmYXJFbmQnKX1cclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBjYXJldFBsYWNlbWVudDogQ2FyZXRQbGFjZW1lbnQgPSAnbmV4dFRvSGVhZGVyJztcclxuXHJcbiAgICAvKipcclxuICAgICAqICdkZXNjcmlwdGlvblRleHQnIC0gdGV4dCBkaXNwbGF5ZWQgd2hlbiBjb21wb25lbnQgaXMgXCJjbG9zZWRcIi5cclxuICAgICAqXHJcbiAgICAgKiBOb3RlOiBVc2UgbmctY29udGVudCAnY29udGVudE9uQ2xvc2VkJyBpZiBtb3JlIGNvbXBsZXggdXNlLWNhc2UgaXMgbmVlZGVkXHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUge3N0cmluZ31cclxuICAgICAqIEBtZW1iZXJvZiBFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBkZXNjcmlwdGlvblRleHQ/OiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KCkgaXNPcGVuOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBAT3V0cHV0KCkgaXNPcGVuQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQElucHV0KCkgZXhwYW5kUGFuZWxUZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgY29sbGFwc2VQYW5lbFRleHQ/OiBzdHJpbmc7XHJcblxyXG4gICAgcHVibGljIGNhcmV0SWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNoZXZyb25Eb3duO1xyXG5cclxuICAgIHB1YmxpYyBvblRvZ2dsZUlzT3BlbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9wZW5QYW5lbCgpIHtcclxuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XHJcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXZcclxuICAgIGNsYXNzPVwicm91bmRlZCBleHBhbnNpb24tcGFuZWxcIlxyXG4gICAgW2NsYXNzLmJhY2tncm91bmRdPVwic2hvd0JhY2tncm91bmRcIlxyXG4gICAgW2NsYXNzLmNsb3NlZF09XCIhaXNPcGVuXCJcclxuICAgIChjbGljayk9XCJvcGVuUGFuZWwoKVwiXHJcbj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaGlkZUhlYWRlclwiPlxyXG4gICAgICAgIDxkaXZcclxuICAgICAgICAgICAgY2xhc3M9XCJleHBhbnNpb24tcGFuZWwtaGVhZGVyIGQtZmxleCBmbGV4LXJvdyBhbGlnaC1pdGVtcy1jZW50ZXJcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tbGlua1wiXHJcbiAgICAgICAgICAgICAgICBbaWRdPVwiaGVhZGVySWRcIlxyXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uVG9nZ2xlSXNPcGVuQ2xpY2soJGV2ZW50KVwiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiaGVhZGVyLXRleHRcIj5cclxuICAgICAgICAgICAgICAgICAgICB7eyBoZWFkZXJUZXh0IH19XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rIGNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5yb3RhdGVdPVwiYW5pbWF0ZUNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tcy0yXT1cImNhcmV0UGxhY2VtZW50ID09PSAnbmV4dFRvSGVhZGVyJ1wiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MubXMtYXV0b109XCJjYXJldFBsYWNlbWVudCA9PT0gJ2ZhckVuZCdcIlxyXG4gICAgICAgICAgICAgICAgW3RpdGxlXT1cImlzT3BlbiA/IGNvbGxhcHNlUGFuZWxUZXh0ID8/ICcnIDogZXhwYW5kUGFuZWxUZXh0ID8/ICcnXCJcclxuICAgICAgICAgICAgICAgIChjbGljayk9XCJvblRvZ2dsZUlzT3BlbkNsaWNrKCRldmVudClcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjYXJldEljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICAqbmdJZj1cIiFpc09wZW5cIlxyXG4gICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIHt7IGRlc2NyaXB0aW9uVGV4dCB9fVxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjb250ZW50T25DbG9zZWRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICAqbmdJZj1cImlzT3BlblwiXHJcbiAgICAgICAgY2xhc3M9XCJtdC0xXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -19,10 +19,10 @@ export class SdsMessageComponent {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
SdsMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
-
SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl" }, outputs: { close: "close" }, ngImport: i0, template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 bg-gray-300 d-flex rounded\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"
|
|
22
|
+
SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl" }, outputs: { close: "close" }, ngImport: i0, template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 bg-gray-300 d-flex rounded\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div class=\"\">\r\n <span>\r\n {{text}}\r\n </span>\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n class=\"close rounded ml-2\" \r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n <fa-icon \r\n [icon]=\"['far', 'times']\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsMessageComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ selector: 'sds-message', template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 bg-gray-300 d-flex rounded\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"
|
|
25
|
+
args: [{ selector: 'sds-message', template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 bg-gray-300 d-flex rounded\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div class=\"\">\r\n <span>\r\n {{text}}\r\n </span>\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n class=\"close rounded ml-2\" \r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n <fa-icon \r\n [icon]=\"['far', 'times']\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [""] }]
|
|
26
26
|
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
|
|
27
27
|
type: Input
|
|
28
28
|
}], text: [{
|
|
@@ -38,4 +38,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
38
38
|
}], learnMoreLinkUrl: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRL0UsTUFBTSxPQUFPLG1CQUFtQjtJQWM1QjtRQVhnQixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLG9CQUFlLEdBQVksS0FBSyxDQUFDO1FBRWhDLFVBQUssR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVoRCxzQkFBaUIsR0FBWSxLQUFLLENBQUM7UUFDbkMsc0JBQWlCLEdBQVcsWUFBWSxDQUFDO1FBQ3pDLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUV2QyxnQkFBVyxHQUFZLElBQUksQ0FBQztJQUVwQixDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRVosa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Z0hBckJRLG1CQUFtQjtvR0FBbkIsbUJBQW1CLGtSQ1JoQyw4bUNBNkNBOzJGRHJDYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0ksYUFBYTswRUFNUCxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFFVyxLQUFLO3NCQUFyQixNQUFNO2dCQUVTLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1lc3NhZ2UnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbWVzc2FnZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGljb24/
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRL0UsTUFBTSxPQUFPLG1CQUFtQjtJQWM1QjtRQVhnQixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLG9CQUFlLEdBQVksS0FBSyxDQUFDO1FBRWhDLFVBQUssR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVoRCxzQkFBaUIsR0FBWSxLQUFLLENBQUM7UUFDbkMsc0JBQWlCLEdBQVcsWUFBWSxDQUFDO1FBQ3pDLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUV2QyxnQkFBVyxHQUFZLElBQUksQ0FBQztJQUVwQixDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRVosa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Z0hBckJRLG1CQUFtQjtvR0FBbkIsbUJBQW1CLGtSQ1JoQyw4bUNBNkNBOzJGRHJDYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0ksYUFBYTswRUFNUCxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFFVyxLQUFLO3NCQUFyQixNQUFNO2dCQUVTLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1lc3NhZ2UnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbWVzc2FnZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGljb24/OiBJY29uUHJvcDtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0ZXh0OiBzdHJpbmcgPSAnJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIGNsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dMZWFybk1vcmVMaW5rOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbGVhcm5Nb3JlTGlua1RleHQ6IHN0cmluZyA9ICdMZWFybiBtb3JlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBsZWFybk1vcmVMaW5rVXJsOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgICBwdWJsaWMgc2hvd01lc3NhZ2U6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG4gICAgcHVibGljIG9uQ2xvc2VCdXR0b25DbGljaygpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNob3dNZXNzYWdlID0gZmFsc2U7XHJcbiAgICAgICAgdGhpcy5jbG9zZS5lbWl0KCk7XHJcbiAgICB9XHJcblxyXG59XHJcbiIsIjxkaXYgXHJcbiAgICAqbmdJZj1cInNob3dNZXNzYWdlXCJcclxuICAgIGNsYXNzPVwicHgtMyBweS0yIGJnLWdyYXktMzAwIGQtZmxleCByb3VuZGVkXCJcclxuICAgID5cclxuXHJcbiAgICA8ZmEtaWNvbiBcclxuICAgICAgICAqbmdJZj1cImljb25cIlxyXG4gICAgICAgIFtpY29uXT1cImljb25cIlxyXG4gICAgICAgIGNsYXNzPVwibWUtMlwiXHJcbiAgICAgICAgPlxyXG4gICAgPC9mYS1pY29uPlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJmbGV4LWdyb3ctMVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJcIj5cclxuICAgICAgICAgICAgPHNwYW4+XHJcbiAgICAgICAgICAgICAgICB7e3RleHR9fVxyXG4gICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDxzcGFuIFxyXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJzaG93TGVhcm5Nb3JlTGlua1wiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxhIFxyXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiXCJcclxuICAgICAgICAgICAgICAgICAgICBbaHJlZl09XCJsZWFybk1vcmVMaW5rVXJsXCJcclxuICAgICAgICAgICAgICAgICAgICB0YXJnZXQ9XCJfbGVhcm5tb3JlXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAge3tsZWFybk1vcmVMaW5rVGV4dH19XHJcbiAgICAgICAgICAgICAgICA8L2E+XHJcbiAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgKm5nSWY9XCJzaG93Q2xvc2VCdXR0b25cIj5cclxuICAgICAgICA8YnV0dG9uIFxyXG4gICAgICAgICAgICBjbGFzcz1cImNsb3NlIHJvdW5kZWQgbWwtMlwiIFxyXG4gICAgICAgICAgICAoY2xpY2spPVwib25DbG9zZUJ1dHRvbkNsaWNrKClcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgIDxmYS1pY29uIFxyXG4gICAgICAgICAgICAgICAgW2ljb25dPVwiWydmYXInLCAndGltZXMnXVwiXHJcbiAgICAgICAgICAgICAgICBzaXplPVwieHNcIlxyXG4gICAgICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICA8L2ZhLWljb24+XHJcbiAgICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -56,10 +56,10 @@ export class SdsModalComponent {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
-
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", autoFocusCloseButton: "autoFocusCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick", closeEscapeKeypress: "closeEscapeKeypress" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "_closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.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 #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\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 .modal-header button.btn-close:hover{background-color:#e9ecef}.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}@media (min-width: 820px){.modal-820{max-width:820px}}\n"], directives: [{ type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
59
|
+
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", autoFocusCloseButton: "autoFocusCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick", closeEscapeKeypress: "closeEscapeKeypress" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "_closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.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 \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\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 .modal-header button.btn-close:hover{background-color:#e9ecef}.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}@media (min-width: 820px){.modal-820{max-width:820px}}\n"], directives: [{ type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
|
-
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.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 #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\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 .modal-header button.btn-close:hover{background-color:#e9ecef}.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}@media (min-width: 820px){.modal-820{max-width:820px}}\n"] }]
|
|
62
|
+
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.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 \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\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 .modal-header button.btn-close:hover{background-color:#e9ecef}.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}@media (min-width: 820px){.modal-820{max-width:820px}}\n"] }]
|
|
63
63
|
}], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
|
|
64
64
|
type: ContentChild,
|
|
65
65
|
args: ['header']
|
|
@@ -98,4 +98,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
98
98
|
type: ViewChild,
|
|
99
99
|
args: ['closeButton', { static: false }]
|
|
100
100
|
}] } });
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
101
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxFQUNmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQVE3RCxNQUFNLE9BQU8saUJBQWlCO0lBNkIxQjtRQTVCd0Isa0JBQWEsR0FBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUdqRSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsU0FBSSxHQUFzQyxJQUFJLENBQUM7UUFFL0Msb0JBQWUsR0FBWSxJQUFJLENBQUM7UUFDaEMseUJBQW9CLEdBQVksS0FBSyxDQUFDO1FBR3RDLGlCQUFZLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBRXJCLGNBQVMsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUN6RCxlQUFVLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFMUQsZUFBVSxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQzFELHdCQUFtQixHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRTdFLGNBQVMsR0FBRyxPQUFPLENBQUM7UUFFcEIsV0FBTSxHQUFZLEtBQUssQ0FBQztRQU8zQixJQUFJLENBQUMsWUFBWSxHQUFHO1lBQ2hCLEtBQUssRUFBRSxTQUFTO1NBQ25CLENBQUE7SUFDTCxDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFWixJQUFJO1FBQ1AsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztZQUNsRCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztZQUNuQixJQUFHLElBQUksQ0FBQyxvQkFBb0I7Z0JBQ3hCLElBQUksQ0FBQyxZQUFZLEVBQUUsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQzdDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDekI7SUFDTCxDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7WUFDakQsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7WUFDcEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMxQjtJQUNMLENBQUM7SUFFTSxrQkFBa0I7UUFDckIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFvQjtRQUMxQixJQUNJLEtBQUssQ0FBQyxJQUFJLEtBQUssUUFBUTtZQUN2QixJQUFJLENBQUMsYUFBYTtZQUNsQixJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVM7WUFDeEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sS0FBSyxPQUFPLEVBQUM7WUFDaEQsb0VBQW9FO1lBQ3BFLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDcEI7SUFDTCxDQUFDOzs4R0F0RVEsaUJBQWlCO2tHQUFqQixpQkFBaUIsZ3hCQ2xCOUIsK2xEQTBDTTsyRkR4Qk8saUJBQWlCO2tCQUw3QixTQUFTOytCQUNJLFdBQVc7MEVBS0csYUFBYTtzQkFBcEMsWUFBWTt1QkFBQyxRQUFRO2dCQUVOLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLG9CQUFvQjtzQkFBbkMsS0FBSztnQkFFVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLFlBQVk7c0JBQTNCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFFVyxTQUFTO3NCQUF6QixNQUFNO2dCQUNVLFVBQVU7c0JBQTFCLE1BQU07Z0JBRVUsVUFBVTtzQkFBMUIsTUFBTTtnQkFDVSxtQkFBbUI7c0JBQW5DLE1BQU07Z0JBTXdDLE1BQU07c0JBQXBELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFDZ0IsWUFBWTtzQkFBaEUsU0FBUzt1QkFBQyxhQUFhLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENvbXBvbmVudCxcclxuICAgIEVsZW1lbnRSZWYsXHJcbiAgICBJbnB1dCxcclxuICAgIE9uSW5pdCxcclxuICAgIE91dHB1dCxcclxuICAgIFZpZXdDaGlsZCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIENvbnRlbnRDaGlsZFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IE1vZGFsVHJhbnNsYXRpb25zIH0gZnJvbSAnLi9tb2RhbC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1vZGFsJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9tb2RhbC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTW9kYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgQENvbnRlbnRDaGlsZCgnaGVhZGVyJykgaGVhZGVyQ29udGVudDogRWxlbWVudFJlZiA9IHsgbmF0aXZlRWxlbWVudDogdW5kZWZpbmVkIH07XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIG1vZGFsVGl0bGU/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0hlYWRlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0Zvb3RlcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyB8ICc4MjAnID0gJ21kJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtb2RhbERpYWxvZ0lkPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dDbG9zZUJ1dHRvbjogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgYXV0b0ZvY3VzQ2xvc2VCdXR0b246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgdHJhbnNsYXRpb25zOiBNb2RhbFRyYW5zbGF0aW9ucztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBpc1Njcm9sbGFibGUgPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGNsb3NlT25Fc2NhcGUgPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIG1vZGFsT3BlbjogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBtb2RhbENsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcblxyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBjbG9zZUNsaWNrOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcbiAgICBAT3V0cHV0KCkgcHVibGljIGNsb3NlRXNjYXBlS2V5cHJlc3M6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgICBwdWJsaWMgY2xvc2VJY29uID0gZmFYbWFyaztcclxuXHJcbiAgICBwdWJsaWMgaXNPcGVuOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gICAgQFZpZXdDaGlsZCgnbW9kYWwnLCB7IHN0YXRpYzogZmFsc2UgfSkgcHJpdmF0ZSBfbW9kYWw6IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQ7XHJcbiAgICBAVmlld0NoaWxkKCdjbG9zZUJ1dHRvbicsIHsgc3RhdGljOiBmYWxzZSB9KSBwcml2YXRlIF9jbG9zZUJ1dHRvbjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcclxuICAgIFxyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICAgIHRoaXMudHJhbnNsYXRpb25zID0ge1xyXG4gICAgICAgICAgICBjbG9zZTogdW5kZWZpbmVkXHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbigpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XHJcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcclxuICAgICAgICAgICAgaWYodGhpcy5hdXRvRm9jdXNDbG9zZUJ1dHRvbilcclxuICAgICAgICAgICAgICAgIHRoaXMuX2Nsb3NlQnV0dG9uPy5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgICAgICAgICAgIHRoaXMubW9kYWxPcGVuLmVtaXQoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGNsb3NlKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQpIHtcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnO1xyXG4gICAgICAgICAgICB0aGlzLmlzT3BlbiA9IGZhbHNlO1xyXG4gICAgICAgICAgICB0aGlzLm1vZGFsQ2xvc2UuZW1pdCgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25DbG9zZUJ1dHRvbkNsaWNrKCl7XHJcbiAgICAgICAgdGhpcy5jbG9zZUNsaWNrLmVtaXQoKTtcclxuICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KXtcclxuICAgICAgICBpZiAoXHJcbiAgICAgICAgICAgIGV2ZW50LmNvZGUgPT09ICdFc2NhcGUnICYmXHJcbiAgICAgICAgICAgIHRoaXMuY2xvc2VPbkVzY2FwZSAmJiBcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkICYmIFxyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5uYXRpdmVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPT09ICdibG9jaycpe1xyXG4gICAgICAgICAgICAgICAgLy8gY29uc29sZS5sb2coYCR7dGhpcy5jb25zdHJ1Y3Rvci5uYW1lfSBnb3QgZXZlbnQ6ICR7ZXZlbnQuY29kZX1gKTtcclxuICAgICAgICAgICAgICAgIHRoaXMuY2xvc2VFc2NhcGVLZXlwcmVzcy5lbWl0KCk7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXYgI21vZGFsIGNsYXNzPVwibW9kYWxcIiAoa2V5ZG93bik9XCJvbktleWRvd24oJGV2ZW50KVwiIFtjZGtUcmFwRm9jdXNdPVwiaXNPcGVuXCIgW2Nka1RyYXBGb2N1c0F1dG9DYXB0dXJlXT1cInRydWVcIiA+XHJcbiAgICA8ZGl2XHJcbiAgICAgICAgY2xhc3M9XCJtb2RhbC1kaWFsb2cgbW9kYWwtZGlhbG9nLWNlbnRlcmVkXCJcclxuICAgICAgICBbY2xhc3MubW9kYWwtZGlhbG9nLXNjcm9sbGFibGVdID0gXCJpc1Njcm9sbGFibGVcIlxyXG4gICAgICAgIFthdHRyLmlkXT1cIm1vZGFsRGlhbG9nSWRcIlxyXG4gICAgICAgIFtuZ0NsYXNzXT1cIidtb2RhbC0nICsgc2l6ZVwiXHJcbiAgICAgICAgcm9sZT1cImRvY3VtZW50XCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cclxuXHJcbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93SGVhZGVyICYmIGhlYWRlckNvbnRlbnRcIiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PSdoZWFkZXInPjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+ICAgICAgICAgICAgIFxyXG5cclxuICAgICAgICAgICAgPGRpdiBcclxuICAgICAgICAgICAgICAgICpuZ0lmPVwic2hvd0hlYWRlciAmJiAhaGVhZGVyQ29udGVudFwiIFxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIlxyXG4gICAgICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGg1IGNsYXNzPVwibW9kYWwtdGl0bGVcIj57e21vZGFsVGl0bGV9fTwvaDU+XHJcbiAgICAgICAgICAgICAgICA8YnV0dG9uIFxyXG4gICAgICAgICAgICAgICAgICAgICNjbG9zZUJ1dHRvblxyXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwic2hvd0Nsb3NlQnV0dG9uXCJcclxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJidG4tY2xvc2VcIiBcclxuICAgICAgICAgICAgICAgICAgICBbdGl0bGVdPVwidHJhbnNsYXRpb25zLmNsb3NlID8/ICcnXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbG9zZUJ1dHRvbkNsaWNrKClcIj5cclxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICAgIDxkaXYgXHJcbiAgICAgICAgICAgICAgICBjbGFzcz1cIm1vZGFsLWJvZHlcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLnB0LTBdPVwic2hvd0hlYWRlclwiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MucGItMF09XCJzaG93Rm9vdGVyXCJcclxuICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0Zvb3RlclwiIGNsYXNzPVwibW9kYWwtZm9vdGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJmb290ZXJcIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICAgIFxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -14,9 +14,9 @@ export class SdsTooltipComponent {
|
|
|
14
14
|
ngOnInit() { }
|
|
15
15
|
}
|
|
16
16
|
SdsTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
SdsTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTooltipComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n *ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip
|
|
17
|
+
SdsTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTooltipComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n *ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-classic{background-color:#fff;color:#000;border:1px solid gray}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-dynamic{margin-left:20px}\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"] }] });
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ template: "<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n *ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip
|
|
20
|
+
args: [{ template: "<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n *ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-classic{background-color:#fff;color:#000;border:1px solid gray}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-dynamic{margin-left:20px}\n"] }]
|
|
21
21
|
}], ctorParameters: function () { return []; } });
|
|
22
22
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90b29sdGlwL2NvbXBvbmVudHMvdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90b29sdGlwL2NvbXBvbmVudHMvdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBUWxELE1BQU0sT0FBTyxtQkFBbUI7SUFlNUI7UUFiTyxZQUFPLEdBQVcsRUFBRSxDQUFDO1FBQ3JCLFNBQUksR0FBVyxDQUFDLENBQUM7UUFDakIsUUFBRyxHQUFXLENBQUMsQ0FBQztRQUNoQixZQUFPLEdBQVksS0FBSyxDQUFDO1FBS3pCLGFBQVEsR0FBb0IsT0FBTyxDQUFDO1FBQ3BDLFVBQUssR0FBaUIsTUFBTSxDQUFDO0lBSXJCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7O2dIQWpCVixtQkFBbUI7b0dBQW5CLG1CQUFtQixvRENSaEMsb2RBZ0JBOzJGRFJhLG1CQUFtQjtrQkFKL0IsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFRvb2x0aXBQb3NpdGlvbiwgVG9vbHRpcFRoZW1lIH0gZnJvbSAnLi4vdG9vbHRpcC50eXBlcyc7XHJcbmltcG9ydCB7IEljb25Qcm9wIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzVG9vbHRpcENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgcHVibGljIHRvb2x0aXA6IHN0cmluZyA9ICcnO1xyXG4gICAgcHVibGljIGxlZnQ6IG51bWJlciA9IDA7XHJcbiAgICBwdWJsaWMgdG9wOiBudW1iZXIgPSAwO1xyXG4gICAgcHVibGljIHZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBwdWJsaWMgdG9vbHRpcEljb24/OiBJY29uUHJvcDtcclxuICAgIHB1YmxpYyB0b29sdGlwQ2xhc3M/OiBzdHJpbmc7XHJcblxyXG4gICAgcHVibGljIHBvc2l0aW9uOiBUb29sdGlwUG9zaXRpb24gPSAnYWJvdmUnO1xyXG4gICAgcHVibGljIHRoZW1lOiBUb29sdGlwVGhlbWUgPSAnZGFyayc7XHJcblxyXG5cclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJzZHMtdG9vbHRpcFwiXHJcbiAgICBbbmdDbGFzc109XCJbJ3Nkcy10b29sdGlwLScgKyBwb3NpdGlvbiwgJ3Nkcy10b29sdGlwLScgKyB0aGVtZSwgdG9vbHRpcENsYXNzXVwiXHJcbiAgICBbY2xhc3Muc2RzLXRvb2x0aXAtdmlzaWJsZV09XCJ2aXNpYmxlXCJcclxuICAgIFtzdHlsZS5sZWZ0LnB4XT1cImxlZnRcIlxyXG4gICAgW3N0eWxlLnRvcC5weF09XCJ0b3BcIlxyXG4gICAgPlxyXG4gICAgPGZhLWljb24gY2xhc3M9XCJzZHMtdG9vbHRpcC1pY29uXCJcclxuICAgICAgICAqbmdJZj1cInRvb2x0aXBJY29uXCIgXHJcbiAgICAgICAgW2ljb25dPVwidG9vbHRpcEljb25cIj5cclxuICAgIDwvZmEtaWNvbj5cclxuXHJcbiAgICA8c21hbGwgY2xhc3M9XCJzZHMtdG9vbHRpcC10ZXh0XCI+XHJcbiAgICAgICAge3sgdG9vbHRpcCB9fVxyXG4gICAgPC9zbWFsbD5cclxuXHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC50eXBlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3Rvb2x0aXAvdG9vbHRpcC50eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgVG9vbHRpcFBvc2l0aW9uID0gJ2Fib3ZlJyB8ICdiZWxvdycgfCAnbGVmdCcgfCAncmlnaHQnIHwgJ2R5bmFtaWMnO1xyXG5cclxuZXhwb3J0IHR5cGUgVG9vbHRpcFRoZW1lID0gJ2RhcmsnIHwgJ2xpZ2h0JyB8ICdkYW5nZXInIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnIHwgJ2luZm8nIHwgJ2NsYXNzaWMnO1xyXG4iXX0=
|
|
@@ -643,10 +643,10 @@ class SdsDatePickerComponent {
|
|
|
643
643
|
}
|
|
644
644
|
else {
|
|
645
645
|
if (isSameDay(calendarDate, selectedDateStartAsDate)) {
|
|
646
|
-
css += ' bg-primary text-white rounded-
|
|
646
|
+
css += ' bg-primary text-white rounded-start';
|
|
647
647
|
}
|
|
648
648
|
if (isSameDay(calendarDate, selectedDateEndAsDate)) {
|
|
649
|
-
css += ' bg-primary text-white rounded-
|
|
649
|
+
css += ' bg-primary text-white rounded-end';
|
|
650
650
|
}
|
|
651
651
|
}
|
|
652
652
|
}
|
|
@@ -835,10 +835,10 @@ class SdsDatePickerComponent {
|
|
|
835
835
|
}
|
|
836
836
|
}
|
|
837
837
|
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 });
|
|
838
|
-
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", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], 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 sds-no-print\"\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-start\r\n border-end\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=\"ps-2 ms-1 me-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 <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\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-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-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-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n \r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-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 <div class=\"sds-print-only h-100\">\r\n <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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]=\"{ \r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\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 \r\n class=\"d-flex justify-content-center align-items-center\" \r\n (click)=\"selectEndDate($event)\">\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 ms-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> -->\r\n\r\n\r\n<ng-template #mainDisplayTemplate>\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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</ng-template>", 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{display:inline-flex}.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}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::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"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
838
|
+
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", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], 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 sds-no-print\"\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-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\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=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button class=\"btn btn-light date-range-dropdown-button sds-fw-400\">\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 <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\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-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-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 sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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-end border-start-0 ps-2 sds-fw-400\"\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 <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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 </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]=\"{ \r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\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 \r\n class=\"d-flex justify-content-center align-items-center\" \r\n (click)=\"selectEndDate($event)\">\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 sds-fw-400\"\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 ms-1 sds-fw-400\"\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> -->\r\n\r\n", 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{display:inline-flex}.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}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::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 });
|
|
839
839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
840
840
|
type: Component,
|
|
841
|
-
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\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-start\r\n border-end\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=\"ps-2 ms-1 me-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 <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\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-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-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-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n \r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-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 <div class=\"sds-print-only h-100\">\r\n <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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]=\"{ \r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\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 \r\n class=\"d-flex justify-content-center align-items-center\" \r\n (click)=\"selectEndDate($event)\">\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 ms-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> -->\r\n\r\n\r\n<ng-template #mainDisplayTemplate>\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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</ng-template>", 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{display:inline-flex}.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}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::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"] }]
|
|
841
|
+
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\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-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\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=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button class=\"btn btn-light date-range-dropdown-button sds-fw-400\">\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 <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\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-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-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 sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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-end border-start-0 ps-2 sds-fw-400\"\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 <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\" \r\n 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 </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]=\"{ \r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\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 \r\n class=\"d-flex justify-content-center align-items-center\" \r\n (click)=\"selectEndDate($event)\">\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 sds-fw-400\"\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 ms-1 sds-fw-400\"\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> -->\r\n\r\n", 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{display:inline-flex}.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}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::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"] }]
|
|
842
842
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
|
|
843
843
|
type: ContentChild,
|
|
844
844
|
args: ['display']
|