@spicainternational/ngx-sds-components 7.1.0 → 7.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/date-picker/date-picker.component.mjs +18 -6
- package/esm2020/src/lib/date-picker/date-picker.module.mjs +8 -4
- package/esm2020/src/lib/date-pipes/date-compare.pipe.mjs +31 -0
- package/esm2020/src/lib/date-pipes/date-pipes.module.mjs +15 -3
- package/esm2020/src/lib/date-pipes/public-api.mjs +2 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +25 -9
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +43 -3
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +25 -9
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +43 -3
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/date-picker/date-picker.component.d.ts +5 -1
- package/src/lib/date-picker/date-picker.module.d.ts +2 -1
- package/src/lib/date-pipes/date-compare.pipe.d.ts +7 -0
- package/src/lib/date-pipes/date-pipes.module.d.ts +3 -2
- package/src/lib/date-pipes/public-api.d.ts +1 -0
|
@@ -157,11 +157,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
157
157
|
}]
|
|
158
158
|
}] });
|
|
159
159
|
|
|
160
|
-
|
|
160
|
+
class SdsDateComparePipe {
|
|
161
|
+
transform(date1, date2, operator) {
|
|
162
|
+
const d1 = new Date(date1);
|
|
163
|
+
const d2 = new Date(date2);
|
|
164
|
+
switch (operator) {
|
|
165
|
+
case 'gt':
|
|
166
|
+
return d1 > d2;
|
|
167
|
+
case 'lt':
|
|
168
|
+
return d1 < d2;
|
|
169
|
+
case 'eq':
|
|
170
|
+
return d1.getTime() === d2.getTime();
|
|
171
|
+
case 'gte':
|
|
172
|
+
return d1 >= d2;
|
|
173
|
+
case 'lte':
|
|
174
|
+
return d1 <= d2;
|
|
175
|
+
default:
|
|
176
|
+
return false;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
SdsDateComparePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
181
|
+
SdsDateComparePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, name: "sdsDateCompare" });
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, decorators: [{
|
|
183
|
+
type: Pipe,
|
|
184
|
+
args: [{
|
|
185
|
+
name: 'sdsDateCompare',
|
|
186
|
+
}]
|
|
187
|
+
}] });
|
|
188
|
+
|
|
189
|
+
const pipes = [
|
|
190
|
+
SdsDatePeriodFormatPipe,
|
|
191
|
+
SdsDateFormatPipe,
|
|
192
|
+
DateTimeRangeFormatPipe,
|
|
193
|
+
SdsDateComparePipe
|
|
194
|
+
];
|
|
161
195
|
class SdsDatePipesModule {
|
|
162
196
|
}
|
|
163
197
|
SdsDatePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
164
|
-
SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe,
|
|
198
|
+
SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe,
|
|
199
|
+
SdsDateFormatPipe,
|
|
200
|
+
DateTimeRangeFormatPipe,
|
|
201
|
+
SdsDateComparePipe], imports: [CommonModule], exports: [SdsDatePeriodFormatPipe,
|
|
202
|
+
SdsDateFormatPipe,
|
|
203
|
+
DateTimeRangeFormatPipe,
|
|
204
|
+
SdsDateComparePipe] });
|
|
165
205
|
SdsDatePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, imports: [CommonModule] });
|
|
166
206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, decorators: [{
|
|
167
207
|
type: NgModule,
|
|
@@ -332,5 +372,5 @@ const DATE_TIME_FORMAT_OPTIONS = {
|
|
|
332
372
|
* Generated bundle index. Do not edit.
|
|
333
373
|
*/
|
|
334
374
|
|
|
335
|
-
export { DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS, DATE_LONG_MONTH_OPTIONS, DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS, DATE_NUMERIC_MONTH_OPTIONS, DATE_SHORT_MONTH_OPTIONS, DATE_TIME_FORMAT_OPTIONS, DateTimeRangeFormatPipe, SdsDateFormatPipe, SdsDatePeriodFormatPipe, SdsDatePipesModule, TIME_HOUR_2DIGIT_OPTION, TIME_HOUR_NUMERIC_OPTION, TIME_HOUR_NUMERIC_SECONDS_OPTION };
|
|
375
|
+
export { DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS, DATE_LONG_MONTH_OPTIONS, DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS, DATE_NUMERIC_MONTH_OPTIONS, DATE_SHORT_MONTH_OPTIONS, DATE_TIME_FORMAT_OPTIONS, DateTimeRangeFormatPipe, SdsDateComparePipe, SdsDateFormatPipe, SdsDatePeriodFormatPipe, SdsDatePipesModule, TIME_HOUR_2DIGIT_OPTION, TIME_HOUR_NUMERIC_OPTION, TIME_HOUR_NUMERIC_SECONDS_OPTION };
|
|
336
376
|
//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-date-pipes.mjs","sources":["../../../projects/ngx-sds-components/src/lib/date-pipes/date-period-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-range-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-pipes.module.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-formats.constants.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/spicainternational-ngx-sds-components-src-lib-date-pipes.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { isSameDay, isSameYear } from 'date-fns';\r\n\r\n@Pipe({\r\n name: 'sdsDatePeriodFormat',\r\n})\r\nexport class SdsDatePeriodFormatPipe implements PipeTransform {\r\n transform(\r\n from: Date,\r\n to: Date,\r\n locales: string | Array<string>,\r\n options?: Intl.DateTimeFormatOptions,\r\n omitRedundantSegments: boolean = false,\r\n periodSeparator: string = '-',\r\n omitCurrentYear: boolean = false\r\n ): string {\r\n if (!from) {\r\n return '';\r\n }\r\n\r\n if (!to) {\r\n return from.toLocaleDateString(locales, options);\r\n }\r\n\r\n\r\n if (isSameDay(from, to)) {\r\n return from.toLocaleDateString(locales, options);\r\n } else {\r\n let fromOptions = {...options};\r\n let toOptions = {...options};\r\n\r\n if (omitRedundantSegments && fromOptions && toOptions) {\r\n\r\n // if both dates are in current year -> remove it from format\r\n const now = new Date();\r\n if (omitCurrentYear && isSameYear(from, now) && isSameYear(to, now)) {\r\n fromOptions.year = undefined;\r\n toOptions.year = undefined;\r\n } \r\n\r\n if (isSameYear(from, to)) {\r\n // if both dates have same year -> remove it from start data\r\n fromOptions.year = undefined;\r\n }\r\n }\r\n\r\n const fromString = from.toLocaleDateString(locales, fromOptions);\r\n const toString = to.toLocaleDateString(locales, toOptions);\r\n\r\n return `${fromString} ${periodSeparator} ${toString}`;\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateFormat',\r\n})\r\nexport class SdsDateFormatPipe implements PipeTransform {\r\n\r\n /**\r\n * Formats date in given locale.\r\n *\r\n * @param date Date to be formatted.\r\n * @param locale A locale code for the locale format rules to use.\r\n * @param options An optional Intl.DateTimeFormatOptions parameter that can be used to fine-tune the output.\r\n * @returns A string with formatted date\r\n * @see [Intl docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n *\r\n * @publicApi\r\n */\r\n public transform(\r\n date: Date | number | string | undefined,\r\n locales: string | Array<string>,\r\n options?: Intl.DateTimeFormatOptions | 'time' | 'date' | 'date-medium' | 'date-long' | 'date-time'\r\n ): string {\r\n if (date === null || date === undefined) {\r\n return ''\r\n }\r\n\r\n const formatDate = new Date(date);\r\n if (formatDate.toString() == 'Invalid Date') {\r\n return ''\r\n } \r\n\r\n if (options === 'time'){\r\n return formatDate.toLocaleTimeString(locales, {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else if (options === 'date'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: 'numeric', \r\n month: 'numeric', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-medium'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: '2-digit', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-long'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: 'short', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-time'){\r\n return formatDate.toLocaleDateString(locales, {\r\n weekday: 'short', \r\n day: 'numeric', \r\n month: 'short', \r\n year:'numeric', \r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else {\r\n return formatDate.toLocaleDateString(locales, options as Intl.DateTimeFormatOptions | undefined);\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateTimeRangeFormat',\r\n})\r\nexport class DateTimeRangeFormatPipe implements PipeTransform {\r\n /**\r\n * Formats a date range using Intl.DateTimeFormat.formatRange\r\n * @param startDate - The start date of the range\r\n * @param endDate - The end date of the range\r\n * @param locales - Locale(s) to use for formatting (optional, defaults to browser locale)\r\n * @param options - Intl.DateTimeFormatOptions for customizing the format\r\n * @returns Formatted date range string\r\n */\r\n transform(\r\n startDate: Date | string | number,\r\n endDate: Date | string | number,\r\n locales: string | string[],\r\n options: Intl.DateTimeFormatOptions\r\n ): string {\r\n if (!startDate || !endDate) {\r\n return '';\r\n }\r\n\r\n try {\r\n const start = new Date(startDate);\r\n const end = new Date(endDate);\r\n\r\n if (!options || isNaN(start.getTime()) || isNaN(end.getTime())) {\r\n return '';\r\n }\r\n\r\n const formatter = new Intl.DateTimeFormat(locales, options);\r\n const formatterWithRange = formatter as any;\r\n\r\n if (typeof formatterWithRange.formatRange === 'function') {\r\n return formatterWithRange.formatRange(start, end);\r\n } else {\r\n return `${formatter.format(start)} - ${formatter.format(end)}`;\r\n }\r\n } catch (error) {\r\n return '';\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDatePeriodFormatPipe } from './date-period-format.pipe';\r\nimport { SdsDateFormatPipe } from './date-format.pipe';\r\nimport { DateTimeRangeFormatPipe } from './date-time-range-format.pipe';\r\n\r\n\r\nconst pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...pipes\r\n ],\r\n imports: [\r\n CommonModule,\r\n ],\r\n exports:[\r\n ...pipes\r\n ]\r\n})\r\nexport class SdsDatePipesModule { }\r\n","/**\r\n * Common Intl.DateTimeFormatOptions constants for consistent date/time formatting\r\n */\r\n\r\n// Date formats\r\nexport const DATE_NUMERIC_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'numeric',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_SHORT_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'short',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'long',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\nexport const DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'short',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\n\r\n// export const SHORT_DATE_WITH_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// // Long date formats\r\n// export const LONG_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric'\r\n// };\r\n\r\n\r\n\r\n\r\n\r\n// Time formats\r\nexport const TIME_HOUR_NUMERIC_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n};\r\n\r\nexport const TIME_HOUR_2DIGIT_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: '2-digit',\r\n minute: '2-digit'\r\n};\r\n\r\nexport const TIME_HOUR_NUMERIC_SECONDS_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: 'numeric',\r\n minute: '2-digit',\r\n second: '2-digit'\r\n};\r\n\r\n// export const TIME_24H_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// export const TIME_WITH_SECONDS_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// second: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Date and time combinations\r\n// export const SHORT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const LONG_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const COMPACT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: '2-digit',\r\n// day: '2-digit',\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Time range specific formats (optimized for ranges)\r\n\r\n\r\n// export const TIME_RANGE_WITH_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const DATE_RANGE_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const DATE_RANGE_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// Special formats\r\n// export const RELATIVE_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const MONTH_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// export const WEEKDAY_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long'\r\n// };\r\n\r\n// export const YEAR_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric'\r\n// };\r\n\r\n// Utility object for easy access\r\nexport const DATE_TIME_FORMAT_OPTIONS = {\r\n\r\n DATE_NUMERIC_MONTH: DATE_NUMERIC_MONTH_OPTIONS,\r\n DATE_SHORT_MONTH: DATE_SHORT_MONTH_OPTIONS,\r\n DATE_LONG_MONTH: DATE_LONG_MONTH_OPTIONS,\r\n\r\n DATE_LONG_MONTH_LONG_WEEKDAY: DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS,\r\n DATE_LONG_MONTH_SHORT_WEEKDAY: DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS,\r\n\r\n TIME_HOUR_NUMERIC: TIME_HOUR_NUMERIC_OPTION,\r\n TIME_HOUR_2DIGIT: TIME_HOUR_2DIGIT_OPTION,\r\n TIME_HOUR_NUMERIC_SECONDS: TIME_HOUR_NUMERIC_SECONDS_OPTION,\r\n\r\n // SHORT_DATE_WITH_WEEKDAY: SHORT_DATE_WITH_WEEKDAY_OPTIONS,\r\n \r\n // Long formats\r\n// LONG_DATE_WITH_WEEKDAY: LONG_DATE_WITH_WEEKDAY_OPTIONS,\r\n\r\n // Time formats\r\n// TIME_12H: TIME_12H_OPTIONS,\r\n// TIME_24H: TIME_24H_OPTIONS,\r\n// TIME_WITH_SECONDS: TIME_WITH_SECONDS_OPTIONS,\r\n \r\n // DateTime combinations\r\n// SHORT_DATETIME: SHORT_DATETIME_OPTIONS,\r\n// LONG_DATETIME: LONG_DATETIME_OPTIONS,\r\n// COMPACT_DATETIME: COMPACT_DATETIME_OPTIONS,\r\n \r\n // Range specific\r\n \r\n// TIME_RANGE_WITH_DATE: TIME_RANGE_WITH_DATE_OPTIONS,\r\n// DATE_RANGE_MONTH: DATE_RANGE_MONTH_OPTIONS,\r\n// DATE_RANGE_YEAR: DATE_RANGE_YEAR_OPTIONS,\r\n \r\n // Special\r\n// RELATIVE_DATE: RELATIVE_DATE_OPTIONS,\r\n// MONTH_YEAR: MONTH_YEAR_OPTIONS,\r\n// WEEKDAY_ONLY: WEEKDAY_ONLY_OPTIONS,\r\n// YEAR_ONLY: YEAR_ONLY_OPTIONS\r\n} as const;\r\nexport type DateTimeFormatOptionKeys = keyof typeof DATE_TIME_FORMAT_OPTIONS;\r\n\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-date-pipes.mjs","sources":["../../../projects/ngx-sds-components/src/lib/date-pipes/date-period-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-range-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-compare.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-pipes.module.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-formats.constants.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/spicainternational-ngx-sds-components-src-lib-date-pipes.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { isSameDay, isSameYear } from 'date-fns';\r\n\r\n@Pipe({\r\n name: 'sdsDatePeriodFormat',\r\n})\r\nexport class SdsDatePeriodFormatPipe implements PipeTransform {\r\n transform(\r\n from: Date,\r\n to: Date,\r\n locales: string | Array<string>,\r\n options?: Intl.DateTimeFormatOptions,\r\n omitRedundantSegments: boolean = false,\r\n periodSeparator: string = '-',\r\n omitCurrentYear: boolean = false\r\n ): string {\r\n if (!from) {\r\n return '';\r\n }\r\n\r\n if (!to) {\r\n return from.toLocaleDateString(locales, options);\r\n }\r\n\r\n\r\n if (isSameDay(from, to)) {\r\n return from.toLocaleDateString(locales, options);\r\n } else {\r\n let fromOptions = {...options};\r\n let toOptions = {...options};\r\n\r\n if (omitRedundantSegments && fromOptions && toOptions) {\r\n\r\n // if both dates are in current year -> remove it from format\r\n const now = new Date();\r\n if (omitCurrentYear && isSameYear(from, now) && isSameYear(to, now)) {\r\n fromOptions.year = undefined;\r\n toOptions.year = undefined;\r\n } \r\n\r\n if (isSameYear(from, to)) {\r\n // if both dates have same year -> remove it from start data\r\n fromOptions.year = undefined;\r\n }\r\n }\r\n\r\n const fromString = from.toLocaleDateString(locales, fromOptions);\r\n const toString = to.toLocaleDateString(locales, toOptions);\r\n\r\n return `${fromString} ${periodSeparator} ${toString}`;\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateFormat',\r\n})\r\nexport class SdsDateFormatPipe implements PipeTransform {\r\n\r\n /**\r\n * Formats date in given locale.\r\n *\r\n * @param date Date to be formatted.\r\n * @param locale A locale code for the locale format rules to use.\r\n * @param options An optional Intl.DateTimeFormatOptions parameter that can be used to fine-tune the output.\r\n * @returns A string with formatted date\r\n * @see [Intl docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n *\r\n * @publicApi\r\n */\r\n public transform(\r\n date: Date | number | string | undefined,\r\n locales: string | Array<string>,\r\n options?: Intl.DateTimeFormatOptions | 'time' | 'date' | 'date-medium' | 'date-long' | 'date-time'\r\n ): string {\r\n if (date === null || date === undefined) {\r\n return ''\r\n }\r\n\r\n const formatDate = new Date(date);\r\n if (formatDate.toString() == 'Invalid Date') {\r\n return ''\r\n } \r\n\r\n if (options === 'time'){\r\n return formatDate.toLocaleTimeString(locales, {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else if (options === 'date'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: 'numeric', \r\n month: 'numeric', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-medium'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: '2-digit', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-long'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: 'short', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-time'){\r\n return formatDate.toLocaleDateString(locales, {\r\n weekday: 'short', \r\n day: 'numeric', \r\n month: 'short', \r\n year:'numeric', \r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else {\r\n return formatDate.toLocaleDateString(locales, options as Intl.DateTimeFormatOptions | undefined);\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateTimeRangeFormat',\r\n})\r\nexport class DateTimeRangeFormatPipe implements PipeTransform {\r\n /**\r\n * Formats a date range using Intl.DateTimeFormat.formatRange\r\n * @param startDate - The start date of the range\r\n * @param endDate - The end date of the range\r\n * @param locales - Locale(s) to use for formatting (optional, defaults to browser locale)\r\n * @param options - Intl.DateTimeFormatOptions for customizing the format\r\n * @returns Formatted date range string\r\n */\r\n transform(\r\n startDate: Date | string | number,\r\n endDate: Date | string | number,\r\n locales: string | string[],\r\n options: Intl.DateTimeFormatOptions\r\n ): string {\r\n if (!startDate || !endDate) {\r\n return '';\r\n }\r\n\r\n try {\r\n const start = new Date(startDate);\r\n const end = new Date(endDate);\r\n\r\n if (!options || isNaN(start.getTime()) || isNaN(end.getTime())) {\r\n return '';\r\n }\r\n\r\n const formatter = new Intl.DateTimeFormat(locales, options);\r\n const formatterWithRange = formatter as any;\r\n\r\n if (typeof formatterWithRange.formatRange === 'function') {\r\n return formatterWithRange.formatRange(start, end);\r\n } else {\r\n return `${formatter.format(start)} - ${formatter.format(end)}`;\r\n }\r\n } catch (error) {\r\n return '';\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateCompare',\r\n})\r\nexport class SdsDateComparePipe implements PipeTransform {\r\n transform(\r\n date1: Date | string | number,\r\n date2: Date | string | number,\r\n operator: 'gt' | 'lt' | 'eq' | 'gte' | 'lte'\r\n ): boolean {\r\n const d1 = new Date(date1);\r\n const d2 = new Date(date2);\r\n\r\n switch (operator) {\r\n case 'gt':\r\n return d1 > d2;\r\n case 'lt':\r\n return d1 < d2;\r\n case 'eq':\r\n return d1.getTime() === d2.getTime();\r\n case 'gte':\r\n return d1 >= d2;\r\n case 'lte':\r\n return d1 <= d2;\r\n default:\r\n return false;\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDatePeriodFormatPipe } from './date-period-format.pipe';\r\nimport { SdsDateFormatPipe } from './date-format.pipe';\r\nimport { DateTimeRangeFormatPipe } from './date-time-range-format.pipe';\r\nimport { SdsDateComparePipe } from './date-compare.pipe';\r\n\r\n\r\nconst pipes = [\r\n SdsDatePeriodFormatPipe, \r\n SdsDateFormatPipe, \r\n DateTimeRangeFormatPipe,\r\n SdsDateComparePipe\r\n];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...pipes\r\n ],\r\n imports: [\r\n CommonModule,\r\n ],\r\n exports:[\r\n ...pipes\r\n ]\r\n})\r\nexport class SdsDatePipesModule { }\r\n","/**\r\n * Common Intl.DateTimeFormatOptions constants for consistent date/time formatting\r\n */\r\n\r\n// Date formats\r\nexport const DATE_NUMERIC_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'numeric',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_SHORT_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'short',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'long',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\nexport const DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'short',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\n\r\n// export const SHORT_DATE_WITH_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// // Long date formats\r\n// export const LONG_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric'\r\n// };\r\n\r\n\r\n\r\n\r\n\r\n// Time formats\r\nexport const TIME_HOUR_NUMERIC_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n};\r\n\r\nexport const TIME_HOUR_2DIGIT_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: '2-digit',\r\n minute: '2-digit'\r\n};\r\n\r\nexport const TIME_HOUR_NUMERIC_SECONDS_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: 'numeric',\r\n minute: '2-digit',\r\n second: '2-digit'\r\n};\r\n\r\n// export const TIME_24H_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// export const TIME_WITH_SECONDS_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// second: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Date and time combinations\r\n// export const SHORT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const LONG_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const COMPACT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: '2-digit',\r\n// day: '2-digit',\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Time range specific formats (optimized for ranges)\r\n\r\n\r\n// export const TIME_RANGE_WITH_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const DATE_RANGE_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const DATE_RANGE_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// Special formats\r\n// export const RELATIVE_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const MONTH_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// export const WEEKDAY_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long'\r\n// };\r\n\r\n// export const YEAR_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric'\r\n// };\r\n\r\n// Utility object for easy access\r\nexport const DATE_TIME_FORMAT_OPTIONS = {\r\n\r\n DATE_NUMERIC_MONTH: DATE_NUMERIC_MONTH_OPTIONS,\r\n DATE_SHORT_MONTH: DATE_SHORT_MONTH_OPTIONS,\r\n DATE_LONG_MONTH: DATE_LONG_MONTH_OPTIONS,\r\n\r\n DATE_LONG_MONTH_LONG_WEEKDAY: DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS,\r\n DATE_LONG_MONTH_SHORT_WEEKDAY: DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS,\r\n\r\n TIME_HOUR_NUMERIC: TIME_HOUR_NUMERIC_OPTION,\r\n TIME_HOUR_2DIGIT: TIME_HOUR_2DIGIT_OPTION,\r\n TIME_HOUR_NUMERIC_SECONDS: TIME_HOUR_NUMERIC_SECONDS_OPTION,\r\n\r\n // SHORT_DATE_WITH_WEEKDAY: SHORT_DATE_WITH_WEEKDAY_OPTIONS,\r\n \r\n // Long formats\r\n// LONG_DATE_WITH_WEEKDAY: LONG_DATE_WITH_WEEKDAY_OPTIONS,\r\n\r\n // Time formats\r\n// TIME_12H: TIME_12H_OPTIONS,\r\n// TIME_24H: TIME_24H_OPTIONS,\r\n// TIME_WITH_SECONDS: TIME_WITH_SECONDS_OPTIONS,\r\n \r\n // DateTime combinations\r\n// SHORT_DATETIME: SHORT_DATETIME_OPTIONS,\r\n// LONG_DATETIME: LONG_DATETIME_OPTIONS,\r\n// COMPACT_DATETIME: COMPACT_DATETIME_OPTIONS,\r\n \r\n // Range specific\r\n \r\n// TIME_RANGE_WITH_DATE: TIME_RANGE_WITH_DATE_OPTIONS,\r\n// DATE_RANGE_MONTH: DATE_RANGE_MONTH_OPTIONS,\r\n// DATE_RANGE_YEAR: DATE_RANGE_YEAR_OPTIONS,\r\n \r\n // Special\r\n// RELATIVE_DATE: RELATIVE_DATE_OPTIONS,\r\n// MONTH_YEAR: MONTH_YEAR_OPTIONS,\r\n// WEEKDAY_ONLY: WEEKDAY_ONLY_OPTIONS,\r\n// YEAR_ONLY: YEAR_ONLY_OPTIONS\r\n} as const;\r\nexport type DateTimeFormatOptionKeys = keyof typeof DATE_TIME_FORMAT_OPTIONS;\r\n\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
import * as i5 from 'devextreme-angular';
|
|
6
6
|
import { DxDateBoxModule, DxPopoverModule, DxScrollViewModule, DxCalendarModule, DxDropDownButtonModule, DxDropDownBoxModule, DxSelectBoxModule, DxListModule } from 'devextreme-angular';
|
|
7
7
|
import { locale } from 'devextreme/localization';
|
|
8
|
-
import { isSameDay, startOfMonth, endOfMonth, isSameMonth, add, startOfDay, differenceInMonths, differenceInDays, startOfYear, addYears, endOfYear, addMonths, startOfWeek, addWeeks, endOfWeek, addDays,
|
|
9
|
-
import { faAngleLeft, faAngleRight, faCalendar } from '@fortawesome/pro-regular-svg-icons';
|
|
8
|
+
import { isSameDay, startOfMonth, endOfMonth, isSameMonth, add, startOfDay, differenceInMonths, differenceInDays, startOfYear, addYears, endOfYear, addMonths, startOfWeek, addWeeks, endOfWeek, addDays, isBefore, isAfter, isSameYear } from 'date-fns';
|
|
9
|
+
import { faAngleLeft, faAngleRight, faCalendar, faLock } from '@fortawesome/pro-regular-svg-icons';
|
|
10
10
|
import { faArrowRight } from '@fortawesome/pro-light-svg-icons';
|
|
11
11
|
import * as i2 from '@angular/cdk/a11y';
|
|
12
12
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -14,6 +14,8 @@ import * as i4 from '@fortawesome/angular-fontawesome';
|
|
|
14
14
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
15
15
|
import * as i6 from 'devextreme-angular/ui/nested';
|
|
16
16
|
import * as i7 from 'devextreme-angular/core';
|
|
17
|
+
import * as i8 from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
18
|
+
import { SdsDatePipesModule } from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
17
19
|
|
|
18
20
|
class DateRangeTranslations {
|
|
19
21
|
constructor() {
|
|
@@ -172,6 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
172
174
|
}]
|
|
173
175
|
}], ctorParameters: function () { return []; } });
|
|
174
176
|
|
|
177
|
+
// import { faLock } from '@fortawesome/pro-solid-svg-icons';
|
|
175
178
|
class SdsDatePickerComponent {
|
|
176
179
|
// public methods
|
|
177
180
|
constructor(changeRef, datePickerService) {
|
|
@@ -233,12 +236,12 @@ class SdsDatePickerComponent {
|
|
|
233
236
|
* Previous period button aria-label. Defaults to 'Previous period'
|
|
234
237
|
*/
|
|
235
238
|
this.previousPeriodAriaLabel = 'Previous period';
|
|
236
|
-
// #endregion ARIA inputs
|
|
237
239
|
// public properties
|
|
238
240
|
this.previousPeriodIcon = faAngleLeft;
|
|
239
241
|
this.nextPeriodIcon = faAngleRight;
|
|
240
242
|
this.calendarIcon = faCalendar;
|
|
241
243
|
this.toIcon = faArrowRight;
|
|
244
|
+
this.lockIcon = faLock;
|
|
242
245
|
this.predefinedDateRanges = [];
|
|
243
246
|
this.predefinedDateRangesGeneratedDate = undefined;
|
|
244
247
|
this.dateRanges = [];
|
|
@@ -264,6 +267,12 @@ class SdsDatePickerComponent {
|
|
|
264
267
|
this.calendar = undefined;
|
|
265
268
|
this._selectedDateRangeButton = undefined;
|
|
266
269
|
this.randomIdReference = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
|
|
270
|
+
this.isDateDisabled = (args) => {
|
|
271
|
+
if (this.lockBeforeDate && isBefore(args.date, this.lockBeforeDate)) {
|
|
272
|
+
return true;
|
|
273
|
+
}
|
|
274
|
+
return this.disabledDates.some((day) => isSameDay(args.date, day));
|
|
275
|
+
};
|
|
267
276
|
this.dateRangeDefinitions = [];
|
|
268
277
|
this.minDateDefault = new Date(1900, 1, 1);
|
|
269
278
|
this.maxDateDefault = add(startOfDay(new Date()), { years: 50 });
|
|
@@ -650,7 +659,7 @@ class SdsDatePickerComponent {
|
|
|
650
659
|
if (isAfter(calendarDate, startOfDay(selectedDateStartAsDate)) &&
|
|
651
660
|
isBefore(calendarDate, startOfDay(selectedDateEndAsDate)) &&
|
|
652
661
|
!this.disabledDates.some((day) => isSameDay(calendarDate, day))) {
|
|
653
|
-
css += ' bg-
|
|
662
|
+
css += ' bg-primary-light text-dark rounded-0';
|
|
654
663
|
}
|
|
655
664
|
else {
|
|
656
665
|
if (isSameDay(calendarDate, selectedDateStartAsDate)) {
|
|
@@ -884,10 +893,10 @@ class SdsDatePickerComponent {
|
|
|
884
893
|
}
|
|
885
894
|
}
|
|
886
895
|
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 });
|
|
887
|
-
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" }, 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' }\"\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 class=\"px-3 py-2\">\r\n <label>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-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"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 px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"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]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary 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\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)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
896
|
+
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 class=\"px-3 py-2\">\r\n <label>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 });
|
|
888
897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
|
|
889
898
|
type: Component,
|
|
890
|
-
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' }\"\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 class=\"px-3 py-2\">\r\n <label>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-4 py-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"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 px-4 py-3\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"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]=\"disabledDates\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n {{ cellData.text }}\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary 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\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)}\n"] }]
|
|
899
|
+
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 class=\"px-3 py-2\">\r\n <label>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"] }]
|
|
891
900
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
|
|
892
901
|
type: ContentChild,
|
|
893
902
|
args: ['display']
|
|
@@ -971,6 +980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
971
980
|
type: Input
|
|
972
981
|
}], previousPeriodAriaLabel: [{
|
|
973
982
|
type: Input
|
|
983
|
+
}], lockBeforeDate: [{
|
|
984
|
+
type: Input
|
|
985
|
+
}], lockBeforeDateHint: [{
|
|
986
|
+
type: Input
|
|
974
987
|
}], singleDatePickerBox: [{
|
|
975
988
|
type: ViewChild,
|
|
976
989
|
args: ['singleDatePickerBox', { static: false }]
|
|
@@ -1004,7 +1017,8 @@ SdsDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
1004
1017
|
DxDropDownButtonModule,
|
|
1005
1018
|
DxDropDownBoxModule,
|
|
1006
1019
|
DxSelectBoxModule,
|
|
1007
|
-
DxListModule
|
|
1020
|
+
DxListModule,
|
|
1021
|
+
SdsDatePipesModule], exports: [SdsDatePickerComponent] });
|
|
1008
1022
|
SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, imports: [A11yModule,
|
|
1009
1023
|
CommonModule,
|
|
1010
1024
|
FontAwesomeModule,
|
|
@@ -1015,7 +1029,8 @@ SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
1015
1029
|
DxDropDownButtonModule,
|
|
1016
1030
|
DxDropDownBoxModule,
|
|
1017
1031
|
DxSelectBoxModule,
|
|
1018
|
-
DxListModule
|
|
1032
|
+
DxListModule,
|
|
1033
|
+
SdsDatePipesModule] });
|
|
1019
1034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, decorators: [{
|
|
1020
1035
|
type: NgModule,
|
|
1021
1036
|
args: [{
|
|
@@ -1033,7 +1048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1033
1048
|
DxDropDownButtonModule,
|
|
1034
1049
|
DxDropDownBoxModule,
|
|
1035
1050
|
DxSelectBoxModule,
|
|
1036
|
-
DxListModule
|
|
1051
|
+
DxListModule,
|
|
1052
|
+
SdsDatePipesModule
|
|
1037
1053
|
],
|
|
1038
1054
|
exports: [
|
|
1039
1055
|
...components
|