@spicainternational/ngx-sds-components 7.12.0-beta.2 → 8.0.0

package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs

@@ -1,1064 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ContentChild, Input, Output, ViewChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i5 from 'devextreme-angular';
-import { DxDateBoxModule, DxPopoverModule, DxScrollViewModule, DxCalendarModule, DxDropDownButtonModule, DxDropDownBoxModule, DxSelectBoxModule, DxListModule } from 'devextreme-angular';
-import { locale } from 'devextreme/localization';
-import { isSameDay, startOfMonth, endOfMonth, isSameMonth, add, startOfDay, differenceInMonths, differenceInDays, startOfYear, addYears, endOfYear, addMonths, startOfWeek, addWeeks, endOfWeek, addDays, isBefore, isAfter, isSameYear } from 'date-fns';
-import { faAngleLeft, faAngleRight, faCalendar, faLock } from '@fortawesome/pro-regular-svg-icons';
-import { faArrowRight } from '@fortawesome/pro-light-svg-icons';
-import * as i2 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i4 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i6 from 'devextreme-angular/ui/nested';
-import * as i7 from 'devextreme-angular/core';
-import * as i8 from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
-import { SdsDatePipesModule } from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
-
-class DateRangeTranslations {
-    constructor() {
-        this.custom = '';
-    }
-}
-class PeriodPickerDateRangeDefinition {
-    constructor(name, type = 'fixed', dynamicDateRangeDefinition, dateFrom, dateTo) {
-        this.name = '';
-        this.type = 'fixed';
-        this.name = name;
-        this.type = type;
-        this.dynamicDateRangeDefinition = dynamicDateRangeDefinition;
-        this.dateFrom = dateFrom;
-        this.dateTo = dateTo;
-    }
-}
-class PeriodPickerDateRangeDynamicDefinition {
-    constructor(dimension, modifier) {
-        this.dimension = dimension;
-        this.modifier = modifier;
-    }
-}
-class PeriodPickerDateRange {
-    constructor(name, dateFrom, dateTo) {
-        this.name = name;
-        this.dateFrom = dateFrom;
-        this.dateTo = dateTo;
-    }
-}
-class PeriodPickerDynamicDateRangeDefinitionGenerator {
-    static generateMonthlyRanges(currentMonthText, previousMonthText, nextMonthText) {
-        const ranges = [];
-        if (currentMonthText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(currentMonthText, 'dynamic', { dimension: 'm', modifier: 0 }));
-        }
-        if (nextMonthText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(nextMonthText, 'dynamic', { dimension: 'm', modifier: 1 }));
-        }
-        if (previousMonthText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(previousMonthText, 'dynamic', { dimension: 'm', modifier: -1 }));
-        }
-        return ranges;
-    }
-    static generateWeeklyRanges(currentWeekText, previousWeekText, nextWeekText) {
-        const ranges = [];
-        if (currentWeekText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(currentWeekText, 'dynamic', { dimension: 'w', modifier: 0 }));
-        }
-        if (nextWeekText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(nextWeekText, 'dynamic', { dimension: 'w', modifier: 1 }));
-        }
-        if (previousWeekText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(previousWeekText, 'dynamic', { dimension: 'w', modifier: -1 }));
-        }
-        return ranges;
-    }
-    static generateDailyRanges(currentDayText, previousDayText, nextDayText) {
-        const ranges = [];
-        if (currentDayText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(currentDayText, 'dynamic', { dimension: 'd', modifier: 0 }));
-        }
-        if (nextDayText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(nextDayText, 'dynamic', { dimension: 'd', modifier: 1 }));
-        }
-        if (previousDayText) {
-            ranges.push(new PeriodPickerDateRangeDefinition(previousDayText, 'dynamic', { dimension: 'd', modifier: -1 }));
-        }
-        return ranges;
-    }
-}
-
-class SdsDatePickerService {
-    constructor() { }
-    getRange(currentStartDate, currentEndDate, direction) {
-        const modifier = direction == 'next' ? 1 : -1;
-        let dateStart, dateEnd;
-        if (isSameDay(currentStartDate, startOfMonth(currentStartDate)) &&
-            isSameDay(currentEndDate, endOfMonth(currentEndDate)) &&
-            isSameMonth(currentStartDate, currentEndDate)) {
-            // Month range.
-            dateStart = add(currentStartDate, { months: modifier });
-            dateEnd = startOfDay(endOfMonth(add(currentEndDate, { months: modifier })));
-        }
-        else {
-            // Custom range in months
-            if (isSameDay(currentStartDate, startOfMonth(currentStartDate)) &&
-                isSameDay(currentEndDate, endOfMonth(currentEndDate))) {
-                const monthsDiff = differenceInMonths(currentEndDate, currentStartDate) + 1;
-                dateStart = add(currentStartDate, {
-                    months: monthsDiff * modifier,
-                });
-                dateEnd = startOfDay(endOfMonth(add(currentEndDate, { months: monthsDiff * modifier })));
-            }
-            else {
-                // Custom range in days
-                const dayDiff = differenceInDays(currentEndDate, currentStartDate) + 1;
-                dateStart = add(currentStartDate, { days: dayDiff * modifier });
-                dateEnd = add(currentEndDate, { days: dayDiff * modifier });
-            }
-        }
-        return [dateStart, dateEnd];
-    }
-    getPredefinedDateRanges(dateRangeDefinitions, referenceDay, firstDayOfWeek) {
-        let predefinedDateRanges = new Array();
-        referenceDay = startOfDay(referenceDay);
-        dateRangeDefinitions.forEach((definition) => {
-            if (definition.type == 'fixed') {
-                if (definition.dateFrom !== undefined &&
-                    definition.dateTo !== undefined) {
-                    const fixedDateRange = new PeriodPickerDateRange(definition.name, definition.dateFrom, definition.dateTo);
-                    predefinedDateRanges.push(fixedDateRange);
-                }
-            }
-            else if (definition.type == 'dynamic') {
-                const dateRangeDefinition = definition.dynamicDateRangeDefinition;
-                if (dateRangeDefinition) {
-                    let dateFrom = null;
-                    let dateTo = null;
-                    switch (dateRangeDefinition.dimension) {
-                        case 'd':
-                            dateFrom = addDays(referenceDay, dateRangeDefinition.modifier);
-                            dateTo = addDays(referenceDay, dateRangeDefinition.modifier);
-                            break;
-                        case 'w':
-                            dateFrom = startOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
-                            dateTo = endOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
-                            break;
-                        case 'm':
-                            dateFrom = startOfMonth(addMonths(referenceDay, dateRangeDefinition.modifier));
-                            dateTo = endOfMonth(addMonths(referenceDay, dateRangeDefinition.modifier));
-                            break;
-                        case 'y':
-                            dateFrom = startOfYear(addYears(referenceDay, dateRangeDefinition.modifier));
-                            dateTo = endOfYear(addYears(referenceDay, dateRangeDefinition.modifier));
-                            break;
-                        default:
-                            break;
-                    }
-                    if (dateFrom != undefined && dateTo != undefined) {
-                        const dynamicRangeDefinition = new PeriodPickerDateRange(definition.name, dateFrom, startOfDay(dateTo));
-                        predefinedDateRanges.push(dynamicRangeDefinition);
-                    }
-                }
-            }
-        });
-        return predefinedDateRanges;
-    }
-}
-SdsDatePickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SdsDatePickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-// import { faLock } from '@fortawesome/pro-solid-svg-icons';
-class SdsDatePickerComponent {
-    // public methods
-    constructor(changeRef, datePickerService) {
-        this.changeRef = changeRef;
-        this.datePickerService = datePickerService;
-        this.displayContent = undefined;
-        // public interface
-        this.selectionKind = 'period';
-        this.dateRangeDefinitions = [];
-        // single date selector
-        this.selectedDate = new Date();
-        this.selectedDateChange = new EventEmitter();
-        this.selectedDateStartChange = new EventEmitter();
-        // format function for displaying date when single date is selected
-        this.singleDayFormatFn = undefined;
-        // format function for displaying each date when date range is selected
-        this.dateRangeFormatFn = undefined;
-        this.selectedDateEndChange = new EventEmitter();
-        this.periodChange = new EventEmitter();
-        this.disabled = false;
-        this.validationError = '';
-        this.isValid = true;
-        this.disabledDates = [];
-        this.applyText = 'close';
-        this.cancelText = 'close';
-        this.firstDayOfWeek = 1;
-        this.dateRangeDefinitionsWidth = '11rem';
-        this.showPreviousAndNextButtons = true;
-        this.width = '30rem';
-        this.dropdownWrapperClass = '';
-        this.dropdownWrapperId = '';
-        this.getPreviousDateCallback = this.getPreviousDay;
-        this.getNextDateCallback = this.getNextDay;
-        this.getPreviousRangeCallback = this.getPreviousRange;
-        this.getNextRangeCallback = this.getNextRange;
-        this.useCustomDisplayContent = false;
-        this.displayPredefinedDateRangeName = false;
-        this.style = 'classic';
-        this.compactStyleDisplay = 'predefinedRange';
-        this.dateInputDisplayFormat = 'shortDate';
-        // #region Aria inputs
-        /**
-         * @description
-         * Component aria-label. Defaults to 'Date picker'
-         */
-        this.componentAriaLabel = 'Date picker';
-        /**
-         * @description
-         * Predefined date range definitions dropdown button aria-label. Defaults to 'Open predefined date ranges pane'
-         */
-        this.openDateRangeDefinitionsAriaLabel = 'Open predefined date ranges pane';
-        /**
-         * @description
-         * Next period button aria-label. Default to 'Next period'
-         */
-        this.nextPeriodAriaLabel = 'Next period';
-        /**
-         * @description
-         * Previous period button aria-label. Defaults to 'Previous period'
-         */
-        this.previousPeriodAriaLabel = 'Previous period';
-        // public properties
-        this.previousPeriodIcon = faAngleLeft;
-        this.nextPeriodIcon = faAngleRight;
-        this.calendarIcon = faCalendar;
-        this.toIcon = faArrowRight;
-        this.lockIcon = faLock;
-        this.predefinedDateRanges = [];
-        this.predefinedDateRangesGeneratedDate = undefined;
-        this.dateRanges = [];
-        this.selectedDateRangeName = '';
-        this.selectedDateRangeTextSegment1 = '';
-        this.selectedDateRangeTextSegment2 = '';
-        this.selectedDateCalendar = new Date();
-        this.selectedDateInternal = new Date();
-        this.dateStartOld = '';
-        this.dateStart = '';
-        this.dateEndOld = '';
-        this.dateEnd = '';
-        this.showPredefinedOptionsSelector = false;
-        this.hidingConfirmedDate = false;
-        this.isSettingNotPreprocessedDate = false;
-        this.isSelectedPredefinedPeriod = false;
-        this.selectedDateFocus = true;
-        this.elementUUID = 'sds-as-' + crypto.randomUUID();
-        this.initCalendarValue = true;
-        this.singleDatePickerBox = undefined;
-        this.selectedDateStartBox = undefined;
-        this.selectedDateEndBox = undefined;
-        this.calendar = undefined;
-        this._selectedDateRangeButton = undefined;
-        this.randomIdReference = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
-        this.isDateDisabled = (args) => {
-            if (this.lockBeforeDate && isBefore(args.date, this.lockBeforeDate)) {
-                return true;
-            }
-            return this.disabledDates.some((day) => isSameDay(args.date, day));
-        };
-        this.dateRangeDefinitions = [];
-        this.minDateDefault = new Date(1900, 1, 1);
-        this.maxDateDefault = add(startOfDay(new Date()), { years: 50 });
-        this.showDatepicker = false;
-        this.translations = {
-            cancel: 'Cancel',
-            apply: 'Apply',
-            custom: 'Custom',
-            presets: 'Presets',
-        };
-        this.customDateRange = new PeriodPickerDateRange(this.translations.custom, undefined, undefined);
-        this.selectedDateRange = this.customDateRange;
-        this.selectedDateInternal = startOfDay(new Date());
-        this.selectedDateStart = startOfMonth(new Date());
-        this.selectedDateEnd = startOfDay(endOfMonth(new Date()));
-        this.setSelectedDateRangeText();
-    }
-    ngOnInit() { }
-    ngOnChanges(changes) {
-        if (changes['dateRangeDefinitions']) {
-            this.generateDateRanges(true);
-        }
-        if (changes['selectionKind']) {
-            if (this.selectionKind == 'single') {
-                const date = new Date(this.selectedDateInternal);
-                this.matchDateRange(date, date);
-                this.setDateRangeText(date, date);
-            }
-            else {
-                const date1 = new Date(this.selectedDateStart);
-                const date2 = new Date(this.selectedDateEnd);
-                this.matchDateRange(date1, date2);
-                this.setDateRangeText(date1, date2);
-            }
-        }
-        if (changes['translations']) {
-            this.updateCustomText();
-        }
-        if (changes['locales']) {
-            this.handleLocalesChange();
-        }
-        if (changes['selectedDateStart'] || changes['selectedDateEnd']) {
-            this.dateStartOld = this.selectedDateStart;
-            this.dateEndOld = this.selectedDateEnd;
-        }
-        if (changes['selectedDate']) {
-            const value = new Date(changes['selectedDate'].currentValue);
-            this.selectedDateInternal = startOfDay(value);
-            if (this.selectionKind == 'single') {
-                this.dateStart = this.selectedDateInternal;
-                this.dateEnd = this.selectedDateInternal;
-                this.matchDateRange(this.selectedDateInternal, this.selectedDateInternal);
-                this.setDateRangeText(this.selectedDateInternal, this.selectedDateInternal);
-            }
-            this.changeRef.detectChanges();
-        }
-        if (changes['selectedDateStart']) {
-            const value = changes['selectedDateStart'].currentValue;
-            const selectedValue = value instanceof Date ? value : new Date();
-            if (this.selectionKind == 'period') {
-                if (this.isSettingNotPreprocessedDate && this.showDatepicker) {
-                    this.dateStart = selectedValue;
-                    this.selectedDateInternal = selectedValue;
-                    this.isSettingNotPreprocessedDate = false;
-                }
-                else if (!this.isSelectedPredefinedPeriod &&
-                    this.showDatepicker) {
-                    if (this.selectedDateStartFocus) {
-                        this.dateStart = selectedValue;
-                        this.selectedDateInternal = selectedValue;
-                        if (this.dateEnd instanceof Date &&
-                            (isSameDay(selectedValue, this.dateEnd) ||
-                                isAfter(selectedValue, this.dateEnd))) {
-                            this.dateEnd = selectedValue;
-                        }
-                    }
-                }
-                else {
-                    this.dateStart = selectedValue;
-                    this.selectedDateFocus = false;
-                }
-                this.calendar?.instance?.repaint();
-                this.removeDxDefaultCalendarFocus();
-                if (this.selectedDateStart instanceof Date &&
-                    this.selectedDateEnd instanceof Date) {
-                    this.matchDateRange(this.selectedDateStart, this.selectedDateEnd);
-                    this.setDateRangeText(this.selectedDateStart, this.selectedDateEnd);
-                }
-            }
-            this.changeRef.detectChanges();
-        }
-        if (changes['selectedDateEnd']) {
-            const value = changes['selectedDateEnd'].currentValue;
-            const selectedValue = value instanceof Date ? value : new Date();
-            if (this.selectionKind == 'period') {
-                if (!this.isSelectedPredefinedPeriod) {
-                    if (this.selectedDateEndFocus) {
-                        this.dateEnd = selectedValue;
-                        this.selectedDateInternal = selectedValue;
-                        if (this.dateStart instanceof Date &&
-                            (isSameDay(selectedValue, this.dateStart) ||
-                                isAfter(this.dateStart, selectedValue))) {
-                            this.dateStart = selectedValue;
-                        }
-                    }
-                }
-                else {
-                    this.dateEnd = selectedValue;
-                    this.selectedDateInternal = selectedValue;
-                }
-                this.removeDxDefaultCalendarFocus();
-                if (this.selectedDateStart instanceof Date &&
-                    this.selectedDateEnd instanceof Date) {
-                    this.matchDateRange(this.selectedDateStart, this.selectedDateEnd);
-                    this.setDateRangeText(this.selectedDateStart, this.selectedDateEnd);
-                }
-            }
-        }
-        if (changes['firstDayOfWeek']) {
-            this.generateDateRanges(true);
-        }
-    }
-    setDateRangeDefinitions(definitions) {
-        this.dateRangeDefinitions = definitions;
-        this.generateDateRanges(true);
-    }
-    setTranslations(translations) {
-        this.translations = translations;
-        this.updateCustomText();
-    }
-    setLocales(locales) {
-        this.locales = locales;
-        this.handleLocalesChange();
-    }
-    get selectedDateStartFocus() {
-        return this.selectedDateFocus;
-    }
-    get selectedDateEndFocus() {
-        return !this.selectedDateFocus;
-    }
-    get isMinimumLimit() {
-        if (this.minDate instanceof Date &&
-            this.selectedDateInternal instanceof Date) {
-            return (isSameDay(this.selectedDateInternal, this.minDate) ||
-                isBefore(this.selectedDateInternal, this.minDate));
-        }
-        return false;
-    }
-    get isMaximumLimit() {
-        if (this.maxDate instanceof Date &&
-            this.selectedDateInternal instanceof Date) {
-            return (isSameDay(this.selectedDateInternal, this.maxDate) ||
-                isAfter(this.selectedDateInternal, this.maxDate));
-        }
-        return false;
-    }
-    onDateChange(event) {
-        let selectedDateFromEvent = new Date(event.value);
-        if (this.selectionKind == 'period') {
-            const interactiveChange = event.event;
-            if (interactiveChange) {
-                if (this.selectedDateStartFocus) {
-                    this.handleStartDateChange(selectedDateFromEvent);
-                }
-                else if (this.selectedDateEndFocus) {
-                    this.handleEndDateChange(selectedDateFromEvent);
-                }
-                this.setSelectedDate(this.selectedDateStart, this.selectedDateEnd, false);
-            }
-        }
-        else if (this.selectionKind == 'single') {
-            this.showDatepicker = false;
-            this.selectedDateInternal = selectedDateFromEvent;
-        }
-    }
-    handleStartDateChange(newDate) {
-        this.selectedDateStart = newDate;
-        this.selectedDateCalendar = newDate;
-        if (!this.initCalendarValue) {
-            this.selectedDateFocus = false;
-            if (isAfter(newDate, this.selectedDateEnd)) {
-                this.selectedDateEnd = newDate;
-            }
-            else {
-                this.selectedDateCalendar = new Date(this.selectedDateEnd);
-            }
-        }
-    }
-    handleEndDateChange(newDate) {
-        this.selectedDateEnd = newDate;
-        this.selectedDateCalendar = newDate;
-        if (
-        // selected date is before start date -> set start date
-        isBefore(newDate, this.selectedDateStart)) {
-            this.selectedDateFocus = true;
-            this.selectedDateStart = newDate;
-            this.selectedDateFocus = false;
-        }
-    }
-    onStartDateChange(event) {
-        this.handleStartDateChange(event.value);
-        this.setSelectedDate(this.selectedDateStart, this.selectedDateEnd, false);
-    }
-    onEndDateChange(event) {
-        this.handleEndDateChange(event.value);
-        this.setSelectedDate(this.selectedDateStart, this.selectedDateEnd, false);
-    }
-    onRangeKeyReleased(event, range) {
-        if (event.key === 'Enter') {
-            this.changDateRange(range);
-        }
-    }
-    onStartDateFocus() {
-        this.initCalendarValue = true;
-        this.selectedDateFocus = true;
-        if (this.selectedDateStart) {
-            this.selectedDateInternal = new Date(this.selectedDateStart);
-            this.selectedDateCalendar = new Date(this.selectedDateStart);
-        }
-        setTimeout(() => {
-            this.initCalendarValue = false;
-        });
-    }
-    onEndDateFocus() {
-        this.selectedDateFocus = false;
-        if (this.selectedDateEnd) {
-            this.selectedDateInternal = new Date(this.selectedDateEnd);
-            this.selectedDateCalendar = new Date(this.selectedDateEnd);
-        }
-    }
-    applyPeriodPicker() {
-        this.hidingConfirmedDate = true;
-        this.showDatepicker = false;
-    }
-    onShowingCalendarPopover() {
-        this.hidingConfirmedDate = false;
-        if (this.selectionKind == 'single') {
-            setTimeout(() => {
-                this.singleDatePickerBox?.instance.focus();
-            });
-        }
-        else {
-            this.dateStartOld = this.selectedDateStart;
-            this.dateEndOld = this.selectedDateEnd;
-            this.isSettingNotPreprocessedDate = true;
-            setTimeout(() => {
-                this.selectedDateStartBox?.instance.focus();
-                this.onStartDateFocus();
-            });
-        }
-    }
-    closeDatepickerPopup(emitChange = true) {
-        // if (this.showDatepicker) {
-        //     this.showDatepicker = false;
-        if (this.selectionKind == 'single') {
-            this.setSelectedDate(this.selectedDateInternal, this.selectedDateInternal, emitChange);
-        }
-        else {
-            if (this.hidingConfirmedDate) {
-                this.setSelectedDate(this.selectedDateStart, this.selectedDateEnd, true);
-            }
-            else {
-                // this.setSelectedDate(this.dateStartOld, this.dateEndOld, true);
-                this.setSelectedDate(this.dateStartOld, this.dateEndOld, false);
-            }
-            // this.hidingConfirmedDate = false;
-        }
-        if (this._selectedDateRangeButton) {
-            this._selectedDateRangeButton.nativeElement.focus({ focusVisible: false });
-        }
-        // }
-    }
-    onHiddenCalendarPopover() {
-        this.closeDatepickerPopup();
-    }
-    setSelectedDate(dateStart, dateEnd, emitChange = true) {
-        this.selectedDateStart = dateStart;
-        this.selectedDateEnd = dateEnd;
-        this.selectedDateInternal = this.selectionKind === 'single' ? dateStart : dateEnd;
-        this.isSelectedPredefinedPeriod = false;
-        if (emitChange) {
-            if (this.selectionKind == 'single') {
-                this.selectedDate = new Date(this.selectedDateInternal);
-                this.selectedDateChange.emit(this.selectedDateInternal);
-            }
-            else {
-                const dateStartNew = new Date(this.selectedDateStart);
-                const dateEndNew = new Date(this.selectedDateEnd);
-                const startDateChanged = (this.dateStartOld instanceof Date && !isSameDay(this.dateStartOld, dateStartNew)) ||
-                    (typeof this.dateStartOld === 'string' && this.dateStartOld === '');
-                const endDateChanged = (this.dateEndOld instanceof Date && !isSameDay(this.dateEndOld, dateEndNew)) ||
-                    (typeof this.dateEndOld === 'string' && this.dateEndOld === '');
-                if (startDateChanged) {
-                    this.dateStartOld = new Date(this.selectedDateStart);
-                    this.selectedDateStartChange.emit(this.selectedDateStart);
-                }
-                if (endDateChanged) {
-                    this.dateEndOld = new Date(this.selectedDateEnd);
-                    this.selectedDateEndChange.emit(this.selectedDateEnd);
-                }
-                if (startDateChanged || endDateChanged) {
-                    this.periodChange.emit([
-                        this.selectedDateStart,
-                        this.selectedDateEnd,
-                    ]);
-                }
-            }
-            if (this.selectedDateStart instanceof Date &&
-                this.selectedDateEnd instanceof Date) {
-                this.matchDateRange(this.selectedDateStart, this.selectedDateEnd);
-                this.setDateRangeText(this.selectedDateStart, this.selectedDateEnd);
-            }
-        }
-        this.changeRef.detectChanges();
-    }
-    goToNextDate() {
-        if (this.selectionKind == 'single') {
-            const newDate = this.getNextDateCallback(this.selectedDateInternal);
-            this.selectedDateInternal = new Date(newDate);
-            this.setSelectedDate(newDate, newDate);
-        }
-        else {
-            if (!(this.selectedDateStart instanceof Date) || !(this.selectedDateEnd instanceof Date)) {
-                return;
-            }
-            const range = this.getNextRangeCallback(this.selectedDateStart, this.selectedDateEnd);
-            this.setSelectedDate(range[0], range[1]);
-        }
-    }
-    goToPreviousDate() {
-        if (this.selectionKind == 'single') {
-            const newDate = this.getPreviousDateCallback(this.selectedDateInternal);
-            this.selectedDateInternal = new Date(newDate);
-            this.setSelectedDate(newDate, newDate);
-        }
-        else {
-            if (!(this.selectedDateStart instanceof Date) || !(this.selectedDateEnd instanceof Date)) {
-                return;
-            }
-            const range = this.getPreviousRangeCallback(this.selectedDateStart, this.selectedDateEnd);
-            this.setSelectedDate(range[0], range[1]);
-        }
-    }
-    // public setNextPreviousDay(setNext: any) {
-    //     this.isSelectedPredefinedPeriod = true;
-    //     let newDate = setNext
-    //         ? add(this.selectedDateInternal as Date, { days: 1 })
-    //         : add(this.selectedDateInternal as Date, { days: -1 });
-    //     this.selectedDateInternal = new Date(newDate);
-    //     this.setSelectedDate(newDate, newDate);
-    // }
-    getNextDay(currentDate) {
-        this.isSelectedPredefinedPeriod = true;
-        return add(this.selectedDateInternal, { days: 1 });
-    }
-    getPreviousDay(currentDate) {
-        this.isSelectedPredefinedPeriod = true;
-        return add(this.selectedDateInternal, { days: -1 });
-    }
-    getNextRange(currentStartDate, currentEndDate) {
-        this.isSelectedPredefinedPeriod = true;
-        return this.datePickerService.getRange(new Date(currentStartDate), new Date(currentEndDate), 'next');
-    }
-    getPreviousRange(currentStartDate, currentEndDate) {
-        this.isSelectedPredefinedPeriod = true;
-        return this.datePickerService.getRange(new Date(currentStartDate), new Date(currentEndDate), 'previous');
-    }
-    setNextPreviousRange(setNext) {
-        this.isSelectedPredefinedPeriod = true;
-        if (!(this.selectedDateStart instanceof Date) ||
-            !(this.selectedDateEnd instanceof Date)) {
-            return;
-        }
-        const range = this.datePickerService.getRange(this.selectedDateStart, this.selectedDateEnd, setNext ? 'next' : 'previous');
-        this.setSelectedDate(range[0], range[1]);
-    }
-    getCellCssClass(date) {
-        const calendarDate = new Date(date);
-        let css = '';
-        if (this.selectionKind == 'period') {
-            const selectedDateStartAsDate = new Date(this.selectedDateStart);
-            const selectedDateEndAsDate = new Date(this.selectedDateEnd);
-            if (isAfter(calendarDate, startOfDay(selectedDateStartAsDate)) &&
-                isBefore(calendarDate, startOfDay(selectedDateEndAsDate)) &&
-                !this.disabledDates.some((day) => isSameDay(calendarDate, day))) {
-                css += ' bg-primary-light text-dark rounded-0';
-            }
-            else {
-                if (isSameDay(calendarDate, selectedDateStartAsDate)) {
-                    css += ' bg-primary text-white rounded-start';
-                }
-                if (isSameDay(calendarDate, selectedDateEndAsDate)) {
-                    css += ' bg-primary text-white rounded-end';
-                }
-            }
-        }
-        return css;
-    }
-    selectEndDate(event) {
-        if (this.selectionKind == "period" && this.selectedDateStartFocus && this.calendarCellClicked(event)) {
-            this.selectedDateFocus = false;
-            this.selectedDateCalendar = new Date(this.selectedDateEnd);
-        }
-    }
-    onKeydown(event) {
-        if (this.showDatepicker) {
-            if (event.code === 'Escape') {
-                this.showDatepicker = false;
-                event.stopImmediatePropagation();
-            }
-            else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-                if (!this.disabled) {
-                    this.applyPeriodPicker();
-                }
-                event.stopImmediatePropagation();
-            }
-        }
-    }
-    calendarCellClicked(event) {
-        // This check is tightly coupled with current DX implementation so it
-        // must be re-checked after each major update of the DX components
-        // Also check if dx-calendar provides info about clicked element by
-        // design.
-        const targetParentClassList = event.target?.offsetParent?.classList;
-        if (!targetParentClassList) {
-            return false;
-        }
-        const isCalendarCell = [...targetParentClassList].includes('dx-calendar-cell');
-        return isCalendarCell;
-    }
-    handleLocalesChange() {
-        // apply new locale to DX
-        // if array of locales was provided use first one
-        if (typeof this.locales === 'string') {
-            locale(this.locales);
-        }
-        else if (Array.isArray(this.locales) && this.locales.length > 0) {
-            locale(this.locales[0]);
-        }
-        ;
-        this.selectedDateStartBox?.instance.repaint();
-        this.selectedDateEndBox?.instance.repaint();
-        this.singleDatePickerBox?.instance.repaint();
-        this.calendar?.instance.repaint();
-        this.setSelectedDateRangeText();
-    }
-    updateCustomText() {
-        this.customDateRange.name = this.translations?.custom
-            ? this.translations.custom
-            : '';
-    }
-    removeDxDefaultCalendarFocus() {
-        const element = document.querySelector('#datepickercomponent .dx-calendar-selected-date');
-        if (element &&
-            element?.classList?.contains('dx-calendar-selected-date')) {
-            element?.classList?.remove('dx-calendar-selected-date');
-        }
-    }
-    setSelectedDateRangeText() {
-        if (this.selectionKind == 'single') {
-            this.matchDateRange(new Date(this.selectedDateInternal), new Date(this.selectedDateInternal));
-            this.setDateRangeText(new Date(this.selectedDateInternal), new Date(this.selectedDateInternal));
-        }
-        else {
-            this.matchDateRange(new Date(this.selectedDateStart), new Date(this.selectedDateEnd));
-            this.setDateRangeText(new Date(this.selectedDateStart), new Date(this.selectedDateEnd));
-        }
-    }
-    toggleDateRangeSelectorVisibility() {
-        if (!this.showPredefinedOptionsSelector) {
-            this.generateDateRanges();
-        }
-        this.showPredefinedOptionsSelector =
-            !this.showPredefinedOptionsSelector;
-    }
-    changDateRange(range) {
-        this.showPredefinedOptionsSelector = false;
-        this.showDatepicker = false;
-        this.selectedDateRange = range;
-        if (range === this.customDateRange) {
-            // this.openDatepickerPopup();
-            this.showDatepicker = true;
-        }
-        else {
-            this.dateStart = range.dateFrom
-                ? range.dateFrom
-                : startOfDay(new Date());
-            this.dateEnd = range.dateTo ? range.dateTo : startOfDay(new Date());
-            this.setSelectedDate(this.dateStart, this.dateEnd, true);
-        }
-    }
-    matchDateRange(dateFrom, dateTo) {
-        if (!dateFrom || !dateTo) {
-            this.selectedDateRange = this.customDateRange;
-            return;
-        }
-        this.generateDateRanges();
-        const dateRange = this.predefinedDateRanges.filter((x) => isSameDay(x.dateFrom, dateFrom) &&
-            isSameDay(x.dateTo, dateTo));
-        if (dateRange.length) {
-            this.selectedDateRange = dateRange[0];
-        }
-        else {
-            this.selectedDateRange = this.customDateRange;
-        }
-    }
-    setDateRangeText(dateFrom, dateTo) {
-        const today = new Date();
-        this.selectedDateRangeName = '';
-        this.selectedDateRangeTextSegment1 = '';
-        this.selectedDateRangeTextSegment2 = '';
-        if (!(dateFrom instanceof Date) || !(dateTo instanceof Date)) {
-            return;
-        }
-        // RESOLVE PERIOD
-        // one day
-        if (isSameDay(dateFrom, dateTo)) {
-            if (typeof this.singleDayFormatFn !== 'undefined') {
-                this.selectedDateRangeTextSegment1 = this.singleDayFormatFn(dateFrom);
-            }
-            else {
-                if (this.style == 'compact' && this.compactStyleDisplay == 'both' && this.selectedDateRange && this.selectedDateRange != this.customDateRange) {
-                    this.selectedDateRangeTextSegment1 = this.formatDate(dateFrom); //skip day name, as we have custom text.
-                }
-                else {
-                    this.selectedDateRangeTextSegment1 = this.formatDate(dateFrom, 'day-long');
-                }
-            }
-        }
-        // date range
-        else {
-            // date range - use provided dateRange format function (if defined)
-            if (typeof this.dateRangeFormatFn !== 'undefined') {
-                this.selectedDateRangeTextSegment1 = this.dateRangeFormatFn(dateFrom);
-                this.selectedDateRangeTextSegment2 = this.dateRangeFormatFn(dateTo);
-            }
-            // full month
-            else if (isSameDay(dateFrom, startOfMonth(dateFrom)) &&
-                isSameDay(dateTo, endOfMonth(dateTo)) &&
-                isSameMonth(dateFrom, dateTo)) {
-                this.selectedDateRangeTextSegment1 = this.formatDate(dateFrom, 'month');
-            }
-            // date range - use default date format function
-            else {
-                this.selectedDateRangeTextSegment1 = this.formatDate(dateFrom, isSameYear(dateFrom, today) ? 'day-short' : 'day');
-                this.selectedDateRangeTextSegment2 = this.formatDate(dateTo, isSameYear(dateTo, today) ? 'day-short' : 'day');
-            }
-        }
-        if (this.style == 'compact' && this.selectedDateRange && this.selectedDateRange != this.customDateRange) {
-            if (this.compactStyleDisplay == 'predefinedRange') {
-                this.selectedDateRangeName = this.selectedDateRange.name;
-                this.selectedDateRangeTextSegment1 = '';
-                this.selectedDateRangeTextSegment2 = '';
-            }
-            if (this.compactStyleDisplay == 'both') {
-                this.selectedDateRangeName = this.selectedDateRange.name + ', ';
-            }
-        }
-        // @Input() public style: 'classic' | 'compact' = 'classic';
-        // @Input() public compactStyleDisplay: 'date' | 'predefinedRange' | 'both' = 'predefinedRange';
-        // if (this.style == 'compact' && this.compactStyleDisplay == 'predefinedRange' && this.selectedDateRange && this.selectedDateRange != this.customDateRange) {
-        //     this.selectedDateRangeTextSegment1 = this.selectedDateRange.name;
-        //     this.selectedDateRangeTextSegment2 = '';
-        //     return;
-        // }
-        // if (this.style == 'compact' && this.compactStyleDisplay == 'both' && this.selectedDateRange && this.selectedDateRange != this.customDateRange) {
-        //     this.selectedDateRangeTextSegment1 = this.selectedDateRange.name;
-        //     this.selectedDateRangeTextSegment2 = '';
-        //     return;
-        // }
-    }
-    formatDate(date, type) {
-        switch (type) {
-            case 'month':
-                return date.toLocaleDateString(this.locales, {
-                    month: 'long',
-                    year: 'numeric',
-                    day: undefined,
-                });
-            case 'day-long':
-                return date.toLocaleDateString(this.locales, {
-                    day: 'numeric',
-                    month: 'numeric',
-                    year: 'numeric',
-                    weekday: 'long',
-                });
-            case 'day-short':
-                return date.toLocaleDateString(this.locales, {
-                    day: 'numeric',
-                    month: 'short',
-                });
-            case 'day':
-                return date.toLocaleDateString(this.locales, {
-                    day: 'numeric',
-                    month: 'short',
-                    year: 'numeric',
-                });
-            default:
-                return date.toLocaleDateString(this.locales, {
-                    day: 'numeric',
-                    month: 'numeric',
-                    year: 'numeric',
-                });
-        }
-    }
-    generateDateRanges(force) {
-        const today = startOfDay(new Date());
-        if (force ||
-            !this.predefinedDateRangesGeneratedDate ||
-            !isSameDay(this.predefinedDateRangesGeneratedDate, today)) {
-            this.predefinedDateRangesGeneratedDate = today;
-            this.predefinedDateRanges =
-                this.datePickerService.getPredefinedDateRanges(this.dateRangeDefinitions, today, this.firstDayOfWeek);
-            this.dateRanges = [...this.predefinedDateRanges];
-            this.dateRanges.push(this.customDateRange);
-        }
-    }
-}
-SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
-SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDatePickerComponent, 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" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, 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\"> -->\r\n    <div\r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\r\n                    class=\"\r\n                        btn btn-white\r\n                        border\r\n                        rounded-start\r\n                        border-end\r\n                        p-0\r\n                        sds-fw-400\"\r\n                    [disabled]=\"disabled\"\r\n                    [style.width]=\"dateRangeDefinitionsWidth\"\r\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\r\n                >\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                            {{selectedDateRange.name}}\r\n                        </div>\r\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\r\n                                class=\"predefined-date-range px-3 py-2 w-100\"\r\n                                [class.selected]=\"range === selectedDateRange\"\r\n                                (click)=\"changDateRange(range)\"\r\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\r\n                            >\r\n                            {{range.name}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </dx-popover>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\"\r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeName}}</span>\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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    <div class=\"sds-print-only h-100\">\r\n\r\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n        <div *ngIf=\"!useCustomDisplayContent\"\r\n            class=\"d-flex justify-content-center align-items-center\">\r\n            <!-- <div class=\"mx-1\">\r\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n            </div> -->\r\n            <div class=\"mx-1 text-truncate\">\r\n                <span>{{selectedDateRangeTextSegment1}}</span>\r\n                <fa-icon\r\n                    *ngIf=\"selectedDateRangeTextSegment2\"\r\n                    class=\"mx-2\"\r\n                    [icon]=\"toIcon\"\r\n                    size=\"sm\"\r\n                ></fa-icon>\r\n                <span>{{selectedDateRangeTextSegment2}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\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'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div\r\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n                        <label>{{ translations.presets }}</label>\r\n                    </div>\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        >\r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onStartDateChange($event)\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onEndDateChange($event)\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\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\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    [displayFormat]=\"dateInputDisplayFormat\"\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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"d-flex justify-content-center align-items-center\"\r\n                            (click)=\"selectEndDate($event)\">\r\n\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\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                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1 sds-fw-400\"\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            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\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: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i6.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i7.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i5.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: "component", type: i5.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"] }, { kind: "pipe", type: i8.SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div\r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\r\n                    class=\"\r\n                        btn btn-white\r\n                        border\r\n                        rounded-start\r\n                        border-end\r\n                        p-0\r\n                        sds-fw-400\"\r\n                    [disabled]=\"disabled\"\r\n                    [style.width]=\"dateRangeDefinitionsWidth\"\r\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\r\n                >\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                            {{selectedDateRange.name}}\r\n                        </div>\r\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\r\n                                class=\"predefined-date-range px-3 py-2 w-100\"\r\n                                [class.selected]=\"range === selectedDateRange\"\r\n                                (click)=\"changDateRange(range)\"\r\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\r\n                            >\r\n                            {{range.name}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </dx-popover>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\"\r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeName}}</span>\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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    <div class=\"sds-print-only h-100\">\r\n\r\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n        <div *ngIf=\"!useCustomDisplayContent\"\r\n            class=\"d-flex justify-content-center align-items-center\">\r\n            <!-- <div class=\"mx-1\">\r\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n            </div> -->\r\n            <div class=\"mx-1 text-truncate\">\r\n                <span>{{selectedDateRangeTextSegment1}}</span>\r\n                <fa-icon\r\n                    *ngIf=\"selectedDateRangeTextSegment2\"\r\n                    class=\"mx-2\"\r\n                    [icon]=\"toIcon\"\r\n                    size=\"sm\"\r\n                ></fa-icon>\r\n                <span>{{selectedDateRangeTextSegment2}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\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'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div\r\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n                        <label>{{ translations.presets }}</label>\r\n                    </div>\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        >\r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onStartDateChange($event)\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onEndDateChange($event)\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\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\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    [displayFormat]=\"dateInputDisplayFormat\"\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                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"d-flex justify-content-center align-items-center\"\r\n                            (click)=\"selectEndDate($event)\">\r\n\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\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                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1 sds-fw-400\"\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            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
-                type: ContentChild,
-                args: ['display']
-            }], selectionKind: [{
-                type: Input
-            }], dateRangeDefinitions: [{
-                type: Input
-            }], selectedDate: [{
-                type: Input
-            }], selectedDateChange: [{
-                type: Output
-            }], selectedDateStart: [{
-                type: Input
-            }], selectedDateStartChange: [{
-                type: Output
-            }], singleDayFormatFn: [{
-                type: Input
-            }], dateRangeFormatFn: [{
-                type: Input
-            }], selectedDateEnd: [{
-                type: Input
-            }], selectedDateEndChange: [{
-                type: Output
-            }], periodChange: [{
-                type: Output
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], locales: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], validationError: [{
-                type: Input
-            }], isValid: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], applyText: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], translations: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], dateRangeDefinitionsWidth: [{
-                type: Input
-            }], showPreviousAndNextButtons: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], dropdownWrapperClass: [{
-                type: Input
-            }], dropdownWrapperId: [{
-                type: Input
-            }], getPreviousDateCallback: [{
-                type: Input
-            }], getNextDateCallback: [{
-                type: Input
-            }], getPreviousRangeCallback: [{
-                type: Input
-            }], getNextRangeCallback: [{
-                type: Input
-            }], useCustomDisplayContent: [{
-                type: Input
-            }], displayPredefinedDateRangeName: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], compactStyleDisplay: [{
-                type: Input
-            }], dateInputDisplayFormat: [{
-                type: Input
-            }], componentAriaLabel: [{
-                type: Input
-            }], openDateRangeDefinitionsAriaLabel: [{
-                type: Input
-            }], nextPeriodAriaLabel: [{
-                type: Input
-            }], previousPeriodAriaLabel: [{
-                type: Input
-            }], lockBeforeDate: [{
-                type: Input
-            }], lockBeforeDateHint: [{
-                type: Input
-            }], singleDatePickerBox: [{
-                type: ViewChild,
-                args: ['singleDatePickerBox', { static: false }]
-            }], selectedDateStartBox: [{
-                type: ViewChild,
-                args: ['selectedDateStartBox', { static: false }]
-            }], selectedDateEndBox: [{
-                type: ViewChild,
-                args: ['selectedDateEndBox', { static: false }]
-            }], calendar: [{
-                type: ViewChild,
-                args: ['calendar', { static: false }]
-            }], _selectedDateRangeButton: [{
-                type: ViewChild,
-                args: ['selectedDateRangeButton', { static: true }]
-            }] } });
-
-const components = [
-    SdsDatePickerComponent
-];
-class SdsDatePickerModule {
-}
-SdsDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, declarations: [SdsDatePickerComponent], imports: [A11yModule,
-        CommonModule,
-        FontAwesomeModule,
-        DxDateBoxModule,
-        DxPopoverModule,
-        DxScrollViewModule,
-        DxCalendarModule,
-        DxDropDownButtonModule,
-        DxDropDownBoxModule,
-        DxSelectBoxModule,
-        DxListModule,
-        SdsDatePipesModule], exports: [SdsDatePickerComponent] });
-SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, imports: [A11yModule,
-        CommonModule,
-        FontAwesomeModule,
-        DxDateBoxModule,
-        DxPopoverModule,
-        DxScrollViewModule,
-        DxCalendarModule,
-        DxDropDownButtonModule,
-        DxDropDownBoxModule,
-        DxSelectBoxModule,
-        DxListModule,
-        SdsDatePipesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...components
-                    ],
-                    imports: [
-                        A11yModule,
-                        CommonModule,
-                        FontAwesomeModule,
-                        DxDateBoxModule,
-                        DxPopoverModule,
-                        DxScrollViewModule,
-                        DxCalendarModule,
-                        DxDropDownButtonModule,
-                        DxDropDownBoxModule,
-                        DxSelectBoxModule,
-                        DxListModule,
-                        SdsDatePipesModule
-                    ],
-                    exports: [
-                        ...components
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DateRangeTranslations, PeriodPickerDateRange, PeriodPickerDateRangeDefinition, PeriodPickerDateRangeDynamicDefinition, PeriodPickerDynamicDateRangeDefinitionGenerator, SdsDatePickerComponent, SdsDatePickerModule };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map