@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 } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, inject, DestroyRef, Injector, ElementRef, forwardRef,
|
|
3
|
+
import { InjectionToken, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, input, booleanAttribute, inject, DestroyRef, Injector, ElementRef, forwardRef, Input, ViewChildren, 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';
|
|
@@ -10,7 +10,7 @@ import { TitleComponent } from '@fundamental-ngx/core/title';
|
|
|
10
10
|
import * as i4 from '@angular/forms';
|
|
11
11
|
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
12
12
|
import { ButtonComponent } from '@fundamental-ngx/core/button';
|
|
13
|
-
import { CalendarTypeEnum, FdCalendarViewEnum, CalendarComponent } from '@fundamental-ngx/core/calendar';
|
|
13
|
+
import { CalendarTypeEnum, FdCalendarViewEnum, CalendarComponent, CalendarLegendFocusingService } from '@fundamental-ngx/core/calendar';
|
|
14
14
|
import * as i1 from '@fundamental-ngx/core/datetime';
|
|
15
15
|
import { DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';
|
|
16
16
|
import * as i2 from '@fundamental-ngx/core/form';
|
|
@@ -35,6 +35,22 @@ class DatePickerMobileComponent extends MobileModeBase {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
/** @hidden */
|
|
38
|
+
_getShowCalendarLegend() {
|
|
39
|
+
const show = this._component.showCalendarLegend;
|
|
40
|
+
if (typeof show === 'boolean') {
|
|
41
|
+
return show;
|
|
42
|
+
}
|
|
43
|
+
return show?.() || false;
|
|
44
|
+
}
|
|
45
|
+
/** @hidden */
|
|
46
|
+
_getLegendCol() {
|
|
47
|
+
const col = this._component.legendCol;
|
|
48
|
+
if (typeof col === 'boolean') {
|
|
49
|
+
return col;
|
|
50
|
+
}
|
|
51
|
+
return col?.() || false;
|
|
52
|
+
}
|
|
53
|
+
/** @hidden */
|
|
38
54
|
handleApprove() {
|
|
39
55
|
this.dialogRef.close();
|
|
40
56
|
this._component.dialogApprove();
|
|
@@ -47,7 +63,7 @@ class DatePickerMobileComponent extends MobileModeBase {
|
|
|
47
63
|
/** @hidden */
|
|
48
64
|
_toggleDialog(open) {
|
|
49
65
|
if (open) {
|
|
50
|
-
this._selectedBackup = this._component.
|
|
66
|
+
this._selectedBackup = this._component.getSelectedDate();
|
|
51
67
|
if (!this._dialogService.hasOpenDialogs()) {
|
|
52
68
|
this._open();
|
|
53
69
|
}
|
|
@@ -289,6 +305,10 @@ class DatePickerComponent {
|
|
|
289
305
|
this.selectedMultipleDateRangesChange = new EventEmitter();
|
|
290
306
|
/** Event thrown every time calendar active view is changed */
|
|
291
307
|
this.activeViewChange = new EventEmitter();
|
|
308
|
+
/** Whether to display the calendar legend below the calendar. Default is false. */
|
|
309
|
+
this.showCalendarLegend = input(false, ...(ngDevMode ? [{ debugName: "showCalendarLegend", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
310
|
+
/** Whether the legend should display in column layout instead of row layout. Default is false. */
|
|
311
|
+
this.legendCol = input(false, ...(ngDevMode ? [{ debugName: "legendCol", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
292
312
|
/** @hidden */
|
|
293
313
|
this._message = null;
|
|
294
314
|
/** @hidden */
|
|
@@ -1052,7 +1072,7 @@ class DatePickerComponent {
|
|
|
1052
1072
|
this._dateTimeAdapter.datesEqual(range.end, ranges2[index].end));
|
|
1053
1073
|
}
|
|
1054
1074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }, { token: i2.PopoverFormMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatePickerComponent, isStandalone: true, selector: "fd-date-picker", inputs: { type: "type", placeholder: "placeholder", inputId: "inputId", required: "required", customDateTimeFormat: "customDateTimeFormat", message: "message", messageTriggers: "messageTriggers", selectedDate: "selectedDate", selectedMultipleDates: "selectedMultipleDates", selectedRangeDate: "selectedRangeDate", selectedMultipleDateRanges: "selectedMultipleDateRanges", startingDayOfWeek: "startingDayOfWeek", rangeHoverEffect: "rangeHoverEffect", useValidation: "useValidation", allowNull: "allowNull", activeView: "activeView", placement: "placement", appendTo: "appendTo", disabled: "disabled", closeOnDateChoose: "closeOnDateChoose", showTodayButton: "showTodayButton", todayButtonLabel: "todayButtonLabel", previousButtonDisableFunction: "previousButtonDisableFunction", nextButtonDisableFunction: "nextButtonDisableFunction",
|
|
1075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatePickerComponent, isStandalone: true, selector: "fd-date-picker", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, messageTriggers: { classPropertyName: "messageTriggers", publicName: "messageTriggers", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", 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 }, closeOnDateChoose: { classPropertyName: "closeOnDateChoose", publicName: "closeOnDateChoose", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, todayButtonLabel: { classPropertyName: "todayButtonLabel", publicName: "todayButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, previousButtonDisableFunction: { classPropertyName: "previousButtonDisableFunction", publicName: "previousButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, nextButtonDisableFunction: { classPropertyName: "nextButtonDisableFunction", publicName: "nextButtonDisableFunction", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", 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 }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", 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 }, dateRangeFormat: { classPropertyName: "dateRangeFormat", publicName: "dateRangeFormat", isSignal: false, 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 }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedMultipleDatesChange: "selectedMultipleDatesChange", selectedRangeDateChange: "selectedRangeDateChange", selectedMultipleDateRangesChange: "selectedMultipleDateRangesChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" }, properties: { "class.fd-date-picker": "true", "class.fd-date-picker-custom": "inline" } }, providers: [
|
|
1056
1076
|
{
|
|
1057
1077
|
provide: NG_VALUE_ACCESSOR,
|
|
1058
1078
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
@@ -1070,8 +1090,9 @@ class DatePickerComponent {
|
|
|
1070
1090
|
registerFormItemControl(DatePickerComponent),
|
|
1071
1091
|
PopoverFormMessageService,
|
|
1072
1092
|
PopoverService,
|
|
1073
|
-
DynamicComponentService
|
|
1074
|
-
|
|
1093
|
+
DynamicComponentService,
|
|
1094
|
+
CalendarLegendFocusingService
|
|
1095
|
+
], viewQueries: [{ propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "_calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }, { propertyName: "_messagePopoverTemplate", first: true, predicate: ["popoverMessageTemplate"], descendants: true }, { propertyName: "_calendars", predicate: CalendarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n @if (_message) {\n <fd-form-message [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (beforeOpen)=\"_beforePopoverOpen()\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [triggers]=\"[]\"\n [placement]=\"placement\"\n [disabled]=\"disabled\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [appendTo]=\"appendTo\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n <ng-content></ng-content>\n <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></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 glyph=\"appointment-2\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"toggleCalendar()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.id]=\"inputId\"\n aria-haspopup=\"grid\"\n aria-autocomplete=\"none\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n [attr.aria-required]=\"required\"\n [attr.aria-describedby]=\"_formValueStateMessageId\"\n [ngModel]=\"_inputFieldDate\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (keydown.f4)=\"toggleCalendar()\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (click)=\"mobile && openCalendar()\"\n (blur)=\"_onBlur($event)\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n <fd-calendar\n [activeView]=\"activeView\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [allowMultipleSelection]=\"allowMultipleSelection\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [calType]=\"type\"\n [rangeHoverEffect]=\"rangeHoverEffect\"\n [disableFunction]=\"disableFunction\"\n [disableRangeStartFunction]=\"disableRangeStartFunction\"\n [disableRangeEndFunction]=\"disableRangeEndFunction\"\n [selectedDate]=\"selectedDate\"\n [selectedMultipleDates]=\"selectedMultipleDates\"\n [selectedRangeDate]=\"selectedRangeDate\"\n [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n [showCalendarLegend]=\"showCalendarLegend()\"\n [legendCol]=\"legendCol()\"\n [mobileLandscape]=\"mobile && mobileLandscape\"\n [mobilePortrait]=\"mobile && mobilePortrait\"\n [dateRangeFormat]=\"dateRangeFormat\"\n (selectedDateChange)=\"handleSingleDateChange($event)\"\n (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (closeCalendar)=\"closeFromCalendar()\"\n ></fd-calendar>\n @if (showTodayButton) {\n <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'coreCalendar.todayLabel' | fdTranslate\"\n (click)=\"onTodayButtonClick()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n @switch (state) {\n @case ('success') {\n {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}\n }\n @case ('information') {\n {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}\n }\n @case ('warning') {\n {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}\n }\n @case ('error') {\n {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n }\n }\n {{ _message }}\n </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}.fd-date-picker__bar{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { 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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1075
1096
|
}
|
|
1076
1097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1077
1098
|
type: Component,
|
|
@@ -1097,7 +1118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1097
1118
|
registerFormItemControl(DatePickerComponent),
|
|
1098
1119
|
PopoverFormMessageService,
|
|
1099
1120
|
PopoverService,
|
|
1100
|
-
DynamicComponentService
|
|
1121
|
+
DynamicComponentService,
|
|
1122
|
+
CalendarLegendFocusingService
|
|
1101
1123
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1102
1124
|
NgTemplateOutlet,
|
|
1103
1125
|
PopoverModule,
|
|
@@ -1111,7 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1111
1133
|
BarElementDirective,
|
|
1112
1134
|
ButtonComponent,
|
|
1113
1135
|
FdTranslatePipe
|
|
1114
|
-
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n @if (_message) {\n <fd-form-message [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (beforeOpen)=\"_beforePopoverOpen()\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [triggers]=\"[]\"\n [placement]=\"placement\"\n [disabled]=\"disabled\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [appendTo]=\"appendTo\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n <ng-content></ng-content>\n <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></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 glyph=\"appointment-2\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"toggleCalendar()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.id]=\"inputId\"\n aria-haspopup=\"grid\"\n aria-autocomplete=\"none\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n [attr.aria-required]=\"required\"\n [attr.aria-describedby]=\"_formValueStateMessageId\"\n [ngModel]=\"_inputFieldDate\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (keydown.f4)=\"toggleCalendar()\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (click)=\"mobile && openCalendar()\"\n (blur)=\"_onBlur($event)\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n <fd-calendar\n [activeView]=\"activeView\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [allowMultipleSelection]=\"allowMultipleSelection\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [calType]=\"type\"\n [rangeHoverEffect]=\"rangeHoverEffect\"\n [disableFunction]=\"disableFunction\"\n [disableRangeStartFunction]=\"disableRangeStartFunction\"\n [disableRangeEndFunction]=\"disableRangeEndFunction\"\n [selectedDate]=\"selectedDate\"\n [selectedMultipleDates]=\"selectedMultipleDates\"\n [selectedRangeDate]=\"selectedRangeDate\"\n [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n [mobileLandscape]=\"mobile && mobileLandscape\"\n [mobilePortrait]=\"mobile && mobilePortrait\"\n [dateRangeFormat]=\"dateRangeFormat\"\n (selectedDateChange)=\"handleSingleDateChange($event)\"\n (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (closeCalendar)=\"closeFromCalendar()\"\n ></fd-calendar>\n @if (showTodayButton) {\n <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'coreCalendar.todayLabel' | fdTranslate\"\n (click)=\"onTodayButtonClick()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n @switch (state) {\n @case ('success') {\n {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}\n }\n @case ('information') {\n {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}\n }\n @case ('warning') {\n {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}\n }\n @case ('error') {\n {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n }\n }\n {{ _message }}\n </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}.fd-date-picker__bar{overflow:hidden}\n"] }]
|
|
1136
|
+
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #popoverMessageTemplate>\n @if (_message) {\n <fd-form-message [embedded]=\"true\" [type]=\"state\">\n {{ _message }}\n </fd-form-message>\n }\n</ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [(isOpen)]=\"isOpen\"\n (beforeOpen)=\"_beforePopoverOpen()\"\n (isOpenChange)=\"_onOpenStateChanged($event)\"\n [triggers]=\"[]\"\n [placement]=\"placement\"\n [disabled]=\"disabled\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"false\"\n [appendTo]=\"appendTo\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n @if (_showPopoverContents) {\n <ng-template [ngTemplateOutlet]=\"popoverMessageTemplate\"></ng-template>\n <ng-content></ng-content>\n <ng-template [ngTemplateOutlet]=\"calendarTemplate\"></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 glyph=\"appointment-2\"\n [isExpanded]=\"isOpen\"\n [glyphAriaLabel]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n [iconTitle]=\"'coreDatePicker.displayCalendarToggleLabel' | fdTranslate\"\n (addOnButtonClicked)=\"toggleCalendar()\"\n >\n <input\n type=\"text\"\n class=\"fd-input\"\n fd-input-group-input\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.id]=\"inputId\"\n aria-haspopup=\"grid\"\n aria-autocomplete=\"none\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-label]=\"_dateInputArialLabelKey | fdTranslate\"\n [attr.aria-required]=\"required\"\n [attr.aria-describedby]=\"_formValueStateMessageId\"\n [ngModel]=\"_inputFieldDate\"\n (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n (keydown.f4)=\"toggleCalendar()\"\n (ngModelChange)=\"handleInputChange($event, true)\"\n (click)=\"mobile && openCalendar()\"\n (blur)=\"_onBlur($event)\"\n />\n </fd-input-group>\n</ng-template>\n<ng-template #calendarTemplate>\n <fd-calendar\n [activeView]=\"activeView\"\n [markWeekends]=\"markWeekends\"\n [specialDaysRules]=\"specialDaysRules\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [allowMultipleSelection]=\"allowMultipleSelection\"\n [aggregatedYearGrid]=\"aggregatedYearGrid\"\n [yearGrid]=\"yearGrid\"\n [calType]=\"type\"\n [rangeHoverEffect]=\"rangeHoverEffect\"\n [disableFunction]=\"disableFunction\"\n [disableRangeStartFunction]=\"disableRangeStartFunction\"\n [disableRangeEndFunction]=\"disableRangeEndFunction\"\n [selectedDate]=\"selectedDate\"\n [selectedMultipleDates]=\"selectedMultipleDates\"\n [selectedRangeDate]=\"selectedRangeDate\"\n [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n [startingDayOfWeek]=\"startingDayOfWeek\"\n [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n [showCalendarLegend]=\"showCalendarLegend()\"\n [legendCol]=\"legendCol()\"\n [mobileLandscape]=\"mobile && mobileLandscape\"\n [mobilePortrait]=\"mobile && mobilePortrait\"\n [dateRangeFormat]=\"dateRangeFormat\"\n (selectedDateChange)=\"handleSingleDateChange($event)\"\n (selectedMultipleDatesChange)=\"handleMultipleDatesChange($event)\"\n (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n (selectedMultipleDateRangesChange)=\"handleMultipleDateRangesChange($event)\"\n (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n (closeCalendar)=\"closeFromCalendar()\"\n ></fd-calendar>\n @if (showTodayButton) {\n <div fd-bar barDesign=\"footer\" class=\"fd-date-picker__bar\">\n <div fd-bar-right>\n <fd-bar-element>\n <button\n fd-button\n [label]=\"'coreCalendar.todayLabel' | fdTranslate\"\n (click)=\"onTodayButtonClick()\"\n ></button>\n </fd-bar-element>\n </div>\n </div>\n }\n</ng-template>\n<div [style.display]=\"'none'\" aria-hidden=\"true\">\n <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n @switch (state) {\n @case ('success') {\n {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}\n }\n @case ('information') {\n {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}\n }\n @case ('warning') {\n {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}\n }\n @case ('error') {\n {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}\n }\n }\n {{ _message }}\n </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}.fd-date-picker__bar{overflow:hidden}\n"] }]
|
|
1115
1137
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
|
|
1116
1138
|
type: Optional
|
|
1117
1139
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1167,8 +1189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1167
1189
|
type: Input
|
|
1168
1190
|
}], nextButtonDisableFunction: [{
|
|
1169
1191
|
type: Input
|
|
1170
|
-
}], state: [{
|
|
1171
|
-
type: Input
|
|
1172
1192
|
}], buttonFocusable: [{
|
|
1173
1193
|
type: Input
|
|
1174
1194
|
}], specialDaysRules: [{
|
|
@@ -1183,8 +1203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1183
1203
|
type: Input
|
|
1184
1204
|
}], allowMultipleSelection: [{
|
|
1185
1205
|
type: Input
|
|
1186
|
-
}], isOpen: [{
|
|
1187
|
-
type: Input
|
|
1188
1206
|
}], inline: [{
|
|
1189
1207
|
type: Input
|
|
1190
1208
|
}], ariaLabelledBy: [{
|
|
@@ -1238,6 +1256,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1238
1256
|
}], _calendars: [{
|
|
1239
1257
|
type: ViewChildren,
|
|
1240
1258
|
args: [CalendarComponent]
|
|
1259
|
+
}], state: [{
|
|
1260
|
+
type: Input
|
|
1261
|
+
}], isOpen: [{
|
|
1262
|
+
type: Input
|
|
1241
1263
|
}], disableFunction: [{
|
|
1242
1264
|
type: Input
|
|
1243
1265
|
}], disableRangeStartFunction: [{
|