@spicainternational/ngx-sds-components 8.7.3 → 8.7.4
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.
|
@@ -9,7 +9,7 @@ import { DxDateBoxModule, DxCalendarModule } from 'devextreme-angular';
|
|
|
9
9
|
import * as i6 from 'devextreme-angular/ui/scroll-view';
|
|
10
10
|
import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
|
|
11
11
|
import * as i4 from 'devextreme-angular/ui/nested';
|
|
12
|
-
import { DxoAnimationModule, DxoShowModule, DxoHideModule } from 'devextreme-angular/ui/nested';
|
|
12
|
+
import { DxoAnimationModule, DxoShowModule, DxoHideModule, DxoPositionModule } from 'devextreme-angular/ui/nested';
|
|
13
13
|
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
14
14
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
15
15
|
import * as i5 from 'devextreme-angular/core';
|
|
@@ -915,7 +915,7 @@ class SdsDatePickerComponent {
|
|
|
915
915
|
}
|
|
916
916
|
}
|
|
917
917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
918
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsDatePickerComponent, isStandalone: true, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange", predefinedRangeSelected: "predefinedRangeSelected", calendarVisibleChange: "calendarVisibleChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\n <div\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\n role=\"group\"\n [attr.aria-label]=\"componentAriaLabel\"\n [style.width]=\"width\"\n >\n\n <ng-container *ngIf=\"style == 'classic'\">\n <div\n class=\"btn-group\"\n role=\"group\"\n >\n <button\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n type=\"button\"\n class=\"\n btn btn-white\n border\n rounded-start\n border-end\n p-0\n sds-fw-400\"\n [disabled]=\"disabled\"\n [style.width]=\"dateRangeDefinitionsWidth\"\n (click)=\"toggleDateRangeSelectorVisibility()\"\n >\n <div class=\"d-flex align-items-center\">\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n {{selectedDateRange.name}}\n </div>\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n <span class=\"dropdown-toggle\"></span>\n </button>\n </div>\n\n </button>\n\n <dx-popover\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showPredefinedOptionsSelector\"\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n [minWidth]=\"dateRangeDefinitionsWidth\"\n\n >\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n <div *ngFor=\"let range of dateRanges\">\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n (keydown)=\"onRangeKeyReleased($event, range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n </dx-popover>\n </div>\n </ng-container>\n\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n type=\"button\"\n [attr.aria-label]=\"previousPeriodAriaLabel\"\n [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n (click)=\"goToPreviousDate()\"\n >\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n </button>\n\n <button\n #selectedDateRangeButton\n id=\"pickerDropdown{{ randomIdReference }}\"\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\n [class.border-end] = \"!showPreviousAndNextButtons\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"showDatepicker = !showDatepicker\"\n >\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeName}}</span>\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </button>\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n type=\"button\"\n [attr.aria-label]=\"nextPeriodAriaLabel\"\n [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n (click)=\"goToNextDate()\"\n >\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n </button>\n </div>\n\n <div class=\"sds-print-only h-100\">\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </div>\n\n<dx-popover\n target=\"#pickerDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showDatepicker\"\n (onHiding)=\"onHiddenCalendarPopover()\"\n (onShowing)=\"onShowingCalendarPopover()\"\n class=\"m-0 p-0\"\n [wrapperAttr]=\"{\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\n id: dropdownWrapperId\n }\"\n>\n <dxo-animation>\n <dxo-show\n type=\"pop\"\n [from]=\"{ scale: 0.9 }\"\n [to]=\"{ scale: 1 }\"\n ></dxo-show>\n <dxo-hide\n type=\"fade\"\n [from]=\"1\"\n [to]=\"0\"\n ></dxo-hide>\n </dxo-animation>\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n <dx-scroll-view>\n <div class=\"d-flex flex-row\">\n\n <div\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n class=\"d-flex flex-column p-3 bg-gray-100\"\n style=\"border-right: 1px solid var(--bs-gray-200)\"\n >\n <div\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n <label>{{ translations.presets }}</label>\n </div>\n <div *ngFor=\"let range of dateRanges\">\n <div\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n\n\n <div id=\"datepickercomponent\">\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n >\n <div class=\"d-flex justify-content-between align-items-center\">\n <dx-date-box\n #selectedDateStartBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateStart\"\n (onValueChanged)=\"onStartDateChange($event)\"\n (onFocusIn)=\"onStartDateFocus()\"\n >\n </dx-date-box>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center px-2\">\n <fa-icon [icon]=\"toIcon\"></fa-icon>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #selectedDateEndBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"!selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateEnd\"\n (onValueChanged)=\"onEndDateChange($event)\"\n (onFocusIn)=\"onEndDateFocus()\"\n >\n </dx-date-box>\n </div>\n </div>\n\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n <div\n *ngIf=\"this.selectionKind == 'single'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n >\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #singleDatePickerBox\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n [class.activeInput]=\"true\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [(value)]=\"selectedDateInternal\"\n >\n </dx-date-box>\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center align-items-center\"\n (click)=\"selectEndDate($event)\">\n\n <dx-calendar\n #calendar\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [disabledDates]=\"isDateDisabled\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n (onValueChanged)=\"onDateChange($event)\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n >\n <div\n *dxTemplate=\"let cellData of 'cell'\"\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n [style.line-height.px]=\"23\"\n\n >\n\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n <ng-template #thenLockBlock>\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\n </ng-template>\n <ng-template #elseDefaultBlock>\n {{ cellData.text }}\n </ng-template>\n </div>\n </dx-calendar>\n </div>\n </div>\n\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n >\n <button\n class=\"sds-btn-secondary sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"showDatepicker = false\"\n type=\"button\"\n >\n {{ translations.cancel}}\n </button>\n <!-- (click)=\"closeDatepickerPopup()\" -->\n <button\n class=\"sds-btn-primary ms-1 sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"applyPeriodPicker()\"\n type=\"button\"\n >\n {{ translations.apply}}\n </button>\n </div>\n </div>\n </div>\n </dx-scroll-view>\n </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SdsDateComparePipe, name: "sdsDateCompare" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxTemplateModule }, { kind: "ngmodule", type: DxoAnimationModule }, { kind: "ngmodule", type: DxoShowModule }, { kind: "ngmodule", type: DxoHideModule }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i6.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"] }, { kind: "ngmodule", type: DxDateBoxModule }, { kind: "component", type: i7.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", "isDirty", "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", "isDirtyChange", "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"] }, { kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i7.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "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", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsDatePickerComponent, isStandalone: true, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange", predefinedRangeSelected: "predefinedRangeSelected", calendarVisibleChange: "calendarVisibleChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\n <div\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\n role=\"group\"\n [attr.aria-label]=\"componentAriaLabel\"\n [style.width]=\"width\"\n >\n\n <ng-container *ngIf=\"style == 'classic'\">\n <div\n class=\"btn-group\"\n role=\"group\"\n >\n <button\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n type=\"button\"\n class=\"\n btn btn-white\n border\n rounded-start\n border-end\n p-0\n sds-fw-400\"\n [disabled]=\"disabled\"\n [style.width]=\"dateRangeDefinitionsWidth\"\n (click)=\"toggleDateRangeSelectorVisibility()\"\n >\n <div class=\"d-flex align-items-center\">\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n {{selectedDateRange.name}}\n </div>\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n <span class=\"dropdown-toggle\"></span>\n </button>\n </div>\n\n </button>\n\n <dx-popover\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showPredefinedOptionsSelector\"\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n [minWidth]=\"dateRangeDefinitionsWidth\"\n\n >\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n <div *ngFor=\"let range of dateRanges\">\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n (keydown)=\"onRangeKeyReleased($event, range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n </dx-popover>\n </div>\n </ng-container>\n\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n type=\"button\"\n [attr.aria-label]=\"previousPeriodAriaLabel\"\n [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n (click)=\"goToPreviousDate()\"\n >\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n </button>\n\n <button\n #selectedDateRangeButton\n id=\"pickerDropdown{{ randomIdReference }}\"\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\n [class.border-end] = \"!showPreviousAndNextButtons\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"showDatepicker = !showDatepicker\"\n >\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeName}}</span>\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </button>\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n type=\"button\"\n [attr.aria-label]=\"nextPeriodAriaLabel\"\n [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n (click)=\"goToNextDate()\"\n >\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n </button>\n </div>\n\n <div class=\"sds-print-only h-100\">\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </div>\n\n<dx-popover\n target=\"#pickerDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showDatepicker\"\n (onHiding)=\"onHiddenCalendarPopover()\"\n (onShowing)=\"onShowingCalendarPopover()\"\n class=\"m-0 p-0\"\n [wrapperAttr]=\"{\n class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\n id: dropdownWrapperId\n }\"\n>\n <dxo-animation>\n <dxo-show\n type=\"pop\"\n [from]=\"{ scale: 0.9 }\"\n [to]=\"{ scale: 1 }\"\n ></dxo-show>\n <dxo-hide\n type=\"fade\"\n [from]=\"1\"\n [to]=\"0\"\n ></dxo-hide>\n </dxo-animation>\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n <dx-scroll-view>\n <div class=\"d-flex flex-row\">\n\n <div\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\n style=\"border-right: 1px solid var(--bs-gray-200)\"\n >\n <div\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n <label>{{ translations.presets }}</label>\n </div>\n <div *ngFor=\"let range of dateRanges\">\n <div\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n\n\n <div id=\"datepickercomponent\">\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n >\n <div class=\"d-flex justify-content-between align-items-center\">\n <dx-date-box\n #selectedDateStartBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateStart\"\n (onValueChanged)=\"onStartDateChange($event)\"\n (onFocusIn)=\"onStartDateFocus()\"\n >\n </dx-date-box>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center px-2\">\n <fa-icon [icon]=\"toIcon\"></fa-icon>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #selectedDateEndBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"!selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateEnd\"\n (onValueChanged)=\"onEndDateChange($event)\"\n (onFocusIn)=\"onEndDateFocus()\"\n >\n </dx-date-box>\n </div>\n </div>\n\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n <div\n *ngIf=\"this.selectionKind == 'single'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n >\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #singleDatePickerBox\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n [class.activeInput]=\"true\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [(value)]=\"selectedDateInternal\"\n >\n </dx-date-box>\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center align-items-center\"\n (click)=\"selectEndDate($event)\">\n\n <dx-calendar\n #calendar\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [disabledDates]=\"isDateDisabled\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n (onValueChanged)=\"onDateChange($event)\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n >\n <div\n *dxTemplate=\"let cellData of 'cell'\"\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n [style.line-height.px]=\"23\"\n\n >\n\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n <ng-template #thenLockBlock>\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\n </ng-template>\n <ng-template #elseDefaultBlock>\n {{ cellData.text }}\n </ng-template>\n </div>\n </dx-calendar>\n </div>\n </div>\n\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n >\n <button\n class=\"sds-btn-secondary sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"showDatepicker = false\"\n type=\"button\"\n >\n {{ translations.cancel}}\n </button>\n <!-- (click)=\"closeDatepickerPopup()\" -->\n <button\n class=\"sds-btn-primary ms-1 sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"applyPeriodPicker()\"\n type=\"button\"\n >\n {{ translations.apply}}\n </button>\n </div>\n </div>\n </div>\n </dx-scroll-view>\n </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SdsDateComparePipe, name: "sdsDateCompare" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxTemplateModule }, { kind: "ngmodule", type: DxoAnimationModule }, { kind: "ngmodule", type: DxoShowModule }, { kind: "ngmodule", type: DxoHideModule }, { kind: "ngmodule", type: DxoPositionModule }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i6.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"] }, { kind: "ngmodule", type: DxDateBoxModule }, { kind: "component", type: i7.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", "isDirty", "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", "isDirtyChange", "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"] }, { kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i7.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "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", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
919
919
|
}
|
|
920
920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
921
921
|
type: Component,
|
|
@@ -930,10 +930,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
930
930
|
DxoAnimationModule,
|
|
931
931
|
DxoShowModule,
|
|
932
932
|
DxoHideModule,
|
|
933
|
+
DxoPositionModule,
|
|
933
934
|
DxScrollViewModule,
|
|
934
935
|
DxDateBoxModule,
|
|
935
936
|
DxCalendarModule,
|
|
936
|
-
], template: "<!-- <div id=\"datepickerbuttons\"> -->\n <div\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\n role=\"group\"\n [attr.aria-label]=\"componentAriaLabel\"\n [style.width]=\"width\"\n >\n\n <ng-container *ngIf=\"style == 'classic'\">\n <div\n class=\"btn-group\"\n role=\"group\"\n >\n <button\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n type=\"button\"\n class=\"\n btn btn-white\n border\n rounded-start\n border-end\n p-0\n sds-fw-400\"\n [disabled]=\"disabled\"\n [style.width]=\"dateRangeDefinitionsWidth\"\n (click)=\"toggleDateRangeSelectorVisibility()\"\n >\n <div class=\"d-flex align-items-center\">\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n {{selectedDateRange.name}}\n </div>\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n <span class=\"dropdown-toggle\"></span>\n </button>\n </div>\n\n </button>\n\n <dx-popover\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showPredefinedOptionsSelector\"\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n [minWidth]=\"dateRangeDefinitionsWidth\"\n\n >\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n <div *ngFor=\"let range of dateRanges\">\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n (keydown)=\"onRangeKeyReleased($event, range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n </dx-popover>\n </div>\n </ng-container>\n\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n type=\"button\"\n [attr.aria-label]=\"previousPeriodAriaLabel\"\n [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n (click)=\"goToPreviousDate()\"\n >\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n </button>\n\n <button\n #selectedDateRangeButton\n id=\"pickerDropdown{{ randomIdReference }}\"\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\n [class.border-end] = \"!showPreviousAndNextButtons\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"showDatepicker = !showDatepicker\"\n >\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeName}}</span>\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </button>\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n type=\"button\"\n [attr.aria-label]=\"nextPeriodAriaLabel\"\n [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n (click)=\"goToNextDate()\"\n >\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n </button>\n </div>\n\n <div class=\"sds-print-only h-100\">\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </div>\n\n<dx-popover\n target=\"#pickerDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showDatepicker\"\n (onHiding)=\"onHiddenCalendarPopover()\"\n (onShowing)=\"onShowingCalendarPopover()\"\n class=\"m-0 p-0\"\n [wrapperAttr]=\"{\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\n id: dropdownWrapperId\n }\"\n>\n <dxo-animation>\n <dxo-show\n type=\"pop\"\n [from]=\"{ scale: 0.9 }\"\n [to]=\"{ scale: 1 }\"\n ></dxo-show>\n <dxo-hide\n type=\"fade\"\n [from]=\"1\"\n [to]=\"0\"\n ></dxo-hide>\n </dxo-animation>\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n <dx-scroll-view>\n <div class=\"d-flex flex-row\">\n\n <div\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n class=\"d-flex flex-column p-3 bg-gray-100\"\n style=\"border-right: 1px solid var(--bs-gray-200)\"\n >\n <div\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n <label>{{ translations.presets }}</label>\n </div>\n <div *ngFor=\"let range of dateRanges\">\n <div\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n\n\n <div id=\"datepickercomponent\">\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n >\n <div class=\"d-flex justify-content-between align-items-center\">\n <dx-date-box\n #selectedDateStartBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateStart\"\n (onValueChanged)=\"onStartDateChange($event)\"\n (onFocusIn)=\"onStartDateFocus()\"\n >\n </dx-date-box>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center px-2\">\n <fa-icon [icon]=\"toIcon\"></fa-icon>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #selectedDateEndBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"!selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateEnd\"\n (onValueChanged)=\"onEndDateChange($event)\"\n (onFocusIn)=\"onEndDateFocus()\"\n >\n </dx-date-box>\n </div>\n </div>\n\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n <div\n *ngIf=\"this.selectionKind == 'single'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n >\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #singleDatePickerBox\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n [class.activeInput]=\"true\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [(value)]=\"selectedDateInternal\"\n >\n </dx-date-box>\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center align-items-center\"\n (click)=\"selectEndDate($event)\">\n\n <dx-calendar\n #calendar\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [disabledDates]=\"isDateDisabled\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n (onValueChanged)=\"onDateChange($event)\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n >\n <div\n *dxTemplate=\"let cellData of 'cell'\"\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n [style.line-height.px]=\"23\"\n\n >\n\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n <ng-template #thenLockBlock>\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\n </ng-template>\n <ng-template #elseDefaultBlock>\n {{ cellData.text }}\n </ng-template>\n </div>\n </dx-calendar>\n </div>\n </div>\n\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n >\n <button\n class=\"sds-btn-secondary sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"showDatepicker = false\"\n type=\"button\"\n >\n {{ translations.cancel}}\n </button>\n <!-- (click)=\"closeDatepickerPopup()\" -->\n <button\n class=\"sds-btn-primary ms-1 sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"applyPeriodPicker()\"\n type=\"button\"\n >\n {{ translations.apply}}\n </button>\n </div>\n </div>\n </div>\n </dx-scroll-view>\n </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
|
|
937
|
+
], template: "<!-- <div id=\"datepickerbuttons\"> -->\n <div\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\n role=\"group\"\n [attr.aria-label]=\"componentAriaLabel\"\n [style.width]=\"width\"\n >\n\n <ng-container *ngIf=\"style == 'classic'\">\n <div\n class=\"btn-group\"\n role=\"group\"\n >\n <button\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n type=\"button\"\n class=\"\n btn btn-white\n border\n rounded-start\n border-end\n p-0\n sds-fw-400\"\n [disabled]=\"disabled\"\n [style.width]=\"dateRangeDefinitionsWidth\"\n (click)=\"toggleDateRangeSelectorVisibility()\"\n >\n <div class=\"d-flex align-items-center\">\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n {{selectedDateRange.name}}\n </div>\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n <span class=\"dropdown-toggle\"></span>\n </button>\n </div>\n\n </button>\n\n <dx-popover\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showPredefinedOptionsSelector\"\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n [minWidth]=\"dateRangeDefinitionsWidth\"\n\n >\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n <div *ngFor=\"let range of dateRanges\">\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n (keydown)=\"onRangeKeyReleased($event, range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n </dx-popover>\n </div>\n </ng-container>\n\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n type=\"button\"\n [attr.aria-label]=\"previousPeriodAriaLabel\"\n [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n (click)=\"goToPreviousDate()\"\n >\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n </button>\n\n <button\n #selectedDateRangeButton\n id=\"pickerDropdown{{ randomIdReference }}\"\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\n [class.border-end] = \"!showPreviousAndNextButtons\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"showDatepicker = !showDatepicker\"\n >\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeName}}</span>\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </button>\n\n <button\n *ngIf=\"showPreviousAndNextButtons\"\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n type=\"button\"\n [attr.aria-label]=\"nextPeriodAriaLabel\"\n [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n (click)=\"goToNextDate()\"\n >\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n </button>\n </div>\n\n <div class=\"sds-print-only h-100\">\n\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n <div *ngIf=\"!useCustomDisplayContent\"\n class=\"d-flex justify-content-center align-items-center\">\n <!-- <div class=\"mx-1\">\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n </div> -->\n <div class=\"mx-1 text-truncate\">\n <span>{{selectedDateRangeTextSegment1}}</span>\n <fa-icon\n *ngIf=\"selectedDateRangeTextSegment2\"\n class=\"mx-2\"\n [icon]=\"toIcon\"\n size=\"sm\"\n ></fa-icon>\n <span>{{selectedDateRangeTextSegment2}}</span>\n </div>\n </div>\n </div>\n\n<dx-popover\n target=\"#pickerDropdown{{ randomIdReference }}\"\n position=\"bottom\"\n [(visible)]=\"showDatepicker\"\n (onHiding)=\"onHiddenCalendarPopover()\"\n (onShowing)=\"onShowingCalendarPopover()\"\n class=\"m-0 p-0\"\n [wrapperAttr]=\"{\n class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\n id: dropdownWrapperId\n }\"\n>\n <dxo-animation>\n <dxo-show\n type=\"pop\"\n [from]=\"{ scale: 0.9 }\"\n [to]=\"{ scale: 1 }\"\n ></dxo-show>\n <dxo-hide\n type=\"fade\"\n [from]=\"1\"\n [to]=\"0\"\n ></dxo-hide>\n </dxo-animation>\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n <dx-scroll-view>\n <div class=\"d-flex flex-row\">\n\n <div\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\n style=\"border-right: 1px solid var(--bs-gray-200)\"\n >\n <div\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n <label>{{ translations.presets }}</label>\n </div>\n <div *ngFor=\"let range of dateRanges\">\n <div\n class=\"predefined-date-range px-3 py-2 w-100\"\n [class.selected]=\"range === selectedDateRange\"\n (click)=\"changDateRange(range)\"\n >\n {{range.name}}\n </div>\n </div>\n </div>\n\n\n <div id=\"datepickercomponent\">\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n >\n <div class=\"d-flex justify-content-between align-items-center\">\n <dx-date-box\n #selectedDateStartBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateStart\"\n (onValueChanged)=\"onStartDateChange($event)\"\n (onFocusIn)=\"onStartDateFocus()\"\n >\n </dx-date-box>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center px-2\">\n <fa-icon [icon]=\"toIcon\"></fa-icon>\n </div>\n\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #selectedDateEndBox\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\n [class.activeInput]=\"!selectedDateFocus\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"selectedDateEnd\"\n (onValueChanged)=\"onEndDateChange($event)\"\n (onFocusIn)=\"onEndDateFocus()\"\n >\n </dx-date-box>\n </div>\n </div>\n\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n <div\n *ngIf=\"this.selectionKind == 'single'\"\n id=\"date-inputs\"\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n >\n <div class=\"d-flex justify-content-center align-items-center\">\n <dx-date-box\n #singleDatePickerBox\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n [class.activeInput]=\"true\"\n [showClearButton]=\"false\"\n [showDropDownButton]=\"false\"\n [useMaskBehavior]=\"true\"\n [displayFormat]=\"dateInputDisplayFormat\"\n type=\"date\"\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [(value)]=\"selectedDateInternal\"\n >\n </dx-date-box>\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center align-items-center\"\n (click)=\"selectEndDate($event)\">\n\n <dx-calendar\n #calendar\n [min]=\"minDate || minDateDefault\"\n [max]=\"maxDate || maxDateDefault\"\n [disabledDates]=\"isDateDisabled\"\n [isValid]=\"isValid\"\n [validationError]=\"validationError\"\n [disabled]=\"disabled\"\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n (onValueChanged)=\"onDateChange($event)\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n >\n <div\n *dxTemplate=\"let cellData of 'cell'\"\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n [style.line-height.px]=\"23\"\n\n >\n\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n <ng-template #thenLockBlock>\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\n </ng-template>\n <ng-template #elseDefaultBlock>\n {{ cellData.text }}\n </ng-template>\n </div>\n </dx-calendar>\n </div>\n </div>\n\n <div\n *ngIf=\"this.selectionKind == 'period'\"\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n >\n <button\n class=\"sds-btn-secondary sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"showDatepicker = false\"\n type=\"button\"\n >\n {{ translations.cancel}}\n </button>\n <!-- (click)=\"closeDatepickerPopup()\" -->\n <button\n class=\"sds-btn-primary ms-1 sds-fw-400\"\n [disabled]=\"disabled\"\n (click)=\"applyPeriodPicker()\"\n type=\"button\"\n >\n {{ translations.apply}}\n </button>\n </div>\n </div>\n </div>\n </dx-scroll-view>\n </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
|
|
937
938
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }], propDecorators: { displayContent: [{
|
|
938
939
|
type: ContentChild,
|
|
939
940
|
args: ['display']
|