@spicainternational/ngx-sds-components 5.2.0 → 5.3.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.
Files changed (82) hide show
  1. package/esm2020/public-api.mjs +3 -1
  2. package/esm2020/src/lib/app-switcher/app-switcher.component.mjs +1 -1
  3. package/esm2020/src/lib/avatar/avatar-group.component.mjs +1 -1
  4. package/esm2020/src/lib/avatar/avatar.component.mjs +15 -13
  5. package/esm2020/src/lib/color-picker/color-picker.component.mjs +1 -1
  6. package/esm2020/src/lib/date-picker/date-picker.component.mjs +33 -17
  7. package/esm2020/src/lib/date-picker/sds-date-picker.service.mjs +4 -4
  8. package/esm2020/src/lib/layout/default-layout/default-layout.component.mjs +15 -0
  9. package/esm2020/src/lib/layout/extra-large-layout/extra-large-layout.component.mjs +15 -0
  10. package/esm2020/src/lib/layout/fluid-layout/fluid-layout.component.mjs +15 -0
  11. package/esm2020/src/lib/layout/layout.module.mjs +49 -0
  12. package/esm2020/src/lib/layout/medium-layout/medium-layout.component.mjs +15 -0
  13. package/esm2020/src/lib/layout/public-api.mjs +7 -0
  14. package/esm2020/src/lib/layout/small-layout/small-layout.component.mjs +15 -0
  15. package/esm2020/src/lib/layout/spicainternational-ngx-sds-components-src-lib-layout.mjs +5 -0
  16. package/esm2020/src/lib/modal/dialog/dialog.component.mjs +1 -1
  17. package/esm2020/src/lib/modal/modal.component.mjs +6 -3
  18. package/esm2020/src/lib/page-header/page-header.component.mjs +22 -0
  19. package/esm2020/src/lib/page-header/page-header.module.mjs +19 -0
  20. package/esm2020/src/lib/page-header/public-api.mjs +3 -0
  21. package/esm2020/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.mjs +5 -0
  22. package/esm2020/src/lib/quick-info/quick-info.component.mjs +49 -8
  23. package/esm2020/src/lib/segmented-control/segmented-control.component.mjs +1 -1
  24. package/fesm2015/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs +1 -1
  25. package/fesm2015/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs.map +1 -1
  26. package/fesm2015/spicainternational-ngx-sds-components-src-lib-avatar.mjs +15 -13
  27. package/fesm2015/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map +1 -1
  28. package/fesm2015/spicainternational-ngx-sds-components-src-lib-color-picker.mjs +1 -1
  29. package/fesm2015/spicainternational-ngx-sds-components-src-lib-color-picker.mjs.map +1 -1
  30. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +35 -19
  31. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  32. package/fesm2015/spicainternational-ngx-sds-components-src-lib-layout.mjs +112 -0
  33. package/fesm2015/spicainternational-ngx-sds-components-src-lib-layout.mjs.map +1 -0
  34. package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs +6 -3
  35. package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
  36. package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs +45 -0
  37. package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map +1 -0
  38. package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +50 -7
  39. package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
  40. package/fesm2015/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map +1 -1
  41. package/fesm2015/spicainternational-ngx-sds-components.mjs +2 -0
  42. package/fesm2015/spicainternational-ngx-sds-components.mjs.map +1 -1
  43. package/fesm2020/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs +1 -1
  44. package/fesm2020/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs.map +1 -1
  45. package/fesm2020/spicainternational-ngx-sds-components-src-lib-avatar.mjs +15 -13
  46. package/fesm2020/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map +1 -1
  47. package/fesm2020/spicainternational-ngx-sds-components-src-lib-color-picker.mjs +1 -1
  48. package/fesm2020/spicainternational-ngx-sds-components-src-lib-color-picker.mjs.map +1 -1
  49. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +35 -19
  50. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  51. package/fesm2020/spicainternational-ngx-sds-components-src-lib-layout.mjs +112 -0
  52. package/fesm2020/spicainternational-ngx-sds-components-src-lib-layout.mjs.map +1 -0
  53. package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs +6 -3
  54. package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
  55. package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs +45 -0
  56. package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map +1 -0
  57. package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +48 -7
  58. package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
  59. package/fesm2020/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map +1 -1
  60. package/fesm2020/spicainternational-ngx-sds-components.mjs +2 -0
  61. package/fesm2020/spicainternational-ngx-sds-components.mjs.map +1 -1
  62. package/package.json +17 -1
  63. package/public-api.d.ts +2 -0
  64. package/src/lib/date-picker/date-picker.component.d.ts +4 -1
  65. package/src/lib/date-picker/sds-date-picker.service.d.ts +1 -1
  66. package/src/lib/layout/default-layout/default-layout.component.d.ts +8 -0
  67. package/src/lib/layout/extra-large-layout/extra-large-layout.component.d.ts +8 -0
  68. package/src/lib/layout/fluid-layout/fluid-layout.component.d.ts +8 -0
  69. package/src/lib/layout/layout.module.d.ts +13 -0
  70. package/src/lib/layout/medium-layout/medium-layout.component.d.ts +8 -0
  71. package/src/lib/layout/package.json +10 -0
  72. package/src/lib/layout/public-api.d.ts +6 -0
  73. package/src/lib/layout/small-layout/small-layout.component.d.ts +8 -0
  74. package/src/lib/layout/spicainternational-ngx-sds-components-src-lib-layout.d.ts +5 -0
  75. package/src/lib/modal/modal.component.d.ts +2 -1
  76. package/src/lib/page-header/package.json +10 -0
  77. package/src/lib/page-header/page-header.component.d.ts +10 -0
  78. package/src/lib/page-header/page-header.module.d.ts +8 -0
  79. package/src/lib/page-header/public-api.d.ts +2 -0
  80. package/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.d.ts +5 -0
  81. package/src/lib/quick-info/quick-info.component.d.ts +21 -4
  82. package/src/lib/segmented-control/segmented-control.component.d.ts +1 -1
