@spicainternational/ngx-sds-components 2.11.1 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/date-picker/date-picker.component.mjs +8 -5
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +7 -4
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +7 -4
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/date-picker/date-picker.component.d.ts +2 -1
|
@@ -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
|
|
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
|
|
13
|
+
import * as i6 from 'devextreme-angular/core';
|
|
14
14
|
|
|
15
15
|
class DateRangeTranslations {
|
|
16
16
|
constructor() {
|
|
@@ -150,6 +150,7 @@ class SdsDatePickerComponent {
|
|
|
150
150
|
this.applyText = 'close';
|
|
151
151
|
this.cancelText = 'close';
|
|
152
152
|
this.firstDayOfWeek = 1;
|
|
153
|
+
this.dateRangeDefinitionsWidth = '10rem';
|
|
153
154
|
// public properties
|
|
154
155
|
this.previousPeriodIcon = faAngleLeft;
|
|
155
156
|
this.nextPeriodIcon = faAngleRight;
|
|
@@ -624,10 +625,10 @@ class SdsDatePickerComponent {
|
|
|
624
625
|
}
|
|
625
626
|
}
|
|
626
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 });
|
|
627
|
-
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" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-left\r\n border-right-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [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-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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.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-left\r\n border-right-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 >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n [class.rounded-left] = \"!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-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [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-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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 });
|
|
628
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
629
630
|
type: Component,
|
|
630
|
-
args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"datepickerbuttons\">\r\n <div\r\n class=\"d-flex\"\r\n role=\"group\"\r\n aria-label=\"Date picker\"\r\n >\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-left\r\n border-right-0 border-color-muted\r\n dropdown-toggle\r\n preselect-options-fixed-width\r\n text-truncate\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n {{selectedDateRange.name}}\r\n </button>\r\n\r\n <dx-popover\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n type=\"button\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [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-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
|
|
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-left\r\n border-right-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 >\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <div *ngFor=\"let range of dateRanges\">\r\n <button\r\n class=\"dropdown-item\"\r\n [class.font-weight-500]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n > {{range.name}}\r\n </button>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n [class.rounded-left] = \"!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-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n [class.w-100]=\"!!!fixedWidth\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n [style.width.px]=\"fixedWidth\"\r\n >\r\n <div\r\n *ngIf=\"true || this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-center align-items-center\"\r\n >\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n type=\"button\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"closeDatepickerPopup()\"\r\n class=\"m-0 p-0\"\r\n >\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view>\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateStart\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateEnd\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n displayFormat=\"shortdate\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n (onValueChanged)=\"closeDatepickerPopup()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [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-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
|
|
631
632
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
|
|
632
633
|
type: Input
|
|
633
634
|
}], dateRangeDefinitions: [{
|
|
@@ -670,6 +671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
670
671
|
type: Input
|
|
671
672
|
}], firstDayOfWeek: [{
|
|
672
673
|
type: Input
|
|
674
|
+
}], dateRangeDefinitionsWidth: [{
|
|
675
|
+
type: Input
|
|
673
676
|
}], singleDatePickerBox: [{
|
|
674
677
|
type: ViewChild,
|
|
675
678
|
args: ['singleDatePickerBox', { static: false }]
|