@ardium-ui/ui 5.0.0-alpha.1 → 5.0.0-alpha.3
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/fesm2022/ardium-ui-ui.mjs +33 -17
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/calendar/calendar.defaults.d.ts +1 -0
- package/lib/calendar/views/years-view/years-view.component.d.ts +1 -2
- package/lib/inputs/date-input/date-input.component.d.ts +2 -1
- package/lib/inputs/date-input/date-input.defaults.d.ts +3 -0
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ import { TakeChance } from 'take-chance';
|
|
|
14
14
|
import * as i1 from '@angular/common';
|
|
15
15
|
import { CommonModule, DatePipe, UpperCasePipe, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
16
16
|
import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
|
|
17
|
-
import { roundFromZero, roundToPrecision
|
|
17
|
+
import { roundToMultiple, roundFromZero, roundToPrecision } from 'more-rounding';
|
|
18
18
|
import { keyToString } from 'key-display-names';
|
|
19
19
|
import * as i4 from '@angular/cdk/a11y';
|
|
20
20
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -5641,6 +5641,7 @@ const _dateInputDefaults = {
|
|
|
5641
5641
|
dropdownAppearance: DropdownPanelAppearance.Outlined,
|
|
5642
5642
|
dropdownVariant: DropdownPanelVariant.Rounded,
|
|
5643
5643
|
minMaxStrategy: ArdDateInputMinMaxStrategy.Adjust,
|
|
5644
|
+
startView: undefined,
|
|
5644
5645
|
// calendar defaults
|
|
5645
5646
|
activeView: ArdCalendarView.Days,
|
|
5646
5647
|
activeYear: new Date().getFullYear(),
|
|
@@ -5650,6 +5651,7 @@ const _dateInputDefaults = {
|
|
|
5650
5651
|
min: null,
|
|
5651
5652
|
max: null,
|
|
5652
5653
|
filter: null,
|
|
5654
|
+
UTC: false,
|
|
5653
5655
|
};
|
|
5654
5656
|
const ARD_DATE_INPUT_DEFAULTS = new InjectionToken('ard-date-input-defaults', {
|
|
5655
5657
|
factory: () => ({ ..._dateInputDefaults }),
|
|
@@ -5839,6 +5841,7 @@ const _calendarDefaults = {
|
|
|
5839
5841
|
min: null,
|
|
5840
5842
|
max: null,
|
|
5841
5843
|
filter: null,
|
|
5844
|
+
UTC: false,
|
|
5842
5845
|
};
|
|
5843
5846
|
const ARD_CALENDAR_DEFAULTS = new InjectionToken('ard-calendar-defaults', {
|
|
5844
5847
|
factory: () => ({
|
|
@@ -6637,7 +6640,6 @@ class YearsViewComponent {
|
|
|
6637
6640
|
this.disabled = input.required();
|
|
6638
6641
|
this.autoFocus = input.required();
|
|
6639
6642
|
this._isUsingKeyboard = input.required();
|
|
6640
|
-
this.activeYear = input.required();
|
|
6641
6643
|
this.selectedDate = input.required();
|
|
6642
6644
|
this.min = input.required();
|
|
6643
6645
|
this.max = input.required();
|
|
@@ -6672,8 +6674,8 @@ class YearsViewComponent {
|
|
|
6672
6674
|
const yearRangeStart = this.currentYearRangeStart();
|
|
6673
6675
|
const yearRangeEnd = yearRangeStart + 23;
|
|
6674
6676
|
const dateRange = {
|
|
6675
|
-
low: new Date(yearRangeStart, 0,
|
|
6676
|
-
high: new Date(yearRangeEnd, 0,
|
|
6677
|
+
low: new Date(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
|
|
6678
|
+
high: new Date(yearRangeEnd, 0, 2),
|
|
6677
6679
|
};
|
|
6678
6680
|
const yearRange = {
|
|
6679
6681
|
low: yearRangeStart,
|
|
@@ -6701,7 +6703,7 @@ class YearsViewComponent {
|
|
|
6701
6703
|
});
|
|
6702
6704
|
this.yearContext = computed(() => {
|
|
6703
6705
|
return (year) => {
|
|
6704
|
-
const date = new Date(year, 1,
|
|
6706
|
+
const date = new Date(year, 1, 2); // second day of month to prevent timezone issues
|
|
6705
6707
|
return {
|
|
6706
6708
|
value: year,
|
|
6707
6709
|
date,
|
|
@@ -6855,7 +6857,7 @@ class YearsViewComponent {
|
|
|
6855
6857
|
this.triggerHighlightSameYearNextPage.emit(event.altKey);
|
|
6856
6858
|
}
|
|
6857
6859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6858
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null },
|
|
6860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n variant=\"pill\"\r\n >\r\n {{ dateRange.low | date: 'YYYY' }}\r\n —\r\n {{ dateRange.high | date: 'YYYY' }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div class=\"ard-calendar-arrows\">\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onYearGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onYearGridBlur()\"\r\n (click)=\"onYearGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (year of yearsArray(); track year) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n (click)=\"onCalendarYearClick(year.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultYearTemplate\r\n let-year\r\n >\r\n {{ year | date: 'YYYY' }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6859
6861
|
}
|
|
6860
6862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
|
|
6861
6863
|
type: Component,
|
|
@@ -6910,8 +6912,8 @@ class ArdiumCalendarComponent extends _FormFieldComponentBase {
|
|
|
6910
6912
|
this.max = input(this._DEFAULTS.max, {
|
|
6911
6913
|
transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max)),
|
|
6912
6914
|
});
|
|
6913
|
-
this.UTC = input(
|
|
6914
|
-
this._UTCAfterInit = signal(
|
|
6915
|
+
this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
|
|
6916
|
+
this._UTCAfterInit = signal(this._DEFAULTS.UTC);
|
|
6915
6917
|
this.filter = input(this._DEFAULTS.filter);
|
|
6916
6918
|
this.isDayFilteredOut = computed(() => {
|
|
6917
6919
|
return (day, month = this.activeMonth(), year = this.activeYear()) => {
|
|
@@ -6927,7 +6929,12 @@ class ArdiumCalendarComponent extends _FormFieldComponentBase {
|
|
|
6927
6929
|
//! highlighting years
|
|
6928
6930
|
this.__highlightedYear = signal(null);
|
|
6929
6931
|
this.highlightedYear = this.__highlightedYear.asReadonly();
|
|
6930
|
-
this.currentYearRangeStart = linkedSignal(() =>
|
|
6932
|
+
this.currentYearRangeStart = linkedSignal(() => {
|
|
6933
|
+
const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - 8; // current year always in 3rd row
|
|
6934
|
+
const activeYear = this.activeYear();
|
|
6935
|
+
const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, 24, 'up') - 24; // check how many 24-year pages need to be turned
|
|
6936
|
+
return rangeStartForCurrentYear + offset;
|
|
6937
|
+
});
|
|
6931
6938
|
//! internals
|
|
6932
6939
|
this._isUsingKeyboard = signal(false);
|
|
6933
6940
|
//! templates
|
|
@@ -7303,7 +7310,7 @@ class ArdiumCalendarComponent extends _FormFieldComponentBase {
|
|
|
7303
7310
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
7304
7311
|
useExisting: ArdiumCalendarComponent,
|
|
7305
7312
|
},
|
|
7306
|
-
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [
|
|
7313
|
+
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7307
7314
|
}
|
|
7308
7315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
|
|
7309
7316
|
type: Component,
|
|
@@ -7317,7 +7324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7317
7324
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
7318
7325
|
useExisting: ArdiumCalendarComponent,
|
|
7319
7326
|
},
|
|
7320
|
-
], template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [
|
|
7327
|
+
], template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n" }]
|
|
7321
7328
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7322
7329
|
type: Inject,
|
|
7323
7330
|
args: [ARD_CALENDAR_DEFAULTS]
|
|
@@ -7401,6 +7408,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
|
|
|
7401
7408
|
});
|
|
7402
7409
|
//! calendar attributes
|
|
7403
7410
|
this.activeView = model(this._DEFAULTS.activeView);
|
|
7411
|
+
this.startView = input(this._DEFAULTS.startView);
|
|
7404
7412
|
this.activeYear = model(this._DEFAULTS.activeYear);
|
|
7405
7413
|
this.activeMonth = model(this._DEFAULTS.activeMonth);
|
|
7406
7414
|
this.firstWeekday = input(this._DEFAULTS.firstWeekday, {
|
|
@@ -7428,8 +7436,8 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
|
|
|
7428
7436
|
});
|
|
7429
7437
|
this.min = input(this._DEFAULTS.min, { transform: v => coerceDateProperty(v, this._DEFAULTS.min) });
|
|
7430
7438
|
this.max = input(this._DEFAULTS.max, { transform: v => coerceDateProperty(v, this._DEFAULTS.max) });
|
|
7431
|
-
this.UTC = input(
|
|
7432
|
-
this._UTCAfterInit = signal(
|
|
7439
|
+
this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
|
|
7440
|
+
this._UTCAfterInit = signal(this._DEFAULTS.UTC);
|
|
7433
7441
|
this.filter = input(this._DEFAULTS.filter);
|
|
7434
7442
|
//! calendar outputs
|
|
7435
7443
|
this.yearSelect = output();
|
|
@@ -7465,11 +7473,19 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
|
|
|
7465
7473
|
cancel: () => this.onCancelButtonClick(),
|
|
7466
7474
|
disabled: this.disabled() || this.calendarDisabled(),
|
|
7467
7475
|
}));
|
|
7476
|
+
// emit value whenever it changes
|
|
7468
7477
|
effect(() => {
|
|
7469
7478
|
this.value();
|
|
7470
7479
|
this._emitChange();
|
|
7471
7480
|
this._serializeValueIntoDateInput();
|
|
7472
|
-
}
|
|
7481
|
+
});
|
|
7482
|
+
// set active view when start view is defined
|
|
7483
|
+
effect(() => {
|
|
7484
|
+
const startView = this.startView();
|
|
7485
|
+
if (startView && this.isOpen()) {
|
|
7486
|
+
this.activeView.set(startView);
|
|
7487
|
+
}
|
|
7488
|
+
});
|
|
7473
7489
|
}
|
|
7474
7490
|
writeValue(v) {
|
|
7475
7491
|
if (v instanceof Date) {
|
|
@@ -7667,7 +7683,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
|
|
|
7667
7683
|
this.closeEvent.emit();
|
|
7668
7684
|
}
|
|
7669
7685
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, deps: [{ token: ARD_DATE_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDateInputComponent, isStandalone: false, selector: "ard-date-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateInputValue: "dateInputValueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, providers: [
|
|
7686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDateInputComponent, isStandalone: false, selector: "ard-date-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateInputValue: "dateInputValueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, providers: [
|
|
7671
7687
|
{
|
|
7672
7688
|
provide: NG_VALUE_ACCESSOR,
|
|
7673
7689
|
useExisting: forwardRef(() => ArdiumDateInputComponent),
|
|
@@ -7677,7 +7693,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
|
|
|
7677
7693
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
7678
7694
|
useExisting: ArdiumDateInputComponent,
|
|
7679
7695
|
},
|
|
7680
|
-
], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7696
|
+
], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [selected]=\"value()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7681
7697
|
}
|
|
7682
7698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
|
|
7683
7699
|
type: Component,
|
|
@@ -7691,7 +7707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7691
7707
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
7692
7708
|
useExisting: ArdiumDateInputComponent,
|
|
7693
7709
|
},
|
|
7694
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
|
|
7710
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [selected]=\"value()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
|
|
7695
7711
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7696
7712
|
type: Inject,
|
|
7697
7713
|
args: [ARD_DATE_INPUT_DEFAULTS]
|