@spicainternational/ngx-sds-components 2.8.0 → 5.0.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/avatar/avatar-group.component.mjs +3 -3
- package/esm2020/src/lib/date-picker/date-picker.component.mjs +3 -3
- package/esm2020/src/lib/modal/modal.component.mjs +3 -3
- package/esm2020/src/lib/pane/pane.component.mjs +3 -3
- package/esm2020/src/lib/segmented-control/segmented-control.component.mjs +3 -3
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-avatar.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.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-pane.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs +2 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-avatar.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.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-pane.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs +2 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -34,10 +34,10 @@ export class SdsModalComponent {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\r\n [id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"
|
|
37
|
+
SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\r\n [id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn border-0\" \r\n [title]=\"closeText ? closeText : ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\r\n [id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"
|
|
40
|
+
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\r\n [id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn border-0\" \r\n [title]=\"closeText ? closeText : ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n <fa-icon [icon]=\"closeIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
|
|
41
41
|
}], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
|
|
42
42
|
type: ContentChild,
|
|
43
43
|
args: ['header']
|
|
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
65
65
|
type: ViewChild,
|
|
66
66
|
args: ['modal', { static: false }]
|
|
67
67
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxHQUNmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQU83RCxNQUFNLE9BQU8saUJBQWlCO0lBcUIxQjtRQXBCd0Isa0JBQWEsR0FBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUdqRSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFFM0IsU0FBSSxHQUE4QixJQUFJLENBQUM7UUFFdkMsb0JBQWUsR0FBWSxJQUFJLENBQUM7UUFFL0IsY0FBUyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3pELGVBQVUsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUxRCxlQUFVLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFcEUsY0FBUyxHQUFHLE9BQU8sQ0FBQztJQUtaLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixJQUFJO1FBQ1AsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztZQUNsRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3pCO0lBQ0wsQ0FBQztJQUVNLEtBQUs7UUFDUixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1lBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDMUI7SUFDTCxDQUFDO0lBRU0sa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2pCLENBQUM7OzhHQTFDUSxpQkFBaUI7a0dBQWpCLGlCQUFpQixvaEJDakI5QixpekNBa0NNOzJGRGpCTyxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0ksV0FBVzswRUFLRyxhQUFhO3NCQUFwQyxZQUFZO3VCQUFDLFFBQVE7Z0JBRU4sVUFBVTtzQkFBekIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLGFBQWE7c0JBQTVCLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFFVyxTQUFTO3NCQUF6QixNQUFNO2dCQUNVLFVBQVU7c0JBQTFCLE1BQU07Z0JBRVUsVUFBVTtzQkFBMUIsTUFBTTtnQkFJd0MsTUFBTTtzQkFBcEQsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENvbXBvbmVudCxcclxuICAgIEVsZW1lbnRSZWYsXHJcbiAgICBJbnB1dCxcclxuICAgIE9uSW5pdCxcclxuICAgIE91dHB1dCxcclxuICAgIFZpZXdDaGlsZCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIENvbnRlbnRDaGlsZCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy1tb2RhbCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vbW9kYWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc01vZGFsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBDb250ZW50Q2hpbGQoJ2hlYWRlcicpIGhlYWRlckNvbnRlbnQ6IEVsZW1lbnRSZWYgPSB7IG5hdGl2ZUVsZW1lbnQ6IHVuZGVmaW5lZCB9O1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtb2RhbFRpdGxlPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dIZWFkZXI6IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dGb290ZXI6IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGNsb3NlVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtb2RhbERpYWxvZ0lkPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dDbG9zZUJ1dHRvbjogYm9vbGVhbiA9IHRydWU7XHJcblxyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBtb2RhbE9wZW46IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgbW9kYWxDbG9zZTogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgY2xvc2VDbGljazogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ21vZGFsJywgeyBzdGF0aWM6IGZhbHNlIH0pIHByaXZhdGUgX21vZGFsOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkO1xyXG4gICAgXHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbigpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XHJcbiAgICAgICAgICAgIHRoaXMubW9kYWxPcGVuLmVtaXQoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGNsb3NlKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQpIHtcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnO1xyXG4gICAgICAgICAgICB0aGlzLm1vZGFsQ2xvc2UuZW1pdCgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25DbG9zZUJ1dHRvbkNsaWNrKCl7XHJcbiAgICAgICAgdGhpcy5jbG9zZUNsaWNrLmVtaXQoKTtcclxuICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdiAjbW9kYWwgY2xhc3M9XCJtb2RhbFwiPlxyXG4gICAgPGRpdlxyXG4gICAgICAgIGNsYXNzPVwibW9kYWwtZGlhbG9nIG1vZGFsLWRpYWxvZy1jZW50ZXJlZCBtb2RhbC1kaWFsb2ctc2Nyb2xsYWJsZVwiXHJcbiAgICAgICAgW2lkXT1cIm1vZGFsRGlhbG9nSWRcIlxyXG4gICAgICAgIFtuZ0NsYXNzXT1cIidtb2RhbC0nICsgc2l6ZVwiXHJcbiAgICAgICAgcm9sZT1cImRvY3VtZW50XCJcclxuICAgID5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtY29udGVudFwiPlxyXG5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXIgJiYgaGVhZGVyQ29udGVudFwiIGNsYXNzPVwibW9kYWwtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9J2hlYWRlcic+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICA8L2Rpdj4gICAgICAgICAgICAgXHJcblxyXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0hlYWRlciAmJiAhaGVhZGVyQ29udGVudFwiIGNsYXNzPVwibW9kYWwtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8aDUgY2xhc3M9XCJtb2RhbC10aXRsZVwiPnt7bW9kYWxUaXRsZX19PC9oNT5cclxuICAgICAgICAgICAgICAgIDxidXR0b24gXHJcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJzaG93Q2xvc2VCdXR0b25cIlxyXG4gICAgICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIiBcclxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBib3JkZXItMFwiIFxyXG4gICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCJjbG9zZVRleHQgPyBjbG9zZVRleHQgOiAnJ1wiXHJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xvc2VCdXR0b25DbGljaygpXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2xvc2VJY29uXCI+PC9mYS1pY29uPlxyXG4gICAgICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWJvZHlcIj5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0Zvb3RlclwiIGNsYXNzPVwibW9kYWwtZm9vdGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJmb290ZXJcIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICAgIFxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -25,10 +25,10 @@ export class SdsPaneComponent {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
-
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"pane border-
|
|
28
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"pane border-start\"\r\n [class]=\"productCssClass\"\r\n >\r\n <div \r\n *ngIf=\"selectedPage\" \r\n class=\"pane-content\"\r\n [style.width.rem]=\"contentWidthRem\"\r\n >\r\n \r\n <div class=\"page-header\">\r\n <div class=\"title\">\r\n {{selectedPage?.title}}\r\n </div>\r\n\r\n <button \r\n class=\"btn btn-stealth ms-auto\"\r\n (click)=\"hideContent()\"\r\n >\r\n <fa-icon \r\n [icon]=\"closeIcon\" \r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"> \r\n </fa-icon> \r\n </button> \r\n\r\n </div>\r\n\r\n <div class=\"page-container\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n >\r\n </ng-container> \r\n </div>\r\n </div>\r\n\r\n <div \r\n class=\"pane-header\"\r\n [class.border-start]=\"selectedPage\"\r\n >\r\n <ul>\r\n <li \r\n *ngFor=\"let page of pages\"\r\n [class.active] = \"selectedPage === page\"\r\n >\r\n <div \r\n class=\"icon-container\"\r\n [title]=\"page.title\"\r\n (click) = \"showContent(page)\"\r\n >\r\n <fa-icon \r\n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n [fixedWidth]=\"true\">\r\n </fa-icon>\r\n </div>\r\n </li>\r\n </ul>\r\n </div> \r\n</div>", 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"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
|
-
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n class=\"pane border-
|
|
31
|
+
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n class=\"pane border-start\"\r\n [class]=\"productCssClass\"\r\n >\r\n <div \r\n *ngIf=\"selectedPage\" \r\n class=\"pane-content\"\r\n [style.width.rem]=\"contentWidthRem\"\r\n >\r\n \r\n <div class=\"page-header\">\r\n <div class=\"title\">\r\n {{selectedPage?.title}}\r\n </div>\r\n\r\n <button \r\n class=\"btn btn-stealth ms-auto\"\r\n (click)=\"hideContent()\"\r\n >\r\n <fa-icon \r\n [icon]=\"closeIcon\" \r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"> \r\n </fa-icon> \r\n </button> \r\n\r\n </div>\r\n\r\n <div class=\"page-container\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n >\r\n </ng-container> \r\n </div>\r\n </div>\r\n\r\n <div \r\n class=\"pane-header\"\r\n [class.border-start]=\"selectedPage\"\r\n >\r\n <ul>\r\n <li \r\n *ngFor=\"let page of pages\"\r\n [class.active] = \"selectedPage === page\"\r\n >\r\n <div \r\n class=\"icon-container\"\r\n [title]=\"page.title\"\r\n (click) = \"showContent(page)\"\r\n >\r\n <fa-icon \r\n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n [fixedWidth]=\"true\">\r\n </fa-icon>\r\n </div>\r\n </li>\r\n </ul>\r\n </div> \r\n</div>", styles: [""] }]
|
|
32
32
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
33
33
|
type: Input
|
|
34
34
|
}], selectedPage: [{
|
|
@@ -40,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
40
40
|
}], pageChange: [{
|
|
41
41
|
type: Output
|
|
42
42
|
}] } });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lL3BhbmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZS9wYW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUdsSSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFTN0QsTUFBTSxPQUFPLGdCQUFnQjtJQWF6QjtRQVRnQixvQkFBZSxHQUFXLEVBQUUsQ0FBQztRQUduQyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVuQyxjQUFTLEdBQUcsT0FBTyxDQUFDO0lBSVosQ0FBQztJQUNoQixXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxXQUFXLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO1NBQy9FO0lBQ0wsQ0FBQztJQUVELFFBQVEsS0FBVSxDQUFDO0lBRVosV0FBVyxDQUFDLElBQWM7UUFDN0IsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTSxXQUFXO1FBQ2QsSUFBSSxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7OzZHQTlCUSxnQkFBZ0I7aUdBQWhCLGdCQUFnQiw4TkNaN0IsMjFEQTBETTsyRkQ5Q08sZ0JBQWdCO2tCQU41QixTQUFTOytCQUNJLFVBQVUsbUJBR0gsdUJBQXVCLENBQUMsTUFBTTswRUFJL0IsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLGVBQWU7c0JBQTlCLEtBQUs7Z0JBQ1UsT0FBTztzQkFBdEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBQYW5lUGFnZSB9IGZyb20gJy4vcGFuZS5tb2RlbCc7XHJcblxyXG5pbXBvcnQgeyBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IGlzVGhpc1NlY29uZCB9IGZyb20gJ2RhdGUtZm5zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtcGFuZScsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFuZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9wYW5lLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzUGFuZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgcGFnZXM/OiBQYW5lUGFnZVtdO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNlbGVjdGVkUGFnZT86IFBhbmVQYWdlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGNvbnRlbnRXaWR0aFJlbTogbnVtYmVyID0gMjA7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgcHJvZHVjdD86ICdhbGwtaG91cnMnIHwgJ215LWhvdXJzJyB8ICdkb29yLWNsb3VkJyB8ICd0aW1lLWFuZC1zcGFjZScgfCBzdHJpbmc7XHJcbiAgICBcclxuICAgIEBPdXRwdXQoKSBwYWdlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xyXG5cclxuICAgIHB1YmxpYyBwcm9kdWN0Q3NzQ2xhc3M/OiBzdHJpbmc7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICAgICAgIGlmIChjaGFuZ2VzWydwcm9kdWN0J10pIHtcclxuICAgICAgICAgICAgdGhpcy5wcm9kdWN0Q3NzQ2xhc3MgPSB0aGlzLnByb2R1Y3QgPyBgcHJvZHVjdC0ke3RoaXMucHJvZHVjdH1gIDogdW5kZWZpbmVkOyAgXHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgc2hvd0NvbnRlbnQocGFnZTogUGFuZVBhZ2UpOiB2b2lke1xyXG4gICAgICAgIHRoaXMuc2VsZWN0ZWRQYWdlID0gcGFnZTtcclxuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGhpZGVDb250ZW50KCk6IHZvaWR7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFBhZ2UgPSB1bmRlZmluZWQ7XHJcbiAgICAgICAgdGhpcy5wYWdlQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFBhZ2UpO1xyXG4gICAgfVxyXG5cclxuXHJcbn1cclxuIiwiPGRpdiBcclxuICAgIGNsYXNzPVwicGFuZSBib3JkZXItc3RhcnRcIlxyXG4gICAgW2NsYXNzXT1cInByb2R1Y3RDc3NDbGFzc1wiXHJcbiAgICA+XHJcbiAgICA8ZGl2IFxyXG4gICAgICAgICpuZ0lmPVwic2VsZWN0ZWRQYWdlXCIgXHJcbiAgICAgICAgY2xhc3M9XCJwYW5lLWNvbnRlbnRcIlxyXG4gICAgICAgIFtzdHlsZS53aWR0aC5yZW1dPVwiY29udGVudFdpZHRoUmVtXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2UtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0aXRsZVwiPlxyXG4gICAgICAgICAgICAgICAge3tzZWxlY3RlZFBhZ2U/LnRpdGxlfX1cclxuICAgICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgICA8YnV0dG9uIFxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLXN0ZWFsdGggbXMtYXV0b1wiXHJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwiaGlkZUNvbnRlbnQoKVwiXHJcbiAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBcclxuICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJjbG9zZUljb25cIiBcclxuICAgICAgICAgICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgICAgICBbc2l6ZV09XCInc20nXCI+IFxyXG4gICAgICAgICAgICAgICAgPC9mYS1pY29uPiAgICAgICAgXHJcbiAgICAgICAgICAgIDwvYnV0dG9uPiAgXHJcblxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwicGFnZS1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWRQYWdlICYmIHNlbGVjdGVkUGFnZS5jb250ZW50VGVtcGxhdGUgPyBzZWxlY3RlZFBhZ2UuY29udGVudFRlbXBsYXRlIDogbnVsbFwiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+ICAgICAgICAgICAgXHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8ZGl2IFxyXG4gICAgICAgIGNsYXNzPVwicGFuZS1oZWFkZXJcIlxyXG4gICAgICAgIFtjbGFzcy5ib3JkZXItc3RhcnRdPVwic2VsZWN0ZWRQYWdlXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPHVsPlxyXG4gICAgICAgICAgICA8bGkgXHJcbiAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgcGFnZSBvZiBwYWdlc1wiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MuYWN0aXZlXSA9IFwic2VsZWN0ZWRQYWdlID09PSBwYWdlXCJcclxuICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxkaXYgXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJpY29uLWNvbnRhaW5lclwiXHJcbiAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cInBhZ2UudGl0bGVcIlxyXG4gICAgICAgICAgICAgICAgICAgIChjbGljaykgPSBcInNob3dDb250ZW50KHBhZ2UpXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAgPGZhLWljb24gXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIihzZWxlY3RlZFBhZ2UgPT09IHBhZ2UgPyBwYWdlLnNlbGVjdGVkSWNvbiA/IHBhZ2Uuc2VsZWN0ZWRJY29uIDogcGFnZS5pY29uIDogcGFnZS5pY29uKVwiIFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9mYS1pY29uPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvbGk+XHJcbiAgICAgICAgPC91bD5cclxuICAgIDwvZGl2PiAgICBcclxuPC9kaXY+Il19
|
|
@@ -17,10 +17,10 @@ export class SdsSegmentedControlComponent {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
SdsSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
SdsSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSegmentedControlComponent, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n class=\"sds-segmented-control-container\" \r\n [class.disabled]=\"disabled\">\r\n <div *ngFor=\"let item of items let last = last;\" \r\n class=\"segment\" \r\n id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n [class.selected]=\"item[valueExpr] == value\"\r\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n (click)=\"itemSelected(item)\">\r\n\r\n <div>\r\n <i *ngIf=\"item.icon\" class=\"{{item.icon}}
|
|
20
|
+
SdsSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSegmentedControlComponent, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n class=\"sds-segmented-control-container\" \r\n [class.disabled]=\"disabled\">\r\n <div *ngFor=\"let item of items let last = last;\" \r\n class=\"segment\" \r\n id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n [class.selected]=\"item[valueExpr] == value\"\r\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n (click)=\"itemSelected(item)\">\r\n\r\n <div>\r\n <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n <span>{{item[displayExpr]}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSegmentedControlComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'sds-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n class=\"sds-segmented-control-container\" \r\n [class.disabled]=\"disabled\">\r\n <div *ngFor=\"let item of items let last = last;\" \r\n class=\"segment\" \r\n id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n [class.selected]=\"item[valueExpr] == value\"\r\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n (click)=\"itemSelected(item)\">\r\n\r\n <div>\r\n <i *ngIf=\"item.icon\" class=\"{{item.icon}}
|
|
23
|
+
args: [{ selector: 'sds-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n class=\"sds-segmented-control-container\" \r\n [class.disabled]=\"disabled\">\r\n <div *ngFor=\"let item of items let last = last;\" \r\n class=\"segment\" \r\n id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n [class.selected]=\"item[valueExpr] == value\"\r\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n (click)=\"itemSelected(item)\">\r\n\r\n <div>\r\n <i *ngIf=\"item.icon\" class=\"{{item.icon}} me-2\"></i>\r\n <span>{{item[displayExpr]}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [""] }]
|
|
24
24
|
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], value: [{
|
|
@@ -40,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
40
40
|
}], valueChange: [{
|
|
41
41
|
type: Output
|
|
42
42
|
}] } });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUXhHLE1BQU0sT0FBTyw0QkFBNEI7SUFhckM7UUFUUyxjQUFTLEdBQVcsT0FBTyxDQUFDO1FBQzVCLGdCQUFXLEdBQVcsTUFBTSxDQUFDO1FBRzdCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFekIsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ25ELGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7SUFFL0MsQ0FBQztJQUVoQixRQUFRLEtBQUksQ0FBQztJQUVOLFlBQVksQ0FBQyxJQUFTO1FBQ3pCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVsQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDL0IsQ0FBQzs7eUhBdEJRLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLG9TQ1J6QyxzbEJBZU07MkZEUE8sNEJBQTRCO2tCQU54QyxTQUFTOytCQUNFLHVCQUF1QixtQkFHaEIsdUJBQXVCLENBQUMsTUFBTTswRUFJcEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZHMtc2VnbWVudGVkLWNvbnRyb2wnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzU2VnbWVudGVkQ29udHJvbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgaXRlbXM6IGFueVtdIHwgdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgdmFsdWU6IGFueTtcclxuICAgIEBJbnB1dCgpIHZhbHVlRXhwcjogc3RyaW5nID0gXCJ2YWx1ZVwiO1xyXG4gICAgQElucHV0KCkgZGlzcGxheUV4cHI6IHN0cmluZyA9IFwidGV4dFwiO1xyXG4gICAgQElucHV0KCkgdG9vbHRpcEV4cHI6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICAgIEBJbnB1dCgpIGlkRXhwcjogc3RyaW5nIHwgdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgaXRlbUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpIHt9XHJcblxyXG4gICAgcHVibGljIGl0ZW1TZWxlY3RlZChpdGVtOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnZhbHVlID0gaXRlbVt0aGlzLnZhbHVlRXhwcl07XHJcblxyXG4gICAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgICAgICB0aGlzLml0ZW1DaGFuZ2UuZW1pdChpdGVtKTtcclxuICAgIH1cclxuXHJcbn1cclxuXHJcblxyXG5cclxuIiwiPGRpdiBcclxuICAgIGNsYXNzPVwic2RzLXNlZ21lbnRlZC1jb250cm9sLWNvbnRhaW5lclwiIFxyXG4gICAgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCI+XHJcbiAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zIGxldCBsYXN0ID0gbGFzdDtcIiBcclxuICAgICAgICBjbGFzcz1cInNlZ21lbnRcIiBcclxuICAgICAgICBpZD1cInt7aWRFeHByID8gaXRlbVtpZEV4cHJdOiAnJ319XCJcclxuICAgICAgICBbY2xhc3Muc2VsZWN0ZWRdPVwiaXRlbVt2YWx1ZUV4cHJdID09IHZhbHVlXCJcclxuICAgICAgICBbdGl0bGVdPVwidG9vbHRpcEV4cHIgJiYgaXRlbVt0b29sdGlwRXhwcl0gPyBpdGVtW3Rvb2x0aXBFeHByXSA6ICcnXCJcclxuICAgICAgICAoY2xpY2spPVwiaXRlbVNlbGVjdGVkKGl0ZW0pXCI+XHJcblxyXG4gICAgICAgIDxkaXY+
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2VnbWVudGVkLWNvbnRyb2wvc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUXhHLE1BQU0sT0FBTyw0QkFBNEI7SUFhckM7UUFUUyxjQUFTLEdBQVcsT0FBTyxDQUFDO1FBQzVCLGdCQUFXLEdBQVcsTUFBTSxDQUFDO1FBRzdCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFekIsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ25ELGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7SUFFL0MsQ0FBQztJQUVoQixRQUFRLEtBQUksQ0FBQztJQUVOLFlBQVksQ0FBQyxJQUFTO1FBQ3pCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVsQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDL0IsQ0FBQzs7eUhBdEJRLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLG9TQ1J6QyxzbEJBZU07MkZEUE8sNEJBQTRCO2tCQU54QyxTQUFTOytCQUNFLHVCQUF1QixtQkFHaEIsdUJBQXVCLENBQUMsTUFBTTswRUFJcEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZHMtc2VnbWVudGVkLWNvbnRyb2wnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzU2VnbWVudGVkQ29udHJvbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgaXRlbXM6IGFueVtdIHwgdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgdmFsdWU6IGFueTtcclxuICAgIEBJbnB1dCgpIHZhbHVlRXhwcjogc3RyaW5nID0gXCJ2YWx1ZVwiO1xyXG4gICAgQElucHV0KCkgZGlzcGxheUV4cHI6IHN0cmluZyA9IFwidGV4dFwiO1xyXG4gICAgQElucHV0KCkgdG9vbHRpcEV4cHI6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICAgIEBJbnB1dCgpIGlkRXhwcjogc3RyaW5nIHwgdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgaXRlbUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpIHt9XHJcblxyXG4gICAgcHVibGljIGl0ZW1TZWxlY3RlZChpdGVtOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnZhbHVlID0gaXRlbVt0aGlzLnZhbHVlRXhwcl07XHJcblxyXG4gICAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgICAgICB0aGlzLml0ZW1DaGFuZ2UuZW1pdChpdGVtKTtcclxuICAgIH1cclxuXHJcbn1cclxuXHJcblxyXG5cclxuIiwiPGRpdiBcclxuICAgIGNsYXNzPVwic2RzLXNlZ21lbnRlZC1jb250cm9sLWNvbnRhaW5lclwiIFxyXG4gICAgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCI+XHJcbiAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zIGxldCBsYXN0ID0gbGFzdDtcIiBcclxuICAgICAgICBjbGFzcz1cInNlZ21lbnRcIiBcclxuICAgICAgICBpZD1cInt7aWRFeHByID8gaXRlbVtpZEV4cHJdOiAnJ319XCJcclxuICAgICAgICBbY2xhc3Muc2VsZWN0ZWRdPVwiaXRlbVt2YWx1ZUV4cHJdID09IHZhbHVlXCJcclxuICAgICAgICBbdGl0bGVdPVwidG9vbHRpcEV4cHIgJiYgaXRlbVt0b29sdGlwRXhwcl0gPyBpdGVtW3Rvb2x0aXBFeHByXSA6ICcnXCJcclxuICAgICAgICAoY2xpY2spPVwiaXRlbVNlbGVjdGVkKGl0ZW0pXCI+XHJcblxyXG4gICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgIDxpICpuZ0lmPVwiaXRlbS5pY29uXCIgY2xhc3M9XCJ7e2l0ZW0uaWNvbn19IG1lLTJcIj48L2k+XHJcbiAgICAgICAgICAgIDxzcGFuPnt7aXRlbVtkaXNwbGF5RXhwcl19fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
|
|
@@ -126,10 +126,10 @@ class SdsAvatarGroupComponent {
|
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
SdsAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", maxCount: "maxCount", fontSize: "fontSize", borderColor: "borderColor", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center
|
|
129
|
+
SdsAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAvatarGroupComponent, selector: "sds-avatar-group", inputs: { stacked: "stacked", maxCount: "maxCount", fontSize: "fontSize", borderColor: "borderColor", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\" \r\n >\r\n </sds-avatar>\r\n <div class=\"ms-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"], components: [{ type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
130
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAvatarGroupComponent, decorators: [{
|
|
131
131
|
type: Component,
|
|
132
|
-
args: [{ selector: 'sds-avatar-group', template: "<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center
|
|
132
|
+
args: [{ selector: 'sds-avatar-group', template: "<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\" \r\n >\r\n </sds-avatar>\r\n <div class=\"ms-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>", styles: [".avatar-group-container{flex-wrap:wrap;gap:.25rem}.avatar-group-container .overflow{cursor:pointer!important}.overflow-avatars-container{cursor:default}.overflow-avatars-container .overflow-avatar-container:hover{background-color:#eaf3f9}\n"] }]
|
|
133
133
|
}], ctorParameters: function () { return []; }, propDecorators: { stacked: [{
|
|
134
134
|
type: Input
|
|
135
135
|
}], maxCount: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n @Input() text: string = '';\r\n @Input() colorKey: string = '';\r\n @Input() pictureUri: string = '';\r\n @Input() showHint: boolean = false;\r\n @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\r\n @Input() borderColor?: string;\r\n @Input() initialsText?: string;\r\n @Input() cursor?: string;\r\n\r\n public isPictureReady: boolean = false;\r\n public initials: string = '';\r\n\r\n constructor() {}\r\n\r\n ngAfterViewInit() {\r\n this.loadUserPicture();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (\r\n changes['text'] &&\r\n changes['text'].currentValue != changes['text'].previousValue &&\r\n this.initialsText == undefined\r\n ) {\r\n this.extractInitials();\r\n }\r\n\r\n if (\r\n changes['pictureUri'] &&\r\n changes['pictureUri'].currentValue !=\r\n changes['pictureUri'].previousValue\r\n ) {\r\n this.loadUserPicture();\r\n }\r\n\r\n if (changes['initialsText'] && this.initialsText) {\r\n this.initials = this.initialsText;\r\n }\r\n }\r\n\r\n public setColorClass(): string {\r\n if (this.colorKey) {\r\n return 'color' + this.getColorIndex(this.colorKey);\r\n }\r\n return 'color18';\r\n }\r\n\r\n private extractInitials(): void {\r\n this.initials = this.text\r\n ? this.text\r\n .toUpperCase()\r\n .split(' ')\r\n .map((n) => n[0])\r\n .slice(0, 2)\r\n .join('')\r\n : '';\r\n }\r\n\r\n private getColorIndex(s: string): number {\r\n const length = 10;\r\n if (!s) {\r\n return 0;\r\n }\r\n let sumOfChars = s\r\n .split('')\r\n .map((x) => x.charCodeAt(0))\r\n .reduce((a, b) => a + b, 0);\r\n return sumOfChars % length;\r\n }\r\n\r\n public loadUserPicture() {\r\n if (this.pictureUri && this.pictureUri !== '') {\r\n this.isPictureReady = true;\r\n } else {\r\n this.isPictureReady = false;\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n [class.hasPicture]=\"isPictureReady\"\r\n [ngClass]=\"setColorClass()\"\r\n [title]=\"showHint ? text : ''\"\r\n [style.border-style]=\"borderStyle.toString()\"\r\n [style.border-color]=\"borderColor\"\r\n [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n <span \r\n *ngIf=\"!isPictureReady\" \r\n class=\"initials\"\r\n >\r\n {{ initials }}\r\n </span>\r\n\r\n <img \r\n *ngIf=\"isPictureReady\" \r\n [src]=\"pictureUri\"\r\n alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n selector: 'sds-avatar-group',\r\n templateUrl: './avatar-group.component.html',\r\n styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n @Input() public stacked: boolean = false;\r\n @Input() public maxCount?: number;\r\n @Input() public fontSize: number = 2;\r\n @Input() public borderColor?: string;\r\n @Input() public data: Array<AvatarModel> = [];\r\n\r\n public overflow: Array<AvatarModel> = [];\r\n public inflow: Array<AvatarModel> = [];\r\n\r\n public overflowCountDisplay: string = '';\r\n public overFlowBorderStyle: 'solid' | 'none' = 'none';\r\n\r\n public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n public showDropdown = false;\r\n\r\n constructor() {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] || changes['maxCount']){\r\n if (this.maxCount && this.data) {\r\n this.overflow = [...this.data];\r\n this.inflow = this.overflow.splice(0, this.maxCount);\r\n console.log(this.overflow.length);\r\n this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n } else {\r\n this.inflow = [...this.data];\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public onOverflowClicked() {\r\n this.showDropdown = true;\r\n }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center pl-3 py-2 pr-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\" \r\n >\r\n </sds-avatar>\r\n <div class=\"ml-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n SdsAvatarComponent,\r\n SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n DxPopoverModule,\r\n DxScrollViewModule\r\n\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n @Input() text: string = '';\r\n @Input() colorKey: string = '';\r\n @Input() pictureUri: string = '';\r\n @Input() showHint: boolean = false;\r\n @Input() borderStyle: 'solid' | 'dashed' | 'dotted' | 'none' = 'none';\r\n @Input() borderColor?: string;\r\n @Input() initialsText?: string;\r\n @Input() cursor?: string;\r\n\r\n public isPictureReady: boolean = false;\r\n public initials: string = '';\r\n\r\n constructor() {}\r\n\r\n ngAfterViewInit() {\r\n this.loadUserPicture();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (\r\n changes['text'] &&\r\n changes['text'].currentValue != changes['text'].previousValue &&\r\n this.initialsText == undefined\r\n ) {\r\n this.extractInitials();\r\n }\r\n\r\n if (\r\n changes['pictureUri'] &&\r\n changes['pictureUri'].currentValue !=\r\n changes['pictureUri'].previousValue\r\n ) {\r\n this.loadUserPicture();\r\n }\r\n\r\n if (changes['initialsText'] && this.initialsText) {\r\n this.initials = this.initialsText;\r\n }\r\n }\r\n\r\n public setColorClass(): string {\r\n if (this.colorKey) {\r\n return 'color' + this.getColorIndex(this.colorKey);\r\n }\r\n return 'color18';\r\n }\r\n\r\n private extractInitials(): void {\r\n this.initials = this.text\r\n ? this.text\r\n .toUpperCase()\r\n .split(' ')\r\n .map((n) => n[0])\r\n .slice(0, 2)\r\n .join('')\r\n : '';\r\n }\r\n\r\n private getColorIndex(s: string): number {\r\n const length = 10;\r\n if (!s) {\r\n return 0;\r\n }\r\n let sumOfChars = s\r\n .split('')\r\n .map((x) => x.charCodeAt(0))\r\n .reduce((a, b) => a + b, 0);\r\n return sumOfChars % length;\r\n }\r\n\r\n public loadUserPicture() {\r\n if (this.pictureUri && this.pictureUri !== '') {\r\n this.isPictureReady = true;\r\n } else {\r\n this.isPictureReady = false;\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n [class.hasPicture]=\"isPictureReady\"\r\n [ngClass]=\"setColorClass()\"\r\n [title]=\"showHint ? text : ''\"\r\n [style.border-style]=\"borderStyle.toString()\"\r\n [style.border-color]=\"borderColor\"\r\n [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n <span \r\n *ngIf=\"!isPictureReady\" \r\n class=\"initials\"\r\n >\r\n {{ initials }}\r\n </span>\r\n\r\n <img \r\n *ngIf=\"isPictureReady\" \r\n [src]=\"pictureUri\"\r\n alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n selector: 'sds-avatar-group',\r\n templateUrl: './avatar-group.component.html',\r\n styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n @Input() public stacked: boolean = false;\r\n @Input() public maxCount?: number;\r\n @Input() public fontSize: number = 2;\r\n @Input() public borderColor?: string;\r\n @Input() public data: Array<AvatarModel> = [];\r\n\r\n public overflow: Array<AvatarModel> = [];\r\n public inflow: Array<AvatarModel> = [];\r\n\r\n public overflowCountDisplay: string = '';\r\n public overFlowBorderStyle: 'solid' | 'none' = 'none';\r\n\r\n public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n public showDropdown = false;\r\n\r\n constructor() {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] || changes['maxCount']){\r\n if (this.maxCount && this.data) {\r\n this.overflow = [...this.data];\r\n this.inflow = this.overflow.splice(0, this.maxCount);\r\n console.log(this.overflow.length);\r\n this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n } else {\r\n this.inflow = [...this.data];\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public onOverflowClicked() {\r\n this.showDropdown = true;\r\n }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar *ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n \r\n <sds-avatar \r\n *ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\" \r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view \r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div *ngFor=\"let avatar of overflow\"\r\n class=\"d-flex align-items-center ps-3 py-2 pe-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\" \r\n >\r\n </sds-avatar>\r\n <div class=\"ms-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n SdsAvatarComponent,\r\n SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n DxPopoverModule,\r\n DxScrollViewModule\r\n\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}
|
|
@@ -599,10 +599,10 @@ class SdsDatePickerComponent {
|
|
|
599
599
|
}
|
|
600
600
|
}
|
|
601
601
|
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 });
|
|
602
|
-
SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", fixedWidth: "fixedWidth", occupiedDays: "occupiedDays" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-left\r\n border-right-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\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 class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center 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 #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill 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-pill 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\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-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n >\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\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center mt-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary btn-sm\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.General.Cancel' | translate }} -->\r\n CANCEL\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm mx-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.Shared.Datepicker.Apply' | translate }} -->\r\n APPLY\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.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", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "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", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "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", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "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", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
602
|
+
SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", fixedWidth: "fixedWidth", occupiedDays: "occupiedDays" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-end-0 border-color-muted pe-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-start-0 border-end-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\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 class=\"btn btn-white border rounded-end border-start-0 border-color-muted 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 <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center 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 #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill 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-pill 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\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-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n >\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\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center mt-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary btn-sm\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.General.Cancel' | translate }} -->\r\n CANCEL\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm mx-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.Shared.Datepicker.Apply' | translate }} -->\r\n APPLY\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-start{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.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", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "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", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "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", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "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", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
603
603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
604
604
|
type: Component,
|
|
605
|
-
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-left\r\n border-right-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\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 class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center 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 #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill 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-pill 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\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-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n >\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\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center mt-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary btn-sm\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.General.Cancel' | translate }} -->\r\n CANCEL\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm mx-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.Shared.Datepicker.Apply' | translate }} -->\r\n APPLY\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
|
|
605
|
+
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-end-0 border-color-muted pe-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-start-0 border-end-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\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 class=\"btn btn-white border rounded-end border-start-0 border-color-muted 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 <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center 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 #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill 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-pill 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\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-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n >\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\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center mt-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary btn-sm\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.General.Cancel' | translate }} -->\r\n CANCEL\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm mx-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n <!-- {{ 'vTime.Shared.Datepicker.Apply' | translate }} -->\r\n APPLY\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-start{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
|
|
606
606
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
|
|
607
607
|
type: Input
|
|
608
608
|
}], dateRangeDefinitions: [{
|