@spicainternational/ngx-sds-components 5.4.0 → 5.5.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 +65 -41
- package/esm2020/src/lib/date-pipes/date-format.pipe.mjs +41 -2
- package/esm2020/src/lib/quick-info/quick-info.component.mjs +12 -18
- package/esm2020/src/lib/tooltip/tooltip.directive.mjs +11 -9
- 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 +67 -42
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +40 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +11 -17
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs +10 -8
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.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 +64 -40
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +40 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +11 -17
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs +10 -8
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/date-picker/date-picker.component.d.ts +7 -3
- package/src/lib/date-pipes/date-format.pipe.d.ts +1 -1
- package/src/lib/quick-info/quick-info.component.d.ts +2 -2
|
@@ -190,7 +190,7 @@ class SdsDatePickerComponent {
|
|
|
190
190
|
this.applyText = 'close';
|
|
191
191
|
this.cancelText = 'close';
|
|
192
192
|
this.firstDayOfWeek = 1;
|
|
193
|
-
this.dateRangeDefinitionsWidth = '
|
|
193
|
+
this.dateRangeDefinitionsWidth = '11rem';
|
|
194
194
|
this.showPreviousAndNextButtons = true;
|
|
195
195
|
this.width = '30rem';
|
|
196
196
|
// public properties
|
|
@@ -230,21 +230,10 @@ class SdsDatePickerComponent {
|
|
|
230
230
|
};
|
|
231
231
|
this.customDateRange = new PeriodPickerDateRange(this.translations.custom, undefined, undefined);
|
|
232
232
|
this.selectedDateRange = this.customDateRange;
|
|
233
|
-
|
|
234
|
-
this.
|
|
235
|
-
|
|
236
|
-
this.
|
|
237
|
-
const periodSelectorDefaultEndDate = startOfDay(endOfMonth(new Date()));
|
|
238
|
-
this.selectedDateEnd = periodSelectorDefaultEndDate;
|
|
239
|
-
if (this.selectionKind == 'single') {
|
|
240
|
-
this.setDateRangeText(singleDateSelectorDefaultDate, singleDateSelectorDefaultDate);
|
|
241
|
-
this.matchDateRange(singleDateSelectorDefaultDate, singleDateSelectorDefaultDate);
|
|
242
|
-
}
|
|
243
|
-
else {
|
|
244
|
-
this.setDateRangeText(periodSelectorDefaultStartDate, periodSelectorDefaultEndDate);
|
|
245
|
-
this.matchDateRange(periodSelectorDefaultStartDate, periodSelectorDefaultEndDate);
|
|
246
|
-
}
|
|
247
|
-
// this.dateRangeTranslations = new DateRangeTranslations();
|
|
233
|
+
this.selectedDateInternal = startOfDay(new Date());
|
|
234
|
+
this.selectedDateStart = startOfMonth(new Date());
|
|
235
|
+
this.selectedDateEnd = startOfDay(endOfMonth(new Date()));
|
|
236
|
+
this.setSelectedDateRangeText();
|
|
248
237
|
}
|
|
249
238
|
ngOnInit() { }
|
|
250
239
|
ngOnChanges(changes) {
|
|
@@ -265,9 +254,10 @@ class SdsDatePickerComponent {
|
|
|
265
254
|
}
|
|
266
255
|
}
|
|
267
256
|
if (changes['translations']) {
|
|
268
|
-
this.
|
|
269
|
-
|
|
270
|
-
|
|
257
|
+
this.updateCustomText();
|
|
258
|
+
}
|
|
259
|
+
if (changes['locales']) {
|
|
260
|
+
this.setSelectedDateRangeText();
|
|
271
261
|
}
|
|
272
262
|
if (changes['selectedDateStart'] || changes['selectedDateEnd']) {
|
|
273
263
|
this.dateStartOld = this.selectedDateStart;
|
|
@@ -350,6 +340,32 @@ class SdsDatePickerComponent {
|
|
|
350
340
|
this.generateDateRanges(true);
|
|
351
341
|
}
|
|
352
342
|
}
|
|
343
|
+
onKeydownHandler(event) {
|
|
344
|
+
if (this.showDatepicker) {
|
|
345
|
+
if (event.code === 'Escape') {
|
|
346
|
+
event.stopPropagation();
|
|
347
|
+
this.closeDatepickerPopup(false);
|
|
348
|
+
}
|
|
349
|
+
else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
350
|
+
event.stopPropagation();
|
|
351
|
+
if (!this.disabled) {
|
|
352
|
+
this.applyPeriodPicker();
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
setDateRangeDefinitions(definitions) {
|
|
358
|
+
this.dateRangeDefinitions = definitions;
|
|
359
|
+
this.generateDateRanges(true);
|
|
360
|
+
}
|
|
361
|
+
setTranslations(translations) {
|
|
362
|
+
this.translations = translations;
|
|
363
|
+
this.updateCustomText();
|
|
364
|
+
}
|
|
365
|
+
setLocales(locales) {
|
|
366
|
+
this.locales = locales;
|
|
367
|
+
this.setSelectedDateRangeText();
|
|
368
|
+
}
|
|
353
369
|
get selectedDateStartFocus() {
|
|
354
370
|
return this.selectedDateFocus;
|
|
355
371
|
}
|
|
@@ -446,16 +462,18 @@ class SdsDatePickerComponent {
|
|
|
446
462
|
});
|
|
447
463
|
}
|
|
448
464
|
}
|
|
449
|
-
closeDatepickerPopup() {
|
|
450
|
-
this.showDatepicker
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
465
|
+
closeDatepickerPopup(emitChange = true) {
|
|
466
|
+
if (this.showDatepicker) {
|
|
467
|
+
this.showDatepicker = false;
|
|
468
|
+
if (this.selectionKind == 'single') {
|
|
469
|
+
this.setSelectedDate(this.selectedDateInternal, this.selectedDateInternal, emitChange);
|
|
470
|
+
}
|
|
471
|
+
else {
|
|
472
|
+
if (!this.hidingConfirmedDate) {
|
|
473
|
+
this.setSelectedDate(this.dateStartOld, this.dateEndOld, true);
|
|
474
|
+
}
|
|
475
|
+
this.hidingConfirmedDate = false;
|
|
457
476
|
}
|
|
458
|
-
this.hidingConfirmedDate = false;
|
|
459
477
|
}
|
|
460
478
|
}
|
|
461
479
|
setSelectedDate(dateStart, dateEnd, emitChange = true) {
|
|
@@ -555,6 +573,11 @@ class SdsDatePickerComponent {
|
|
|
555
573
|
}
|
|
556
574
|
return css;
|
|
557
575
|
}
|
|
576
|
+
updateCustomText() {
|
|
577
|
+
this.customDateRange.name = this.translations?.custom
|
|
578
|
+
? this.translations.custom
|
|
579
|
+
: '';
|
|
580
|
+
}
|
|
558
581
|
removeDxDefaultCalendarFocus() {
|
|
559
582
|
const element = document.querySelector('#datepickercomponent .dx-calendar-selected-date');
|
|
560
583
|
if (element &&
|
|
@@ -562,9 +585,15 @@ class SdsDatePickerComponent {
|
|
|
562
585
|
element?.classList?.remove('dx-calendar-selected-date');
|
|
563
586
|
}
|
|
564
587
|
}
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
588
|
+
setSelectedDateRangeText() {
|
|
589
|
+
if (this.selectionKind == 'single') {
|
|
590
|
+
this.setDateRangeText(new Date(this.selectedDateInternal), new Date(this.selectedDateInternal));
|
|
591
|
+
this.matchDateRange(new Date(this.selectedDateInternal), new Date(this.selectedDateInternal));
|
|
592
|
+
}
|
|
593
|
+
else {
|
|
594
|
+
this.setDateRangeText(new Date(this.selectedDateStart), new Date(this.selectedDateEnd));
|
|
595
|
+
this.matchDateRange(new Date(this.selectedDateStart), new Date(this.selectedDateEnd));
|
|
596
|
+
}
|
|
568
597
|
}
|
|
569
598
|
toggleDateRangeSelectorVisibility() {
|
|
570
599
|
if (!this.showPredefinedOptionsSelector) {
|
|
@@ -670,17 +699,12 @@ class SdsDatePickerComponent {
|
|
|
670
699
|
this.dateRanges.push(this.customDateRange);
|
|
671
700
|
}
|
|
672
701
|
}
|
|
673
|
-
onKeyupHandler(event) {
|
|
674
|
-
if (event.keyCode === 27) {
|
|
675
|
-
this.closeDatepickerPopup();
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
702
|
}
|
|
679
703
|
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 });
|
|
680
|
-
SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-flex bg-white\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n [style.width]=\"width\"\r\n >\r\n <!-- <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n > -->\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end \r\n dropdown-toggle\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n (onContentReady)=\"onContentReady($event)\" \r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n <!-- </div> -->\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n >\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <button\r\n class=\"btn btn-primary ml-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.predefined-date-range{cursor:pointer;font-size:1rem;min-width:10rem}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected{background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
704
|
+
SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-flex bg-white\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n [style.width]=\"width\"\r\n >\r\n <!-- <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n > -->\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button class=\"btn btn-light date-range-dropdown-button\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n\r\n </div>\r\n \r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n \r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n <!-- </div> -->\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n >\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <button\r\n class=\"btn btn-primary ms-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
681
705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
682
706
|
type: Component,
|
|
683
|
-
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-flex bg-white\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n [style.width]=\"width\"\r\n >\r\n <!-- <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n > -->\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end \r\n dropdown-toggle\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n (onContentReady)=\"onContentReady($event)\" \r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n <!-- </div> -->\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n >\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <button\r\n class=\"btn btn-primary ml-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.predefined-date-range{cursor:pointer;font-size:1rem;min-width:10rem}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected{background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}\n"] }]
|
|
707
|
+
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div \r\n class=\"datepicker d-flex bg-white\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n [style.width]=\"width\"\r\n >\r\n <!-- <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n > -->\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button class=\"btn btn-light date-range-dropdown-button\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n\r\n </div>\r\n \r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n \r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > \r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n <!-- </div> -->\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-popover' }\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n >\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"disabled\"\r\n (click)=\"closeDatepickerPopup()\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <button\r\n class=\"btn btn-primary ms-1\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
|
|
684
708
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
|
|
685
709
|
type: Input
|
|
686
710
|
}], dateRangeDefinitions: [{
|
|
@@ -736,9 +760,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
736
760
|
}], calendar: [{
|
|
737
761
|
type: ViewChild,
|
|
738
762
|
args: ['calendar', { static: false }]
|
|
739
|
-
}],
|
|
763
|
+
}], onKeydownHandler: [{
|
|
740
764
|
type: HostListener,
|
|
741
|
-
args: ['document:
|
|
765
|
+
args: ['document:keydown', ['$event']]
|
|
742
766
|
}] } });
|
|
743
767
|
|
|
744
768
|
const components = [
|