@ardium-ui/ui 5.0.0-alpha.56 → 5.0.0-alpha.58
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.
|
@@ -739,6 +739,10 @@ class InputModel {
|
|
|
739
739
|
this.value.set(null);
|
|
740
740
|
this._updateInputElement();
|
|
741
741
|
}
|
|
742
|
+
trim() {
|
|
743
|
+
this.value.update(v => v?.trim() ?? null);
|
|
744
|
+
this._updateInputElement();
|
|
745
|
+
}
|
|
742
746
|
_updateInputElement() {
|
|
743
747
|
const el = this._ardHostCmp.textInputEl()?.nativeElement;
|
|
744
748
|
if (!el)
|
|
@@ -964,6 +968,7 @@ const _simpleInputComponentDefaults = {
|
|
|
964
968
|
clearButtonTitle: 'Clear',
|
|
965
969
|
inputAttrs: {},
|
|
966
970
|
maxLength: undefined,
|
|
971
|
+
autoTrim: false,
|
|
967
972
|
};
|
|
968
973
|
class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
969
974
|
constructor() {
|
|
@@ -997,6 +1002,7 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
|
997
1002
|
this.maxLengthAsInt = computed(() => this.maxLength() ?? 2_147_483_647);
|
|
998
1003
|
//! no-value attribute setters/getters
|
|
999
1004
|
this.clearable = input(this._DEFAULTS.clearable, { transform: v => coerceBooleanProperty(v) });
|
|
1005
|
+
this.autoTrim = input(this._DEFAULTS.autoTrim, { transform: v => coerceBooleanProperty(v) });
|
|
1000
1006
|
//! value two-way binding
|
|
1001
1007
|
this._valueBeforeInit = null;
|
|
1002
1008
|
this.valueChange = output();
|
|
@@ -1048,6 +1054,11 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
|
1048
1054
|
}
|
|
1049
1055
|
onBlurMaster(event) {
|
|
1050
1056
|
this.onBlur(event);
|
|
1057
|
+
if (!this.autoTrim())
|
|
1058
|
+
return;
|
|
1059
|
+
this.inputModel.trim();
|
|
1060
|
+
this._emitChange();
|
|
1061
|
+
this._emitInput();
|
|
1051
1062
|
}
|
|
1052
1063
|
onChange(event) {
|
|
1053
1064
|
event.stopPropagation();
|
|
@@ -1092,7 +1103,7 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
|
1092
1103
|
}
|
|
1093
1104
|
}
|
|
1094
1105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SimpleInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1095
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _SimpleInputComponentBase, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", 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 }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
1106
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _SimpleInputComponentBase, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", 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 }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, autoTrim: { classPropertyName: "autoTrim", publicName: "autoTrim", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
1096
1107
|
}
|
|
1097
1108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SimpleInputComponentBase, decorators: [{
|
|
1098
1109
|
type: Directive
|
|
@@ -1100,7 +1111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1100
1111
|
type: Input
|
|
1101
1112
|
}] } });
|
|
1102
1113
|
|
|
1103
|
-
const _inputDefaults = {
|
|
1114
|
+
const _inputDefaults$1 = {
|
|
1104
1115
|
..._simpleInputComponentDefaults,
|
|
1105
1116
|
suggValueFrom: 'value',
|
|
1106
1117
|
suggLabelFrom: 'label',
|
|
@@ -1112,11 +1123,11 @@ const _inputDefaults = {
|
|
|
1112
1123
|
};
|
|
1113
1124
|
const ARD_AUTOCOMPLETE_INPUT_DEFAULTS = new InjectionToken('ard-autocomplete-input-defaults', {
|
|
1114
1125
|
factory: () => ({
|
|
1115
|
-
..._inputDefaults,
|
|
1126
|
+
..._inputDefaults$1,
|
|
1116
1127
|
}),
|
|
1117
1128
|
});
|
|
1118
1129
|
function provideAutocompleteInputDefaults(config) {
|
|
1119
|
-
return { provide: ARD_AUTOCOMPLETE_INPUT_DEFAULTS, useValue: { ..._inputDefaults, ...config } };
|
|
1130
|
+
return { provide: ARD_AUTOCOMPLETE_INPUT_DEFAULTS, useValue: { ..._inputDefaults$1, ...config } };
|
|
1120
1131
|
}
|
|
1121
1132
|
|
|
1122
1133
|
class ArdAutocompleteInputSuggestionTemplateDirective {
|
|
@@ -2326,25 +2337,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2326
2337
|
}]
|
|
2327
2338
|
}] });
|
|
2328
2339
|
|
|
2329
|
-
const
|
|
2330
|
-
...
|
|
2331
|
-
appearance: FormElementAppearance.Outlined,
|
|
2332
|
-
variant: FormElementVariant.Rounded,
|
|
2333
|
-
compact: false,
|
|
2334
|
-
placeholder: '',
|
|
2335
|
-
alignText: SimpleOneAxisAlignment.Left,
|
|
2336
|
-
clearable: false,
|
|
2337
|
-
clearButtonTitle: 'Clear',
|
|
2338
|
-
inputAttrs: {},
|
|
2339
|
-
maxLength: undefined,
|
|
2340
|
+
const _inputDefaults = {
|
|
2341
|
+
..._simpleInputComponentDefaults,
|
|
2340
2342
|
};
|
|
2341
2343
|
const ARD_SIMPLE_INPUT_DEFAULTS = new InjectionToken('ard-input-defaults', {
|
|
2342
2344
|
factory: () => ({
|
|
2343
|
-
...
|
|
2345
|
+
..._inputDefaults,
|
|
2344
2346
|
}),
|
|
2345
2347
|
});
|
|
2346
2348
|
function provideInputDefaults(config) {
|
|
2347
|
-
return { provide: ARD_SIMPLE_INPUT_DEFAULTS, useValue: { ...
|
|
2349
|
+
return { provide: ARD_SIMPLE_INPUT_DEFAULTS, useValue: { ..._inputDefaults, ...config } };
|
|
2348
2350
|
}
|
|
2349
2351
|
|
|
2350
2352
|
class ArdInputPlaceholderTemplateDirective {
|
|
@@ -3931,6 +3933,8 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3931
3933
|
unselect: () => {
|
|
3932
3934
|
this.unselectItem(item);
|
|
3933
3935
|
},
|
|
3936
|
+
itemsSelectedCount: this.itemStorage.selectedItems().length,
|
|
3937
|
+
totalItemsCount: this.itemStorage.items().length,
|
|
3934
3938
|
}));
|
|
3935
3939
|
this.groupContextGenerator = computed(() => group => ({
|
|
3936
3940
|
$implicit: group,
|
|
@@ -7845,11 +7849,11 @@ class MonthsViewComponent {
|
|
|
7845
7849
|
return isYearOutOfRange(year, this.min(), this.max());
|
|
7846
7850
|
}
|
|
7847
7851
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\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)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.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 >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\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)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.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 >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7849
7853
|
}
|
|
7850
7854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
|
|
7851
7855
|
type: Component,
|
|
7852
|
-
args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\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)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.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 >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
7856
|
+
args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\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)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.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 >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
7853
7857
|
}], propDecorators: { onMouseMove: [{
|
|
7854
7858
|
type: HostListener,
|
|
7855
7859
|
args: ['mousemove']
|
|
@@ -8143,11 +8147,11 @@ class YearsViewComponent {
|
|
|
8143
8147
|
this.triggerHighlightSameYearNextPage.emit(event.altKey);
|
|
8144
8148
|
}
|
|
8145
8149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8146
|
-
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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\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
|
|
8150
|
+
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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n —\r\n {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8147
8151
|
}
|
|
8148
8152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
|
|
8149
8153
|
type: Component,
|
|
8150
|
-
args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, 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-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\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
|
|
8154
|
+
args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, 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-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\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 }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n —\r\n {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\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 }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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" }]
|
|
8151
8155
|
}], propDecorators: { onMouseMove: [{
|
|
8152
8156
|
type: HostListener,
|
|
8153
8157
|
args: ['mousemove']
|