@frame-ui-ng/components 0.2.0-beta.0 → 0.3.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/button/src/styles/button.css +15 -3
  2. package/dropdown-menu/src/styles/_vars.css +1 -1
  3. package/dropdown-menu/src/styles/dropdown-menu-item.css +87 -87
  4. package/fesm2022/frame-ui-ng-components-calendar.mjs +369 -263
  5. package/fesm2022/frame-ui-ng-components-calendar.mjs.map +1 -1
  6. package/fesm2022/frame-ui-ng-components-command.mjs +1 -1
  7. package/fesm2022/frame-ui-ng-components-command.mjs.map +1 -1
  8. package/fesm2022/frame-ui-ng-components-date-picker.mjs +232 -226
  9. package/fesm2022/frame-ui-ng-components-date-picker.mjs.map +1 -1
  10. package/fesm2022/frame-ui-ng-components-dropdown-menu.mjs +45 -22
  11. package/fesm2022/frame-ui-ng-components-dropdown-menu.mjs.map +1 -1
  12. package/fesm2022/frame-ui-ng-components-input.mjs +6 -3
  13. package/fesm2022/frame-ui-ng-components-input.mjs.map +1 -1
  14. package/fesm2022/frame-ui-ng-components-select.mjs +6 -3
  15. package/fesm2022/frame-ui-ng-components-select.mjs.map +1 -1
  16. package/fesm2022/frame-ui-ng-components-sidebar.mjs +47 -4
  17. package/fesm2022/frame-ui-ng-components-sidebar.mjs.map +1 -1
  18. package/fesm2022/frame-ui-ng-components-tooltip.mjs +263 -254
  19. package/fesm2022/frame-ui-ng-components-tooltip.mjs.map +1 -1
  20. package/fesm2022/frame-ui-ng-components.mjs +703 -519
  21. package/fesm2022/frame-ui-ng-components.mjs.map +1 -1
  22. package/input/src/styles/input-group.css +50 -0
  23. package/package.json +2 -2
  24. package/select/src/styles/select-trigger.css +7 -36
  25. package/src/styles/blueprint.css +4 -11
  26. package/styles/blueprint.css +4 -11
  27. package/tooltip/src/styles/tooltip.css +3 -9
  28. package/types/frame-ui-ng-components-calendar.d.ts +14 -0
  29. package/types/frame-ui-ng-components-context-menu.d.ts +2 -2
  30. package/types/frame-ui-ng-components-date-picker.d.ts +3 -1
  31. package/types/frame-ui-ng-components-dropdown-menu.d.ts +3 -3
  32. package/types/frame-ui-ng-components-input.d.ts +6 -3
  33. package/types/frame-ui-ng-components-select.d.ts +6 -3
  34. package/types/frame-ui-ng-components-sidebar.d.ts +8 -1
  35. package/types/frame-ui-ng-components-tooltip.d.ts +43 -73
  36. package/types/frame-ui-ng-components.d.ts +84 -55
