@fundamental-ngx/core 0.58.0-rc.73 → 0.58.0-rc.75
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/calendar/index.d.ts +40 -27
- package/date-picker/index.d.ts +25 -14
- package/datetime-picker/index.d.ts +23 -13
- package/fesm2022/fundamental-ngx-core-calendar.mjs +105 -98
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +34 -12
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +26 -18
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/package.json +29 -29
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgTemplateOutlet, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, inject, Injector, ElementRef, forwardRef,
|
|
3
|
+
import { InjectionToken, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, input, booleanAttribute, inject, Injector, ElementRef, forwardRef, Input, Output, Optional, NgModule } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { InitialFocusDirective, DynamicComponentService, FocusTrapService } from '@fundamental-ngx/cdk/utils';
|
|
6
6
|
import { ButtonBarComponent, BarComponent, BarRightDirective, BarElementDirective } from '@fundamental-ngx/core/bar';
|
|
@@ -190,14 +190,6 @@ class DatetimePickerComponent {
|
|
|
190
190
|
* @deprecated Popover is toggled with f4 key
|
|
191
191
|
*/
|
|
192
192
|
this.buttonFocusable = false;
|
|
193
|
-
/**
|
|
194
|
-
* Special days mark, it can be used by passing array of object with
|
|
195
|
-
* Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
|
|
196
|
-
* https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
|
|
197
|
-
* Rule accepts method with FdDate object as a parameter. ex:
|
|
198
|
-
* `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.
|
|
199
|
-
*/
|
|
200
|
-
this.specialDaysRules = [];
|
|
201
193
|
/**
|
|
202
194
|
* Object to customize year grid,
|
|
203
195
|
* Row, Columns and method to display year can be modified
|
|
@@ -258,6 +250,24 @@ class DatetimePickerComponent {
|
|
|
258
250
|
this.onClose = new EventEmitter();
|
|
259
251
|
/** Event emitted when datepicker changes it's "touched" state. */
|
|
260
252
|
this.touched = new EventEmitter();
|
|
253
|
+
/**
|
|
254
|
+
* Special days mark, it can be used by passing array of object with
|
|
255
|
+
* Special day number, list 1-20 [class:`fd-calendar__item--legend-{{number}}`] is available there:
|
|
256
|
+
* https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section
|
|
257
|
+
* Rule accepts method with FdDate object as a parameter. ex:
|
|
258
|
+
* `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.
|
|
259
|
+
*/
|
|
260
|
+
this.specialDaysRules = input([], ...(ngDevMode ? [{ debugName: "specialDaysRules" }] : []));
|
|
261
|
+
/**
|
|
262
|
+
* Whether to show the calendar legend below the calendar.
|
|
263
|
+
* The legend displays explanations for special day markers.
|
|
264
|
+
*/
|
|
265
|
+
this.showCalendarLegend = input(false, ...(ngDevMode ? [{ debugName: "showCalendarLegend", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
266
|
+
/**
|
|
267
|
+
* Whether the calendar legend should display in a single column layout.
|
|
268
|
+
* When false (default), the legend items flow into multiple columns automatically.
|
|
269
|
+
*/
|
|
270
|
+
this.legendCol = input(false, ...(ngDevMode ? [{ debugName: "legendCol", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
261
271
|
/** @hidden */
|
|
262
272
|
this._message = null;
|
|
263
273
|
/** @hidden */
|
|
@@ -311,7 +321,7 @@ class DatetimePickerComponent {
|
|
|
311
321
|
if (changes.date) {
|
|
312
322
|
this._setTempDateTime();
|
|
313
323
|
}
|
|
314
|
-
if (['displayHours', 'displayMinutes', 'displaySeconds', 'meridian'].some((
|
|
324
|
+
if (['displayHours', 'displayMinutes', 'displaySeconds', 'meridian'].some((prop) => prop in changes)) {
|
|
315
325
|
this._calculateTimeOptions();
|
|
316
326
|
}
|
|
317
327
|
if ('isOpen' in changes) {
|
|
@@ -649,7 +659,7 @@ class DatetimePickerComponent {
|
|
|
649
659
|
});
|
|
650
660
|
}
|
|
651
661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }, { token: i2.PopoverFormMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: "placeholder", placement: "placement", appendTo: "appendTo", disabled: "disabled", inputId: "inputId", required: "required", customDateTimeFormat: "customDateTimeFormat", meridian: "meridian", displaySeconds: "displaySeconds", ariaLabelledBy: "ariaLabelledBy", message: "message", messageTriggers: "messageTriggers", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", date: "date", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable",
|
|
662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, customDateTimeFormat: { classPropertyName: "customDateTimeFormat", publicName: "customDateTimeFormat", isSignal: false, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: false, isRequired: false, transformFunction: null }, displaySeconds: { classPropertyName: "displaySeconds", publicName: "displaySeconds", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, messageTriggers: { classPropertyName: "messageTriggers", publicName: "messageTriggers", isSignal: false, isRequired: false, transformFunction: null }, displayMinutes: { classPropertyName: "displayMinutes", publicName: "displayMinutes", isSignal: false, isRequired: false, transformFunction: null }, displayHours: { classPropertyName: "displayHours", publicName: "displayHours", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, keepTwoDigitsTime: { classPropertyName: "keepTwoDigitsTime", publicName: "keepTwoDigitsTime", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, spinnerButtons: { classPropertyName: "spinnerButtons", publicName: "spinnerButtons", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: true, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", dateChange: "dateChange", calendarChange: "calendarChange", timeChange: "timeChange", onClose: "onClose", touched: "touched" }, host: { classAttribute: "fd-datetime" }, providers: [
|
|
653
663
|
{
|
|
654
664
|
provide: NG_VALUE_ACCESSOR,
|
|
655
665
|
useExisting: forwardRef(() => DatetimePickerComponent),
|
|
@@ -668,7 +678,7 @@ class DatetimePickerComponent {
|
|
|
668
678
|
PopoverFormMessageService,
|
|
669
679
|
PopoverService,
|
|
670
680
|
DynamicComponentService
|
|
671
|
-
], viewQueries: [{ propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_formMessageTemplate", first: true, predicate: ["formMessageTemplate"], descendants: true }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [placement]=\"placement\"\n [appendTo]=\"appendTo\"\n [class.fd-popover-full-width]=\"isFullWidth\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body\n aria-labelledby=\"fd-form-message\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-hidden]=\"!isOpen\"\n [style.display]=\"'block'\"\n >\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n }\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n #inputGroupComponent\n [state]=\"state\"\n [disabled]=\"disabled\"\n [isControl]=\"true\"\n [button]=\"true\"\n [buttonFocusable]=\"buttonFocusable\"\n [class.fd-datetime__mobile-control]=\"mobile\"\n glyph=\"date-time\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"togglePopover()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n [attr.id]=\"inputId\"\n [attr.aria-required]=\"required\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n (keydown.f4)=\"togglePopover()\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (blur)=\"handleOnTouched($event)\"\n (click)=\"mobile && openPopover()\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n @if (_message) {\n <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #pickerTemplate>\n <div class=\"fd-datetime__wrapper\">\n <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n <div\n class=\"fd-datetime__display-type-switcher\"\n [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n >\n <fd-segmented-button [(ngModel)]=\"_displayType\">\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n value=\"date\"\n ></button>\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n value=\"time\"\n ></button>\n </fd-segmented-button>\n </div>\n <ng-content></ng-content>\n <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n <fd-calendar\n [ngClass]=\"[\n !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n ]\"\n calType=\"single\"\n [activeView]=\"activeView\"\n [disableFunction]=\"disableFunction || null\"\n [selectedDate]=\"_tempDate\"\n [escapeFocusFunction]=\"null\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (selectedDateChange)=\"handleDateChange($event)\"\n (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n ></fd-calendar>\n @if (!mobilePortrait) {\n <div class=\"fd-datetime__separator\"></div>\n }\n @if (isOpen) {\n <fd-time\n [ngClass]=\"[\n !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n ]\"\n [disabled]=\"disabled\"\n [elementsAtOnce]=\"5\"\n [keepTwoDigits]=\"keepTwoDigitsTime\"\n [ngModel]=\"_tempTime\"\n [spinnerButtons]=\"spinnerButtons\"\n [meridian]=\"_meridian\"\n [displaySeconds]=\"_displaySeconds\"\n [displayMinutes]=\"_displayMinutes\"\n [displayHours]=\"_displayHours\"\n (ngModelChange)=\"handleTimeChange($event)\"\n ></fd-time>\n }\n </div>\n @if (!mobile && showFooter) {\n <div fd-popover-body-footer>\n <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"emphasized\"\n [disabled]=\"!_tempDate\"\n [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n (click)=\"submit()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"transparent\"\n [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "associatedLegendId", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: TranslateDayPeriodPipe, name: "translateDayPeriod" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
681
|
+
], viewQueries: [{ propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_formMessageTemplate", first: true, predicate: ["formMessageTemplate"], descendants: true }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }, { propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [placement]=\"placement\"\n [appendTo]=\"appendTo\"\n [class.fd-popover-full-width]=\"isFullWidth\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body\n aria-labelledby=\"fd-form-message\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-hidden]=\"!isOpen\"\n [style.display]=\"'block'\"\n >\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n }\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n #inputGroupComponent\n [state]=\"state\"\n [disabled]=\"disabled\"\n [isControl]=\"true\"\n [button]=\"true\"\n [buttonFocusable]=\"buttonFocusable\"\n [class.fd-datetime__mobile-control]=\"mobile\"\n glyph=\"date-time\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"togglePopover()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n [attr.id]=\"inputId\"\n [attr.aria-required]=\"required\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n (keydown.f4)=\"togglePopover()\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (blur)=\"handleOnTouched($event)\"\n (click)=\"mobile && openPopover()\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n @if (_message) {\n <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #pickerTemplate>\n <div class=\"fd-datetime__wrapper\">\n <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n <div\n class=\"fd-datetime__display-type-switcher\"\n [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n >\n <fd-segmented-button [(ngModel)]=\"_displayType\">\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n value=\"date\"\n ></button>\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n value=\"time\"\n ></button>\n </fd-segmented-button>\n </div>\n <ng-content></ng-content>\n <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n <fd-calendar\n [ngClass]=\"[\n !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n ]\"\n calType=\"single\"\n [activeView]=\"activeView\"\n [disableFunction]=\"disableFunction || null\"\n [selectedDate]=\"_tempDate\"\n [escapeFocusFunction]=\"null\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules()\"\n [showCalendarLegend]=\"showCalendarLegend()\"\n [legendCol]=\"legendCol()\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (selectedDateChange)=\"handleDateChange($event)\"\n (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n ></fd-calendar>\n @if (!mobilePortrait) {\n <div class=\"fd-datetime__separator\"></div>\n }\n @if (isOpen) {\n <fd-time\n [ngClass]=\"[\n !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n ]\"\n [disabled]=\"disabled\"\n [elementsAtOnce]=\"5\"\n [keepTwoDigits]=\"keepTwoDigitsTime\"\n [ngModel]=\"_tempTime\"\n [spinnerButtons]=\"spinnerButtons\"\n [meridian]=\"_meridian\"\n [displaySeconds]=\"_displaySeconds\"\n [displayMinutes]=\"_displayMinutes\"\n [displayHours]=\"_displayHours\"\n (ngModelChange)=\"handleTimeChange($event)\"\n ></fd-time>\n }\n </div>\n @if (!mobile && showFooter) {\n <div fd-popover-body-footer>\n <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"emphasized\"\n [disabled]=\"!_tempDate\"\n [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n (click)=\"submit()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"transparent\"\n [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "showCalendarLegend", "legendCol", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: TranslateDayPeriodPipe, name: "translateDayPeriod" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
672
682
|
}
|
|
673
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatetimePickerComponent, decorators: [{
|
|
674
684
|
type: Component,
|
|
@@ -713,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
713
723
|
BarElementDirective,
|
|
714
724
|
FdTranslatePipe,
|
|
715
725
|
TranslateDayPeriodPipe
|
|
716
|
-
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [placement]=\"placement\"\n [appendTo]=\"appendTo\"\n [class.fd-popover-full-width]=\"isFullWidth\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body\n aria-labelledby=\"fd-form-message\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-hidden]=\"!isOpen\"\n [style.display]=\"'block'\"\n >\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n }\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n #inputGroupComponent\n [state]=\"state\"\n [disabled]=\"disabled\"\n [isControl]=\"true\"\n [button]=\"true\"\n [buttonFocusable]=\"buttonFocusable\"\n [class.fd-datetime__mobile-control]=\"mobile\"\n glyph=\"date-time\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"togglePopover()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n [attr.id]=\"inputId\"\n [attr.aria-required]=\"required\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n (keydown.f4)=\"togglePopover()\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (blur)=\"handleOnTouched($event)\"\n (click)=\"mobile && openPopover()\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n @if (_message) {\n <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #pickerTemplate>\n <div class=\"fd-datetime__wrapper\">\n <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n <div\n class=\"fd-datetime__display-type-switcher\"\n [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n >\n <fd-segmented-button [(ngModel)]=\"_displayType\">\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n value=\"date\"\n ></button>\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n value=\"time\"\n ></button>\n </fd-segmented-button>\n </div>\n <ng-content></ng-content>\n <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n <fd-calendar\n [ngClass]=\"[\n !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n ]\"\n calType=\"single\"\n [activeView]=\"activeView\"\n [disableFunction]=\"disableFunction || null\"\n [selectedDate]=\"_tempDate\"\n [escapeFocusFunction]=\"null\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (selectedDateChange)=\"handleDateChange($event)\"\n (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n ></fd-calendar>\n @if (!mobilePortrait) {\n <div class=\"fd-datetime__separator\"></div>\n }\n @if (isOpen) {\n <fd-time\n [ngClass]=\"[\n !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n ]\"\n [disabled]=\"disabled\"\n [elementsAtOnce]=\"5\"\n [keepTwoDigits]=\"keepTwoDigitsTime\"\n [ngModel]=\"_tempTime\"\n [spinnerButtons]=\"spinnerButtons\"\n [meridian]=\"_meridian\"\n [displaySeconds]=\"_displaySeconds\"\n [displayMinutes]=\"_displayMinutes\"\n [displayHours]=\"_displayHours\"\n (ngModelChange)=\"handleTimeChange($event)\"\n ></fd-time>\n }\n </div>\n @if (!mobile && showFooter) {\n <div fd-popover-body-footer>\n <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"emphasized\"\n [disabled]=\"!_tempDate\"\n [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n (click)=\"submit()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"transparent\"\n [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"] }]
|
|
726
|
+
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [triggers]=\"[]\"\n [disabled]=\"disabled\"\n [placement]=\"placement\"\n [appendTo]=\"appendTo\"\n [class.fd-popover-full-width]=\"isFullWidth\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body\n aria-labelledby=\"fd-form-message\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-hidden]=\"!isOpen\"\n [style.display]=\"'block'\"\n >\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n }\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-input-group\n #inputGroupComponent\n [state]=\"state\"\n [disabled]=\"disabled\"\n [isControl]=\"true\"\n [button]=\"true\"\n [buttonFocusable]=\"buttonFocusable\"\n [class.fd-datetime__mobile-control]=\"mobile\"\n glyph=\"date-time\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"togglePopover()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n [attr.id]=\"inputId\"\n [attr.aria-required]=\"required\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n (keydown.f4)=\"togglePopover()\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (blur)=\"handleOnTouched($event)\"\n (click)=\"mobile && openPopover()\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n @if (_message) {\n <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #pickerTemplate>\n <div class=\"fd-datetime__wrapper\">\n <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n <div\n class=\"fd-datetime__display-type-switcher\"\n [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n >\n <fd-segmented-button [(ngModel)]=\"_displayType\">\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n value=\"date\"\n ></button>\n <button\n fd-button\n [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n value=\"time\"\n ></button>\n </fd-segmented-button>\n </div>\n <ng-content></ng-content>\n <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n <fd-calendar\n [ngClass]=\"[\n !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n ]\"\n calType=\"single\"\n [activeView]=\"activeView\"\n [disableFunction]=\"disableFunction || null\"\n [selectedDate]=\"_tempDate\"\n [escapeFocusFunction]=\"null\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules()\"\n [showCalendarLegend]=\"showCalendarLegend()\"\n [legendCol]=\"legendCol()\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (selectedDateChange)=\"handleDateChange($event)\"\n (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n ></fd-calendar>\n @if (!mobilePortrait) {\n <div class=\"fd-datetime__separator\"></div>\n }\n @if (isOpen) {\n <fd-time\n [ngClass]=\"[\n !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n ]\"\n [disabled]=\"disabled\"\n [elementsAtOnce]=\"5\"\n [keepTwoDigits]=\"keepTwoDigitsTime\"\n [ngModel]=\"_tempTime\"\n [spinnerButtons]=\"spinnerButtons\"\n [meridian]=\"_meridian\"\n [displaySeconds]=\"_displaySeconds\"\n [displayMinutes]=\"_displayMinutes\"\n [displayHours]=\"_displayHours\"\n (ngModelChange)=\"handleTimeChange($event)\"\n ></fd-time>\n }\n </div>\n @if (!mobile && showFooter) {\n <div fd-popover-body-footer>\n <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"emphasized\"\n [disabled]=\"!_tempDate\"\n [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n (click)=\"submit()\"\n ></button>\n </fd-bar-element>\n <fd-bar-element>\n <button\n fd-button\n fdType=\"transparent\"\n [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media(max-width:60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"] }]
|
|
717
727
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
|
|
718
728
|
type: Optional
|
|
719
729
|
}] }, { type: undefined, decorators: [{
|
|
@@ -767,8 +777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
767
777
|
type: Input
|
|
768
778
|
}], buttonFocusable: [{
|
|
769
779
|
type: Input
|
|
770
|
-
}], specialDaysRules: [{
|
|
771
|
-
type: Input
|
|
772
780
|
}], yearGrid: [{
|
|
773
781
|
type: Input
|
|
774
782
|
}], aggregatedYearGrid: [{
|
|
@@ -810,9 +818,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
810
818
|
type: Output
|
|
811
819
|
}], touched: [{
|
|
812
820
|
type: Output
|
|
813
|
-
}], _calendarCmp: [{
|
|
814
|
-
type: ViewChild,
|
|
815
|
-
args: [CalendarComponent, { static: false }]
|
|
816
821
|
}], _inputGroupElement: [{
|
|
817
822
|
type: ViewChild,
|
|
818
823
|
args: ['inputGroupComponent', {
|
|
@@ -829,6 +834,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
829
834
|
}], _pickerTemplate: [{
|
|
830
835
|
type: ViewChild,
|
|
831
836
|
args: ['pickerTemplate']
|
|
837
|
+
}], _calendarCmp: [{
|
|
838
|
+
type: ViewChild,
|
|
839
|
+
args: [CalendarComponent, { static: false }]
|
|
832
840
|
}], disableFunction: [{
|
|
833
841
|
type: Input
|
|
834
842
|
}] } });
|