@energycap/components 0.39.36-ECAP-26840-date-input.20241118-1204 → 0.39.36-ECAP-26840-date-input.20241119-1615
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/controls/calendar/calendar-item.component.mjs +10 -12
- package/esm2020/lib/controls/calendar/calendar.component.mjs +5 -7
- package/esm2020/lib/controls/date-input/date-input.component.mjs +17 -17
- package/fesm2015/energycap-components.mjs +31 -35
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +29 -33
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/calendar/calendar-item.component.d.ts +2 -2
- package/lib/controls/calendar/calendar.component.d.ts +2 -2
- package/lib/controls/date-input/date-input.component.d.ts +6 -5
- package/package.json +1 -1
|
@@ -472,19 +472,17 @@ class CalendarItemComponent {
|
|
|
472
472
|
this.selected = false;
|
|
473
473
|
this.outsideActiveMonth = false;
|
|
474
474
|
}
|
|
475
|
-
ngOnChanges(
|
|
475
|
+
ngOnChanges() {
|
|
476
476
|
var _a, _b, _c;
|
|
477
|
-
if (
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
this.outsideActiveMonth = !moment((_b = this.item) === null || _b === void 0 ? void 0 : _b.date).isSame(this.activeDate, 'month');
|
|
485
|
-
}
|
|
486
|
-
this.selected = this.isSelected((_c = this.item) === null || _c === void 0 ? void 0 : _c.date, this.selection, this.view);
|
|
477
|
+
if (this.view !== 'day') {
|
|
478
|
+
this.today = false;
|
|
479
|
+
this.outsideActiveMonth = false;
|
|
480
|
+
}
|
|
481
|
+
else {
|
|
482
|
+
this.today = moment((_a = this.item) === null || _a === void 0 ? void 0 : _a.date).isSame(moment(), 'day');
|
|
483
|
+
this.outsideActiveMonth = !moment((_b = this.item) === null || _b === void 0 ? void 0 : _b.date).isSame(this.activeDate, 'month');
|
|
487
484
|
}
|
|
485
|
+
this.selected = this.isSelected((_c = this.item) === null || _c === void 0 ? void 0 : _c.date, this.selection, this.view);
|
|
488
486
|
}
|
|
489
487
|
isSelected(date, selection, view) {
|
|
490
488
|
var _a;
|
|
@@ -824,15 +822,13 @@ class CalendarComponent {
|
|
|
824
822
|
onFirstItemKeydown(event) {
|
|
825
823
|
// If the user is tabbing backwards from the first item, emit the focusOutStart event.
|
|
826
824
|
if (event.key === 'Tab' && event.shiftKey) {
|
|
827
|
-
|
|
828
|
-
this.focusOutStart.emit();
|
|
825
|
+
this.focusOutStart.emit(event);
|
|
829
826
|
}
|
|
830
827
|
}
|
|
831
828
|
onLastItemKeydown(event) {
|
|
832
829
|
// If the user is tabbing forwards from the last item, emit the focusOutEnd event.
|
|
833
830
|
if (event.key === 'Tab' && !event.shiftKey) {
|
|
834
|
-
|
|
835
|
-
this.focusOutEnd.emit();
|
|
831
|
+
this.focusOutEnd.emit(event);
|
|
836
832
|
}
|
|
837
833
|
}
|
|
838
834
|
drawCalendar(view, goTo) {
|
|
@@ -912,10 +908,10 @@ class CalendarComponent {
|
|
|
912
908
|
}
|
|
913
909
|
}
|
|
914
910
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
915
|
-
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionChange: "selectionChange", focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mb-2\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n (keydown)=\"onFirstItemKeydown($event)\"\r\n [disabled]=\"disablePreviousButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\">\r\n {{year}}\r\n </button>\r\n\r\n <div *ngIf=\"view === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n <ng-container *ngIf=\"view === 'day'\">\r\n <li *ngFor=\"let day of weekDays\"\r\n class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n {{day}}\r\n </li>\r\n </ng-container>\r\n\r\n <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n <button id=\"{{id}}_item_{{item.date | date:'
|
|
911
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionChange: "selectionChange", focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mb-2\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n (keydown)=\"!disablePreviousButton ? onFirstItemKeydown($event) : undefined\"\r\n [disabled]=\"disablePreviousButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n (keydown)=\"disablePreviousButton ? onFirstItemKeydown($event) : undefined\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n (keydown)=\"disablePreviousButton && view !== 'day' ? onFirstItemKeydown($event) : undefined\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n (keydown)=\"disablePreviousButton && view === 'year' ? onFirstItemKeydown($event) : undefined\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n <ng-container *ngIf=\"view === 'day'\">\r\n <li *ngFor=\"let day of weekDays\"\r\n class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n {{day}}\r\n </li>\r\n </ng-container>\r\n\r\n <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n <button id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [activeDate]=\"activeDate\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n (keydown)=\"isLast ? onLastItemKeydown($event) : undefined\"\r\n [hidden]=\"item.date < minDate || item.date > maxDate\">\r\n </button>\r\n </li>\r\n</ul>", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul{list-style:none;padding:0;margin:0;display:grid;align-items:stretch;justify-items:stretch}button[ec-calendar-item]{height:100%;width:100%}ul.day-view{grid-template-columns:repeat(7,2rem);grid-auto-rows:1.75rem;row-gap:.25rem}ul.month-view{grid-template-columns:repeat(3,4.67rem);grid-auto-rows:3.25rem;row-gap:.25rem}ul.year-view{grid-template-columns:repeat(4,3.5rem);grid-auto-rows:3.25rem;row-gap:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "activeDate", "selection", "view"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
916
912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
917
913
|
type: Component,
|
|
918
|
-
args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mb-2\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n (keydown)=\"onFirstItemKeydown($event)\"\r\n [disabled]=\"disablePreviousButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\">\r\n {{year}}\r\n </button>\r\n\r\n <div *ngIf=\"view === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n <ng-container *ngIf=\"view === 'day'\">\r\n <li *ngFor=\"let day of weekDays\"\r\n class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n {{day}}\r\n </li>\r\n </ng-container>\r\n\r\n <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n <button id=\"{{id}}_item_{{item.date | date:'
|
|
914
|
+
args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mb-2\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n (keydown)=\"!disablePreviousButton ? onFirstItemKeydown($event) : undefined\"\r\n [disabled]=\"disablePreviousButton\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n (keydown)=\"disablePreviousButton ? onFirstItemKeydown($event) : undefined\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n (keydown)=\"disablePreviousButton && view !== 'day' ? onFirstItemKeydown($event) : undefined\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n (keydown)=\"disablePreviousButton && view === 'year' ? onFirstItemKeydown($event) : undefined\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<ul class=\"px-1 {{view}}-view\">\r\n <ng-container *ngIf=\"view === 'day'\">\r\n <li *ngFor=\"let day of weekDays\"\r\n class=\"d-flex align-items-center justify-content-center text-heading-3\">\r\n {{day}}\r\n </li>\r\n </ng-container>\r\n\r\n <li *ngFor=\"let item of calendarItems; last as isLast; trackBy: calendarItemTrackByDate;\">\r\n <button id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [activeDate]=\"activeDate\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n (keydown)=\"isLast ? onLastItemKeydown($event) : undefined\"\r\n [hidden]=\"item.date < minDate || item.date > maxDate\">\r\n </button>\r\n </li>\r\n</ul>", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);opacity:1;--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul{list-style:none;padding:0;margin:0;display:grid;align-items:stretch;justify-items:stretch}button[ec-calendar-item]{height:100%;width:100%}ul.day-view{grid-template-columns:repeat(7,2rem);grid-auto-rows:1.75rem;row-gap:.25rem}ul.month-view{grid-template-columns:repeat(3,4.67rem);grid-auto-rows:3.25rem;row-gap:.25rem}ul.year-view{grid-template-columns:repeat(4,3.5rem);grid-auto-rows:3.25rem;row-gap:.25rem}\n"] }]
|
|
919
915
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
920
916
|
type: HostBinding,
|
|
921
917
|
args: ['attr.id']
|
|
@@ -4076,15 +4072,14 @@ class DateInputComponent extends FormControlBase {
|
|
|
4076
4072
|
return null;
|
|
4077
4073
|
};
|
|
4078
4074
|
}
|
|
4079
|
-
|
|
4080
|
-
|
|
4081
|
-
|
|
4082
|
-
|
|
4083
|
-
this.isCalendarOpen = false;
|
|
4075
|
+
/** Focuses the input whenever the calendar is shift-tabbed out of. */
|
|
4076
|
+
onCalendarFocusOutStart(event) {
|
|
4077
|
+
event.preventDefault();
|
|
4078
|
+
this.focusInput();
|
|
4084
4079
|
}
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
|
|
4080
|
+
/** Closes the calendar and focuses the input whenever the calendar is tabbed out of. */
|
|
4081
|
+
onCalendarFocusOutEnd(event) {
|
|
4082
|
+
event.preventDefault();
|
|
4088
4083
|
this.isCalendarOpen = false;
|
|
4089
4084
|
this.focusInput();
|
|
4090
4085
|
}
|
|
@@ -4104,25 +4099,21 @@ class DateInputComponent extends FormControlBase {
|
|
|
4104
4099
|
this.isCalendarOpen = false;
|
|
4105
4100
|
}
|
|
4106
4101
|
}
|
|
4107
|
-
/** Focuses the date input. */
|
|
4108
|
-
focusInput() {
|
|
4109
|
-
var _a;
|
|
4110
|
-
(_a = this.el.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4111
|
-
}
|
|
4112
4102
|
/** If the user tabs out of the form control's action button and the calendar is open, focus the first item in the calendar overlay */
|
|
4113
4103
|
onActionKeydown(event) {
|
|
4114
|
-
var _a
|
|
4104
|
+
var _a;
|
|
4115
4105
|
if (event.key === 'Tab' && !event.shiftKey && this.isCalendarOpen) {
|
|
4116
4106
|
// Prevent the default tab action so the focus doesn't move to the next element in the tab order after we manually focus the calendar button.
|
|
4117
4107
|
event.preventDefault();
|
|
4118
4108
|
// Focus the first button in the calendar overlay
|
|
4119
|
-
|
|
4109
|
+
const firstButton = (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.overlayRef.hostElement.querySelector('button:not(:disabled)');
|
|
4110
|
+
firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
|
|
4120
4111
|
}
|
|
4121
4112
|
}
|
|
4122
4113
|
onTextboxKeydown(event) {
|
|
4123
4114
|
if (event.key === 'Tab' && event.shiftKey) {
|
|
4124
4115
|
// If the user is tabbing backwards from the textbox, close the calendar.
|
|
4125
|
-
this.
|
|
4116
|
+
this.isCalendarOpen = false;
|
|
4126
4117
|
}
|
|
4127
4118
|
}
|
|
4128
4119
|
/** Whenever the user selects a date from the calendar, update the formModel with the selection */
|
|
@@ -4244,12 +4235,17 @@ class DateInputComponent extends FormControlBase {
|
|
|
4244
4235
|
this.parseFormats = DateTimeHelper.getMomentParseFormats(dateFormat);
|
|
4245
4236
|
});
|
|
4246
4237
|
}
|
|
4238
|
+
/** Focuses the date input. */
|
|
4239
|
+
focusInput() {
|
|
4240
|
+
var _a;
|
|
4241
|
+
(_a = this.el.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4242
|
+
}
|
|
4247
4243
|
}
|
|
4248
4244
|
DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: DateDisplayPipe }, { token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
|
|
4249
|
-
DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DateInputComponent, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n [required]=\"required\"\r\n [autofocus]=\"autofocus\"\r\n [pending]=\"pending\"\r\n [readonly]=\"readonly\"\r\n [formModel]=\"formModel\"\r\n (actionClicked)=\"isCalendarOpen
|
|
4245
|
+
DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DateInputComponent, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n [required]=\"required\"\r\n [autofocus]=\"autofocus\"\r\n [pending]=\"pending\"\r\n [readonly]=\"readonly\"\r\n [formModel]=\"formModel\"\r\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n (actionKeydown)=\"onActionKeydown($event)\"\r\n [showClear]=\"false\"\r\n actionIcon=\"icon-date\"\r\n cdkOverlayOrigin\r\n #overlayOrigin=\"cdkOverlayOrigin\">\r\n <input id=\"{{id}}_input\"\r\n type=\"text\"\r\n placeholder=\"{{placeholder}}\"\r\n [formControl]=\"textboxControl\"\r\n (blur)=\"onTextboxBlur()\"\r\n (keydown)=\"onTextboxKeydown($event)\">\r\n</ec-form-control>\r\n\r\n<ng-template cdkConnectedOverlay\r\n #overlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n cdkConnectedOverlayPanelClass=\"my-1\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n (detach)=\"isCalendarOpen = false\">\r\n <ec-calendar [id]=\"id + '_calendar'\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selection]=\"calendarSelection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n class=\"card px-1 pt-1 pb-2\"\r\n (focusOutStart)=\"onCalendarFocusOutStart($event)\"\r\n (focusOutEnd)=\"onCalendarFocusOutEnd($event)\">\r\n </ec-calendar>\r\n</ng-template>\r\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "pending", "required", "readonly"], outputs: ["actionClicked", "actionKeydown"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "minDate", "maxDate"], outputs: ["selectionChange", "focusOutStart", "focusOutEnd"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
4250
4246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
4251
4247
|
type: Component,
|
|
4252
|
-
args: [{ selector: 'ec-date-input', template: "<label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n [required]=\"required\"\r\n [autofocus]=\"autofocus\"\r\n [pending]=\"pending\"\r\n [readonly]=\"readonly\"\r\n [formModel]=\"formModel\"\r\n (actionClicked)=\"isCalendarOpen
|
|
4248
|
+
args: [{ selector: 'ec-date-input', template: "<label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n</label>\r\n\r\n<ec-form-control id=\"{{id}}\"\r\n [required]=\"required\"\r\n [autofocus]=\"autofocus\"\r\n [pending]=\"pending\"\r\n [readonly]=\"readonly\"\r\n [formModel]=\"formModel\"\r\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n (actionKeydown)=\"onActionKeydown($event)\"\r\n [showClear]=\"false\"\r\n actionIcon=\"icon-date\"\r\n cdkOverlayOrigin\r\n #overlayOrigin=\"cdkOverlayOrigin\">\r\n <input id=\"{{id}}_input\"\r\n type=\"text\"\r\n placeholder=\"{{placeholder}}\"\r\n [formControl]=\"textboxControl\"\r\n (blur)=\"onTextboxBlur()\"\r\n (keydown)=\"onTextboxKeydown($event)\">\r\n</ec-form-control>\r\n\r\n<ng-template cdkConnectedOverlay\r\n #overlay=\"cdkConnectedOverlay\"\r\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n cdkConnectedOverlayPanelClass=\"my-1\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n (detach)=\"isCalendarOpen = false\">\r\n <ec-calendar [id]=\"id + '_calendar'\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selection]=\"calendarSelection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n class=\"card px-1 pt-1 pb-2\"\r\n (focusOutStart)=\"onCalendarFocusOutStart($event)\"\r\n (focusOutEnd)=\"onCalendarFocusOutEnd($event)\">\r\n </ec-calendar>\r\n</ng-template>\r\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}\n"] }]
|
|
4253
4249
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: DateDisplayPipe }, { type: i0.ElementRef }, { type: i1$1.Overlay }]; }, propDecorators: { id: [{
|
|
4254
4250
|
type: HostBinding,
|
|
4255
4251
|
args: ['attr.id']
|