package/fesm2022/frame-ui-ng-components-date-picker.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
2
2
  import { NgTemplateOutlet } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { input, booleanAttribute, output, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
4
+ import { input, booleanAttribute, output, viewChild, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
5
5
  import { FrCalendar } from '@frame-ui-ng/components/calendar';
6
6
  import { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';
7
7
 
@@ -63,6 +63,7 @@ class FrDatePicker extends FrControlValueAccessor {
63
63
  valueChange = output();
64
64
  openChange = output();
65
65
  monthChange = output();
66
+ calendar = viewChild(FrCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
66
67
  positions = POSITIONS;
67
68
  isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
68
69
  overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
@@ -163,6 +164,9 @@ class FrDatePicker extends FrControlValueAccessor {
163
164
  handlePositionChange(event) {
164
165
  this.overlaySide.set(event.connectionPair.overlayY === 'bottom' ? 'top' : 'bottom');
165
166
  }
167
+ focusCalendar() {
168
+ this.calendar()?.focusActiveDate();
169
+ }
166
170
  overlayPanelClasses() {
167
171
  return ['frame-date-picker-overlay', `frame-date-picker-overlay--${this.overlaySide()}`];
168
172
  }
@@ -178,118 +182,119 @@ class FrDatePicker extends FrControlValueAccessor {
178
182
  this.markAsTouched();
179
183
  }
180
184
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
181
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor(FrDatePicker)], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
182
- <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
183
- @if (editable()) {
184
- <span class="frame-date-picker__input-wrap">
185
- <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
186
- <input
187
- class="frame-date-picker__input"
188
- type="text"
189
- [disabled]="disabled()"
190
- [readOnly]="readonlyInput()"
191
- [placeholder]="placeholder()"
192
- [value]="inputValue()"
193
- [attr.aria-expanded]="isOpen()"
194
- [attr.aria-invalid]="invalid() ? 'true' : null"
195
- aria-haspopup="dialog"
196
- (focus)="open()"
197
- (click)="open()"
198
- (input)="handleInput($any($event.target).value)"
199
- (change)="commitInput($any($event.target).value)"
200
- (keydown)="handleTriggerKeydown($event)"
201
- (blur)="markAsTouched()"
202
- />
203
- </span>
204
- } @else {
205
- <button
206
- class="frame-date-picker__trigger"
207
- type="button"
208
- [disabled]="disabled()"
209
- [attr.aria-expanded]="isOpen()"
210
- [attr.aria-invalid]="invalid() ? 'true' : null"
211
- aria-haspopup="dialog"
212
- (click)="toggle()"
213
- (keydown)="handleTriggerKeydown($event)"
214
- >
215
- <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
216
- <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
217
- {{ displayValue() || placeholder() }}
218
- </span>
219
- </button>
220
- }
221
- </span>
222
-
223
- <ng-template
224
- cdkConnectedOverlay
225
- [cdkConnectedOverlayOrigin]="origin"
226
- [cdkConnectedOverlayOpen]="isOpen()"
227
- [cdkConnectedOverlayPositions]="positions"
228
- [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
229
- [cdkConnectedOverlayPush]="true"
230
- [cdkConnectedOverlayViewportMargin]="12"
231
- (overlayOutsideClick)="close()"
232
- (detach)="close()"
233
- (positionChange)="handlePositionChange($event)"
234
- >
235
- <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
236
- @if (presets().length) {
237
- <div class="frame-date-picker__presets" aria-label="Date presets">
238
- @for (preset of presets(); track preset.label) {
239
- <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
240
- {{ preset.label }}
241
- </button>
242
- }
243
- </div>
244
- }
245
-
246
- <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
247
-
248
- <frame-calendar
249
- [mode]="mode()"
250
- [captionLayout]="captionLayout()"
251
- [numberOfMonths]="numberOfMonths()"
252
- [firstDayOfWeek]="firstDayOfWeek()"
253
- [locale]="locale()"
254
- [timeZone]="timeZone()"
255
- [dir]="dir()"
256
- [fromYear]="fromYear()"
257
- [toYear]="toYear()"
258
- [showOutsideDays]="showOutsideDays()"
259
- [showWeekNumber]="showWeekNumber()"
260
- [disabled]="disabled()"
261
- [disabledDates]="disabledDates()"
262
- [dateLabels]="dateLabels()"
263
- [disabledMatcher]="disabledMatcher()"
264
- [cellTemplate]="cellTemplate()"
265
- [previousMonthTemplate]="previousMonthTemplate()"
266
- [nextMonthTemplate]="nextMonthTemplate()"
267
- [previousMonthIcon]="previousMonthIcon()"
268
- [nextMonthIcon]="nextMonthIcon()"
269
- [previousMonthLabel]="previousMonthLabel()"
270
- [nextMonthLabel]="nextMonthLabel()"
271
- [month]="month()"
272
- [selected]="calendarValue()"
273
- (selectedChange)="selectCalendarValue($any($event))"
274
- (monthChange)="monthChange.emit($event)"
275
- />
276
-
277
- @if (showTime() && mode() === 'single') {
278
- <label class="frame-date-picker__time">
279
- <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
280
- <input
281
- class="frame-date-picker__time-input"
282
- type="time"
283
- [disabled]="disabled() || !singleDate()"
284
- [value]="timeValue()"
285
- (change)="setTime($any($event.target).value)"
286
- />
287
- </label>
288
- }
289
-
290
- <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
291
- </div>
292
- </ng-template>
185
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor(FrDatePicker)], viewQueries: [{ propertyName: "calendar", first: true, predicate: FrCalendar, descendants: true, isSignal: true }], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
186
+ <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
187
+ @if (editable()) {
188
+ <span class="frame-date-picker__input-wrap">
189
+ <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
190
+ <input
191
+ class="frame-date-picker__input"
192
+ type="text"
193
+ [disabled]="disabled()"
194
+ [readOnly]="readonlyInput()"
195
+ [placeholder]="placeholder()"
196
+ [value]="inputValue()"
197
+ [attr.aria-expanded]="isOpen()"
198
+ [attr.aria-invalid]="invalid() ? 'true' : null"
199
+ aria-haspopup="dialog"
200
+ (focus)="open()"
201
+ (click)="open()"
202
+ (input)="handleInput($any($event.target).value)"
203
+ (change)="commitInput($any($event.target).value)"
204
+ (keydown)="handleTriggerKeydown($event)"
205
+ (blur)="markAsTouched()"
206
+ />
207
+ </span>
208
+ } @else {
209
+ <button
210
+ class="frame-date-picker__trigger"
211
+ type="button"
212
+ [disabled]="disabled()"
213
+ [attr.aria-expanded]="isOpen()"
214
+ [attr.aria-invalid]="invalid() ? 'true' : null"
215
+ aria-haspopup="dialog"
216
+ (click)="toggle()"
217
+ (keydown)="handleTriggerKeydown($event)"
218
+ >
219
+ <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
220
+ <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
221
+ {{ displayValue() || placeholder() }}
222
+ </span>
223
+ </button>
224
+ }
225
+ </span>
226
+
227
+ <ng-template
228
+ cdkConnectedOverlay
229
+ [cdkConnectedOverlayOrigin]="origin"
230
+ [cdkConnectedOverlayOpen]="isOpen()"
231
+ [cdkConnectedOverlayPositions]="positions"
232
+ [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
233
+ [cdkConnectedOverlayPush]="true"
234
+ [cdkConnectedOverlayViewportMargin]="12"
235
+ (overlayOutsideClick)="close()"
236
+ (attach)="focusCalendar()"
237
+ (detach)="close()"
238
+ (positionChange)="handlePositionChange($event)"
239
+ >
240
+ <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
241
+ @if (presets().length) {
242
+ <div class="frame-date-picker__presets" aria-label="Date presets">
243
+ @for (preset of presets(); track preset.label) {
244
+ <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
245
+ {{ preset.label }}
246
+ </button>
247
+ }
248
+ </div>
249
+ }
250
+
251
+ <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
252
+
253
+ <frame-calendar
254
+ [mode]="mode()"
255
+ [captionLayout]="captionLayout()"
256
+ [numberOfMonths]="numberOfMonths()"
257
+ [firstDayOfWeek]="firstDayOfWeek()"
258
+ [locale]="locale()"
259
+ [timeZone]="timeZone()"
260
+ [dir]="dir()"
261
+ [fromYear]="fromYear()"
262
+ [toYear]="toYear()"
263
+ [showOutsideDays]="showOutsideDays()"
264
+ [showWeekNumber]="showWeekNumber()"
265
+ [disabled]="disabled()"
266
+ [disabledDates]="disabledDates()"
267
+ [dateLabels]="dateLabels()"
268
+ [disabledMatcher]="disabledMatcher()"
269
+ [cellTemplate]="cellTemplate()"
270
+ [previousMonthTemplate]="previousMonthTemplate()"
271
+ [nextMonthTemplate]="nextMonthTemplate()"
272
+ [previousMonthIcon]="previousMonthIcon()"
273
+ [nextMonthIcon]="nextMonthIcon()"
274
+ [previousMonthLabel]="previousMonthLabel()"
275
+ [nextMonthLabel]="nextMonthLabel()"
276
+ [month]="month()"
277
+ [selected]="calendarValue()"
278
+ (selectedChange)="selectCalendarValue($any($event))"
279
+ (monthChange)="monthChange.emit($event)"
280
+ />
281
+
282
+ @if (showTime() && mode() === 'single') {
283
+ <label class="frame-date-picker__time">
284
+ <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
285
+ <input
286
+ class="frame-date-picker__time-input"
287
+ type="time"
288
+ [disabled]="disabled() || !singleDate()"
289
+ [value]="timeValue()"
290
+ (change)="setTime($any($event.target).value)"
291
+ />
292
+ </label>
293
+ }
294
+
295
+ <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
296
+ </div>
297
+ </ng-template>
293
298
  `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FrCalendar, selector: "frame-calendar", inputs: ["mode", "captionLayout", "numberOfMonths", "firstDayOfWeek", "locale", "timeZone", "dir", "fromYear", "toYear", "showOutsideDays", "showWeekNumber", "disabled", "disabledDates", "dateLabels", "disabledMatcher", "cellTemplate", "previousMonthTemplate", "nextMonthTemplate", "previousMonthIcon", "nextMonthIcon", "previousMonthLabel", "nextMonthLabel", "month", "selected"], outputs: ["selectedChange", "monthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
294
299
  }
295
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, decorators: [{
@@ -308,121 +313,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
308
313
  '[attr.data-mode]': 'mode()',
309
314
  '[attr.dir]': 'dir()',
310
315
  },
311
- template: `
312
- <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
313
- @if (editable()) {
314
- <span class="frame-date-picker__input-wrap">
315
- <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
316
- <input
317
- class="frame-date-picker__input"
318
- type="text"
319
- [disabled]="disabled()"
320
- [readOnly]="readonlyInput()"
321
- [placeholder]="placeholder()"
322
- [value]="inputValue()"
323
- [attr.aria-expanded]="isOpen()"
324
- [attr.aria-invalid]="invalid() ? 'true' : null"
325
- aria-haspopup="dialog"
326
- (focus)="open()"
327
- (click)="open()"
328
- (input)="handleInput($any($event.target).value)"
329
- (change)="commitInput($any($event.target).value)"
330
- (keydown)="handleTriggerKeydown($event)"
331
- (blur)="markAsTouched()"
332
- />
333
- </span>
334
- } @else {
335
- <button
336
- class="frame-date-picker__trigger"
337
- type="button"
338
- [disabled]="disabled()"
339
- [attr.aria-expanded]="isOpen()"
340
- [attr.aria-invalid]="invalid() ? 'true' : null"
341
- aria-haspopup="dialog"
342
- (click)="toggle()"
343
- (keydown)="handleTriggerKeydown($event)"
344
- >
345
- <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
346
- <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
347
- {{ displayValue() || placeholder() }}
348
- </span>
349
- </button>
350
- }
351
- </span>
352
-
353
- <ng-template
354
- cdkConnectedOverlay
355
- [cdkConnectedOverlayOrigin]="origin"
356
- [cdkConnectedOverlayOpen]="isOpen()"
357
- [cdkConnectedOverlayPositions]="positions"
358
- [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
359
- [cdkConnectedOverlayPush]="true"
360
- [cdkConnectedOverlayViewportMargin]="12"
361
- (overlayOutsideClick)="close()"
362
- (detach)="close()"
363
- (positionChange)="handlePositionChange($event)"
364
- >
365
- <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
366
- @if (presets().length) {
367
- <div class="frame-date-picker__presets" aria-label="Date presets">
368
- @for (preset of presets(); track preset.label) {
369
- <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
370
- {{ preset.label }}
371
- </button>
372
- }
373
- </div>
374
- }
375
-
376
- <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
377
-
378
- <frame-calendar
379
- [mode]="mode()"
380
- [captionLayout]="captionLayout()"
381
- [numberOfMonths]="numberOfMonths()"
382
- [firstDayOfWeek]="firstDayOfWeek()"
383
- [locale]="locale()"
384
- [timeZone]="timeZone()"
385
- [dir]="dir()"
386
- [fromYear]="fromYear()"
387
- [toYear]="toYear()"
388
- [showOutsideDays]="showOutsideDays()"
389
- [showWeekNumber]="showWeekNumber()"
390
- [disabled]="disabled()"
391
- [disabledDates]="disabledDates()"
392
- [dateLabels]="dateLabels()"
393
- [disabledMatcher]="disabledMatcher()"
394
- [cellTemplate]="cellTemplate()"
395
- [previousMonthTemplate]="previousMonthTemplate()"
396
- [nextMonthTemplate]="nextMonthTemplate()"
397
- [previousMonthIcon]="previousMonthIcon()"
398
- [nextMonthIcon]="nextMonthIcon()"
399
- [previousMonthLabel]="previousMonthLabel()"
400
- [nextMonthLabel]="nextMonthLabel()"
401
- [month]="month()"
402
- [selected]="calendarValue()"
403
- (selectedChange)="selectCalendarValue($any($event))"
404
- (monthChange)="monthChange.emit($event)"
405
- />
406
-
407
- @if (showTime() && mode() === 'single') {
408
- <label class="frame-date-picker__time">
409
- <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
410
- <input
411
- class="frame-date-picker__time-input"
412
- type="time"
413
- [disabled]="disabled() || !singleDate()"
414
- [value]="timeValue()"
415
- (change)="setTime($any($event.target).value)"
416
- />
417
- </label>
418
- }
419
-
420
- <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
421
- </div>
422
- </ng-template>
316
+ template: `
317
+ <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
318
+ @if (editable()) {
319
+ <span class="frame-date-picker__input-wrap">
320
+ <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
321
+ <input
322
+ class="frame-date-picker__input"
323
+ type="text"
324
+ [disabled]="disabled()"
325
+ [readOnly]="readonlyInput()"
326
+ [placeholder]="placeholder()"
327
+ [value]="inputValue()"
328
+ [attr.aria-expanded]="isOpen()"
329
+ [attr.aria-invalid]="invalid() ? 'true' : null"
330
+ aria-haspopup="dialog"
331
+ (focus)="open()"
332
+ (click)="open()"
333
+ (input)="handleInput($any($event.target).value)"
334
+ (change)="commitInput($any($event.target).value)"
335
+ (keydown)="handleTriggerKeydown($event)"
336
+ (blur)="markAsTouched()"
337
+ />
338
+ </span>
339
+ } @else {
340
+ <button
341
+ class="frame-date-picker__trigger"
342
+ type="button"
343
+ [disabled]="disabled()"
344
+ [attr.aria-expanded]="isOpen()"
345
+ [attr.aria-invalid]="invalid() ? 'true' : null"
346
+ aria-haspopup="dialog"
347
+ (click)="toggle()"
348
+ (keydown)="handleTriggerKeydown($event)"
349
+ >
350
+ <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
351
+ <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
352
+ {{ displayValue() || placeholder() }}
353
+ </span>
354
+ </button>
355
+ }
356
+ </span>
357
+
358
+ <ng-template
359
+ cdkConnectedOverlay
360
+ [cdkConnectedOverlayOrigin]="origin"
361
+ [cdkConnectedOverlayOpen]="isOpen()"
362
+ [cdkConnectedOverlayPositions]="positions"
363
+ [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
364
+ [cdkConnectedOverlayPush]="true"
365
+ [cdkConnectedOverlayViewportMargin]="12"
366
+ (overlayOutsideClick)="close()"
367
+ (attach)="focusCalendar()"
368
+ (detach)="close()"
369
+ (positionChange)="handlePositionChange($event)"
370
+ >
371
+ <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
372
+ @if (presets().length) {
373
+ <div class="frame-date-picker__presets" aria-label="Date presets">
374
+ @for (preset of presets(); track preset.label) {
375
+ <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
376
+ {{ preset.label }}
377
+ </button>
378
+ }
379
+ </div>
380
+ }
381
+
382
+ <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
383
+
384
+ <frame-calendar
385
+ [mode]="mode()"
386
+ [captionLayout]="captionLayout()"
387
+ [numberOfMonths]="numberOfMonths()"
388
+ [firstDayOfWeek]="firstDayOfWeek()"
389
+ [locale]="locale()"
390
+ [timeZone]="timeZone()"
391
+ [dir]="dir()"
392
+ [fromYear]="fromYear()"
393
+ [toYear]="toYear()"
394
+ [showOutsideDays]="showOutsideDays()"
395
+ [showWeekNumber]="showWeekNumber()"
396
+ [disabled]="disabled()"
397
+ [disabledDates]="disabledDates()"
398
+ [dateLabels]="dateLabels()"
399
+ [disabledMatcher]="disabledMatcher()"
400
+ [cellTemplate]="cellTemplate()"
401
+ [previousMonthTemplate]="previousMonthTemplate()"
402
+ [nextMonthTemplate]="nextMonthTemplate()"
403
+ [previousMonthIcon]="previousMonthIcon()"
404
+ [nextMonthIcon]="nextMonthIcon()"
405
+ [previousMonthLabel]="previousMonthLabel()"
406
+ [nextMonthLabel]="nextMonthLabel()"
407
+ [month]="month()"
408
+ [selected]="calendarValue()"
409
+ (selectedChange)="selectCalendarValue($any($event))"
410
+ (monthChange)="monthChange.emit($event)"
411
+ />
412
+
413
+ @if (showTime() && mode() === 'single') {
414
+ <label class="frame-date-picker__time">
415
+ <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
416
+ <input
417
+ class="frame-date-picker__time-input"
418
+ type="time"
419
+ [disabled]="disabled() || !singleDate()"
420
+ [value]="timeValue()"
421
+ (change)="setTime($any($event.target).value)"
422
+ />
423
+ </label>
424
+ }
425
+
426
+ <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
427
+ </div>
428
+ </ng-template>
423
429
  `,
424
430
  }]
425
- }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });
431
+ }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FrCalendar), { isSignal: true }] }] } });
426
432
  function normalizeValue(value, mode) {
427
433
  if (!value) {
428
434
  return mode === 'range' ? { from: null, to: null } : null;