package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
3
- import * as i6 from '@angular/common';
3
+ import * as i5 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from 'devextreme-angular';
6
6
  import { DxDateBoxModule, DxPopoverModule, DxScrollViewModule, DxCalendarModule, DxDropDownButtonModule, DxDropDownBoxModule, DxSelectBoxModule, DxListModule } from 'devextreme-angular';
@@ -10,7 +10,7 @@ import { faArrowRight } from '@fortawesome/pro-light-svg-icons';
10
10
  import * as i3 from '@fortawesome/angular-fontawesome';
11
11
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
12
12
  import * as i4 from 'devextreme-angular/ui/nested';
13
- import * as i5 from 'devextreme-angular/core';
13
+ import * as i6 from 'devextreme-angular/core';
14
14
 
15
15
  class DateRangeTranslations {
16
16
  constructor() {
@@ -73,7 +73,7 @@ class SdsDatePickerService {
73
73
  }
74
74
  return [dateStart, dateEnd];
75
75
  }
76
- getPredefinedDateRanges(dateRangeDefinitions, referenceDay) {
76
+ getPredefinedDateRanges(dateRangeDefinitions, referenceDay, firstDayOfWeek) {
77
77
  let predefinedDateRanges = new Array();
78
78
  referenceDay = startOfDay(referenceDay);
79
79
  dateRangeDefinitions.forEach((definition) => {
@@ -95,8 +95,8 @@ class SdsDatePickerService {
95
95
  dateTo = addDays(referenceDay, dateRangeDefinition.modifier);
96
96
  break;
97
97
  case 'w':
98
- dateFrom = startOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier));
99
- dateTo = endOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier));
98
+ dateFrom = startOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
99
+ dateTo = endOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
100
100
  break;
101
101
  case 'm':
102
102
  dateFrom = startOfMonth(addMonths(referenceDay, dateRangeDefinition.modifier));
@@ -149,6 +149,8 @@ class SdsDatePickerComponent {
149
149
  this.occupiedDays = [];
150
150
  this.applyText = 'close';
151
151
  this.cancelText = 'close';
152
+ this.firstDayOfWeek = 1;
153
+ this.dateRangeDefinitionsWidth = '10rem';
152
154
  // public properties
153
155
  this.previousPeriodIcon = faAngleLeft;
154
156
  this.nextPeriodIcon = faAngleRight;
@@ -179,6 +181,7 @@ class SdsDatePickerComponent {
179
181
  return (data.view === 'month' &&
180
182
  this.occupiedDays.some((date) => isSameDay(date, data.date)));
181
183
  };
184
+ this.dateRangeDefinitions = [];
182
185
  this.minDateDefault = new Date(1900, 1, 1);
183
186
  this.maxDateDefault = add(startOfDay(new Date()), { years: 50 });
184
187
  this.showDatepicker = false;
@@ -220,7 +223,6 @@ class SdsDatePickerComponent {
220
223
  this.dateEndOld = this.selectedDateEnd;
221
224
  }
222
225
  if (changes['selectedDate']) {
223
- console.log('selectedDate changed');
224
226
  const value = changes['selectedDate'].currentValue;
225
227
  this.selectedDateInternal = startOfDay(value);
226
228
  if (this.selectionKind == 'single') {
@@ -293,6 +295,9 @@ class SdsDatePickerComponent {
293
295
  }
294
296
  }
295
297
  }
298
+ if (changes['firstDayOfWeek']) {
299
+ this.generateDateRanges(true);
300
+ }
296
301
  }
297
302
  get selectedDateStartFocus() {
298
303
  return this.selectedDateFocus;
@@ -381,6 +386,8 @@ class SdsDatePickerComponent {
381
386
  });
382
387
  }
383
388
  else {
389
+ this.dateStartOld = this.selectedDateStart;
390
+ this.dateEndOld = this.selectedDateEnd;
384
391
  this.isSettingNotPreprocessedDate = true;
385
392
  setTimeout(() => {
386
393
  this.selectedDateStartBox?.instance.focus();
@@ -419,10 +426,10 @@ class SdsDatePickerComponent {
419
426
  else {
420
427
  const dateStartNew = new Date(this.selectedDateStart);
421
428
  const dateEndNew = new Date(this.selectedDateEnd);
422
- const startDateChanged = this.dateStartOld instanceof Date &&
423
- !isSameDay(this.dateStartOld, dateStartNew);
424
- const endDateChanged = this.dateEndOld instanceof Date &&
425
- !isSameDay(this.dateEndOld, dateEndNew);
429
+ const startDateChanged = (this.dateStartOld instanceof Date && !isSameDay(this.dateStartOld, dateStartNew)) ||
430
+ (typeof this.dateStartOld === 'string' && this.dateStartOld === '');
431
+ const endDateChanged = (this.dateEndOld instanceof Date && !isSameDay(this.dateEndOld, dateEndNew)) ||
432
+ (typeof this.dateEndOld === 'string' && this.dateEndOld === '');
426
433
  if (startDateChanged) {
427
434
  this.dateStartOld = new Date(this.selectedDateStart);
428
435
  this.selectedDateStartChange.emit(this.selectedDateStart);
@@ -475,19 +482,21 @@ class SdsDatePickerComponent {
475
482
  this.setSelectedDate(range[0], range[1]);
476
483
  }
477
484
  getCellCssClass(date) {
478
- const calendarDate = date;
485
+ const calendarDate = new Date(date);
479
486
  let css = '';
480
487
  if (this.selectionKind == 'period') {
481
- if (isAfter(calendarDate, startOfDay(this.selectedDateStart)) &&
482
- isBefore(calendarDate, startOfDay(this.selectedDateEnd)) &&
488
+ const selectedDateStartAsDate = new Date(this.selectedDateStart);
489
+ const selectedDateEndAsDate = new Date(this.selectedDateEnd);
490
+ if (isAfter(calendarDate, startOfDay(selectedDateStartAsDate)) &&
491
+ isBefore(calendarDate, startOfDay(selectedDateEndAsDate)) &&
483
492
  !this.occupiedDays.some((day) => isSameDay(calendarDate, day))) {
484
493
  css += ' bg-secondary text-dark rounded-0';
485
494
  }
486
495
  else {
487
- if (isSameDay(calendarDate, this.selectedDateStart)) {
496
+ if (isSameDay(calendarDate, selectedDateStartAsDate)) {
488
497
  css += ' bg-primary text-white rounded-left';
489
498
  }
490
- if (isSameDay(calendarDate, this.selectedDateEnd)) {
499
+ if (isSameDay(calendarDate, selectedDateEndAsDate)) {
491
500
  css += ' bg-primary text-white rounded-right';
492
501
  }
493
502
  }
@@ -501,6 +510,10 @@ class SdsDatePickerComponent {
501
510
  element?.classList?.remove('dx-calendar-selected-date');
502
511
  }
503
512
  }
513
+ onContentReady(e) {
514
+ var contentElement = e.component.content();
515
+ contentElement.style.padding = '0';
516
+ }
504
517
  toggleDateRangeSelectorVisibility() {
505
518
  if (!this.showPredefinedOptionsSelector) {
506
519
  this.generateDateRanges();
@@ -512,7 +525,6 @@ class SdsDatePickerComponent {
512
525
  this.showPredefinedOptionsSelector = false;
513
526
  this.selectedDateRange = range;
514
527
  if (range === this.customDateRange) {
515
- console.log('open popup');
516
528
  this.openDatepickerPopup();
517
529
  }
518
530
  else {
@@ -601,7 +613,7 @@ class SdsDatePickerComponent {
601
613
  !isSameDay(this.predefinedDateRangesGeneratedDate, today)) {
602
614
  this.predefinedDateRangesGeneratedDate = today;
603
615
  this.predefinedDateRanges =
604
- this.datePickerService.getPredefinedDateRanges(this.dateRangeDefinitions, today);
616
+ this.datePickerService.getPredefinedDateRanges(this.dateRangeDefinitions, today, this.firstDayOfWeek);
605
617
  this.dateRanges = [...this.predefinedDateRanges];
606
618
  this.dateRanges.push(this.customDateRange);
607
619
  }
@@ -613,10 +625,10 @@ class SdsDatePickerComponent {
613
625
  }
614
626
  }
615
627
  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 });
616
- 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", applyText: "applyText", cancelText: "cancelText", translations: "translations" }, 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 {{ translations.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 {{ 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}#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 });
628
+ 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", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth" }, 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 *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-0 border-color-muted\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 class=\"btn btn-white border rounded-0 border-end-0 border-color-muted pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border 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 [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\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 {{ translations.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 {{ 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}#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}.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}\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 });
617
629
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
618
630
  type: Component,
619
- 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 {{ translations.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 {{ 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}#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"] }]
631
+ 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 *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-0 border-color-muted\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 class=\"btn btn-white border rounded-0 border-end-0 border-color-muted pe-2\"\r\n [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border 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 [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\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 {{ translations.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 {{ 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}#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}.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}\n"] }]
620
632
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
621
633
  type: Input
622
634
  }], dateRangeDefinitions: [{
@@ -657,6 +669,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
657
669
  type: Input
658
670
  }], translations: [{
659
671
  type: Input
672
+ }], firstDayOfWeek: [{
673
+ type: Input
674
+ }], dateRangeDefinitionsWidth: [{
675
+ type: Input
660
676
  }], singleDatePickerBox: [{
661
677
  type: ViewChild,
662
678
  args: ['singleDatePickerBox', { static: false }]