@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
|
@@ -466,18 +466,16 @@ class CalendarItemComponent {
|
|
|
466
466
|
this.selected = false;
|
|
467
467
|
this.outsideActiveMonth = false;
|
|
468
468
|
}
|
|
469
|
-
ngOnChanges(
|
|
470
|
-
if (
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
this.outsideActiveMonth = false;
|
|
474
|
-
}
|
|
475
|
-
else {
|
|
476
|
-
this.today = moment(this.item?.date).isSame(moment(), 'day');
|
|
477
|
-
this.outsideActiveMonth = !moment(this.item?.date).isSame(this.activeDate, 'month');
|
|
478
|
-
}
|
|
479
|
-
this.selected = this.isSelected(this.item?.date, this.selection, this.view);
|
|
469
|
+
ngOnChanges() {
|
|
470
|
+
if (this.view !== 'day') {
|
|
471
|
+
this.today = false;
|
|
472
|
+
this.outsideActiveMonth = false;
|
|
480
473
|
}
|
|
474
|
+
else {
|
|
475
|
+
this.today = moment(this.item?.date).isSame(moment(), 'day');
|
|
476
|
+
this.outsideActiveMonth = !moment(this.item?.date).isSame(this.activeDate, 'month');
|
|
477
|
+
}
|
|
478
|
+
this.selected = this.isSelected(this.item?.date, this.selection, this.view);
|
|
481
479
|
}
|
|
482
480
|
isSelected(date, selection, view) {
|
|
483
481
|
if (!date || !selection) {
|
|
@@ -816,15 +814,13 @@ class CalendarComponent {
|
|
|
816
814
|
onFirstItemKeydown(event) {
|
|
817
815
|
// If the user is tabbing backwards from the first item, emit the focusOutStart event.
|
|
818
816
|
if (event.key === 'Tab' && event.shiftKey) {
|
|
819
|
-
|
|
820
|
-
this.focusOutStart.emit();
|
|
817
|
+
this.focusOutStart.emit(event);
|
|
821
818
|
}
|
|
822
819
|
}
|
|
823
820
|
onLastItemKeydown(event) {
|
|
824
821
|
// If the user is tabbing forwards from the last item, emit the focusOutEnd event.
|
|
825
822
|
if (event.key === 'Tab' && !event.shiftKey) {
|
|
826
|
-
|
|
827
|
-
this.focusOutEnd.emit();
|
|
823
|
+
this.focusOutEnd.emit(event);
|
|
828
824
|
}
|
|
829
825
|
}
|
|
830
826
|
drawCalendar(view, goTo) {
|
|
@@ -904,10 +900,10 @@ class CalendarComponent {
|
|
|
904
900
|
}
|
|
905
901
|
}
|
|
906
902
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
907
|
-
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:'
|
|
903
|
+
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 });
|
|
908
904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
909
905
|
type: Component,
|
|
910
|
-
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:'
|
|
906
|
+
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"] }]
|
|
911
907
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
912
908
|
type: HostBinding,
|
|
913
909
|
args: ['attr.id']
|
|
@@ -4047,15 +4043,14 @@ class DateInputComponent extends FormControlBase {
|
|
|
4047
4043
|
return null;
|
|
4048
4044
|
};
|
|
4049
4045
|
}
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
this.isCalendarOpen = false;
|
|
4046
|
+
/** Focuses the input whenever the calendar is shift-tabbed out of. */
|
|
4047
|
+
onCalendarFocusOutStart(event) {
|
|
4048
|
+
event.preventDefault();
|
|
4049
|
+
this.focusInput();
|
|
4055
4050
|
}
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4051
|
+
/** Closes the calendar and focuses the input whenever the calendar is tabbed out of. */
|
|
4052
|
+
onCalendarFocusOutEnd(event) {
|
|
4053
|
+
event.preventDefault();
|
|
4059
4054
|
this.isCalendarOpen = false;
|
|
4060
4055
|
this.focusInput();
|
|
4061
4056
|
}
|
|
@@ -4075,23 +4070,20 @@ class DateInputComponent extends FormControlBase {
|
|
|
4075
4070
|
this.isCalendarOpen = false;
|
|
4076
4071
|
}
|
|
4077
4072
|
}
|
|
4078
|
-
/** Focuses the date input. */
|
|
4079
|
-
focusInput() {
|
|
4080
|
-
this.el.nativeElement.querySelector('input')?.focus();
|
|
4081
|
-
}
|
|
4082
4073
|
/** 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 */
|
|
4083
4074
|
onActionKeydown(event) {
|
|
4084
4075
|
if (event.key === 'Tab' && !event.shiftKey && this.isCalendarOpen) {
|
|
4085
4076
|
// 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.
|
|
4086
4077
|
event.preventDefault();
|
|
4087
4078
|
// Focus the first button in the calendar overlay
|
|
4088
|
-
this.overlay?.overlayRef.hostElement.querySelector('button')
|
|
4079
|
+
const firstButton = this.overlay?.overlayRef.hostElement.querySelector('button:not(:disabled)');
|
|
4080
|
+
firstButton?.focus();
|
|
4089
4081
|
}
|
|
4090
4082
|
}
|
|
4091
4083
|
onTextboxKeydown(event) {
|
|
4092
4084
|
if (event.key === 'Tab' && event.shiftKey) {
|
|
4093
4085
|
// If the user is tabbing backwards from the textbox, close the calendar.
|
|
4094
|
-
this.
|
|
4086
|
+
this.isCalendarOpen = false;
|
|
4095
4087
|
}
|
|
4096
4088
|
}
|
|
4097
4089
|
/** Whenever the user selects a date from the calendar, update the formModel with the selection */
|
|
@@ -4210,12 +4202,16 @@ class DateInputComponent extends FormControlBase {
|
|
|
4210
4202
|
this.placeholder = dateFormat ?? this.placeholder;
|
|
4211
4203
|
this.parseFormats = DateTimeHelper.getMomentParseFormats(dateFormat);
|
|
4212
4204
|
}
|
|
4205
|
+
/** Focuses the date input. */
|
|
4206
|
+
focusInput() {
|
|
4207
|
+
this.el.nativeElement.querySelector('input')?.focus();
|
|
4208
|
+
}
|
|
4213
4209
|
}
|
|
4214
4210
|
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 });
|
|
4215
|
-
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
|
|
4211
|
+
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" }] });
|
|
4216
4212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
4217
4213
|
type: Component,
|
|
4218
|
-
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
|
|
4214
|
+
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"] }]
|
|
4219
4215
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: DateDisplayPipe }, { type: i0.ElementRef }, { type: i1$1.Overlay }]; }, propDecorators: { id: [{
|
|
4220
4216
|
type: HostBinding,
|
|
4221
4217
|
args: ['attr.id']
|