@ngneers/controls 0.0.1-pre5 → 0.0.1-pre6
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/ngneers-controls-accordion.mjs +32 -32
- package/fesm2022/ngneers-controls-accordion.mjs.map +1 -1
- package/fesm2022/ngneers-controls-api-ng.mjs +19 -19
- package/fesm2022/ngneers-controls-api-ng.mjs.map +1 -1
- package/fesm2022/ngneers-controls-api-resize.mjs +706 -0
- package/fesm2022/ngneers-controls-api-resize.mjs.map +1 -0
- package/fesm2022/ngneers-controls-avatar.mjs +13 -13
- package/fesm2022/ngneers-controls-avatar.mjs.map +1 -1
- package/fesm2022/ngneers-controls-base.mjs +89 -64
- package/fesm2022/ngneers-controls-base.mjs.map +1 -1
- package/fesm2022/ngneers-controls-breadcrumb.mjs +18 -18
- package/fesm2022/ngneers-controls-breadcrumb.mjs.map +1 -1
- package/fesm2022/ngneers-controls-button-group.mjs +8 -8
- package/fesm2022/ngneers-controls-button-group.mjs.map +1 -1
- package/fesm2022/ngneers-controls-button.mjs +15 -10
- package/fesm2022/ngneers-controls-button.mjs.map +1 -1
- package/fesm2022/{ngneers-controls-calendar-time-BEeJIqIX.mjs → ngneers-controls-calendar-time-Bzlv9Vkn.mjs} +9 -9
- package/fesm2022/{ngneers-controls-calendar-time-BEeJIqIX.mjs.map → ngneers-controls-calendar-time-Bzlv9Vkn.mjs.map} +1 -1
- package/fesm2022/ngneers-controls-calendar.mjs +54 -54
- package/fesm2022/ngneers-controls-calendar.mjs.map +1 -1
- package/fesm2022/ngneers-controls-checkbox.mjs +9 -9
- package/fesm2022/ngneers-controls-checkbox.mjs.map +1 -1
- package/fesm2022/ngneers-controls-chip.mjs +6 -6
- package/fesm2022/ngneers-controls-chip.mjs.map +1 -1
- package/fesm2022/ngneers-controls-defer.mjs +10 -10
- package/fesm2022/ngneers-controls-defer.mjs.map +1 -1
- package/fesm2022/ngneers-controls-dialog.mjs +37 -39
- package/fesm2022/ngneers-controls-dialog.mjs.map +1 -1
- package/fesm2022/ngneers-controls-directives.mjs +45 -39
- package/fesm2022/ngneers-controls-directives.mjs.map +1 -1
- package/fesm2022/ngneers-controls-drawer.mjs +28 -28
- package/fesm2022/ngneers-controls-drawer.mjs.map +1 -1
- package/fesm2022/ngneers-controls-edit-inplace.mjs +15 -15
- package/fesm2022/ngneers-controls-edit-inplace.mjs.map +1 -1
- package/fesm2022/ngneers-controls-filter.mjs +192 -44
- package/fesm2022/ngneers-controls-filter.mjs.map +1 -1
- package/fesm2022/{ngneers-controls-i18n-de-CdTPeBiR.mjs → ngneers-controls-i18n-de-CF0xTWEX.mjs} +9 -5
- package/fesm2022/ngneers-controls-i18n-de-CF0xTWEX.mjs.map +1 -0
- package/fesm2022/{ngneers-controls-i18n-en-Cfp2pOLY.mjs → ngneers-controls-i18n-en-8B7xAjH2.mjs} +9 -5
- package/fesm2022/ngneers-controls-i18n-en-8B7xAjH2.mjs.map +1 -0
- package/fesm2022/ngneers-controls-i18n.mjs +5 -5
- package/fesm2022/ngneers-controls-i18n.mjs.map +1 -1
- package/fesm2022/ngneers-controls-icon.mjs +10 -10
- package/fesm2022/ngneers-controls-icon.mjs.map +1 -1
- package/fesm2022/ngneers-controls-inplace.mjs +18 -18
- package/fesm2022/ngneers-controls-inplace.mjs.map +1 -1
- package/fesm2022/ngneers-controls-input-field.mjs +14 -14
- package/fesm2022/ngneers-controls-input-field.mjs.map +1 -1
- package/fesm2022/ngneers-controls-input-mask.mjs +8 -8
- package/fesm2022/ngneers-controls-input-mask.mjs.map +1 -1
- package/fesm2022/ngneers-controls-input.mjs +6 -6
- package/fesm2022/ngneers-controls-input.mjs.map +1 -1
- package/fesm2022/ngneers-controls-item-view.mjs +33 -33
- package/fesm2022/ngneers-controls-item-view.mjs.map +1 -1
- package/fesm2022/ngneers-controls-list-box.mjs +31 -31
- package/fesm2022/ngneers-controls-list-box.mjs.map +1 -1
- package/fesm2022/ngneers-controls-menu.mjs +32 -32
- package/fesm2022/ngneers-controls-menu.mjs.map +1 -1
- package/fesm2022/ngneers-controls-message.mjs +4 -4
- package/fesm2022/ngneers-controls-message.mjs.map +1 -1
- package/fesm2022/ngneers-controls-paginator.mjs +12 -12
- package/fesm2022/ngneers-controls-paginator.mjs.map +1 -1
- package/fesm2022/ngneers-controls-popover.mjs +13 -13
- package/fesm2022/ngneers-controls-popover.mjs.map +1 -1
- package/fesm2022/ngneers-controls-progress.mjs +16 -16
- package/fesm2022/ngneers-controls-progress.mjs.map +1 -1
- package/fesm2022/ngneers-controls-scroller.mjs +74 -39
- package/fesm2022/ngneers-controls-scroller.mjs.map +1 -1
- package/fesm2022/ngneers-controls-select-button.mjs +6 -6
- package/fesm2022/ngneers-controls-select-button.mjs.map +1 -1
- package/fesm2022/ngneers-controls-select.mjs +46 -46
- package/fesm2022/ngneers-controls-select.mjs.map +1 -1
- package/fesm2022/ngneers-controls-slider.mjs +11 -11
- package/fesm2022/ngneers-controls-slider.mjs.map +1 -1
- package/fesm2022/ngneers-controls-spinner.mjs +7 -7
- package/fesm2022/ngneers-controls-spinner.mjs.map +1 -1
- package/fesm2022/ngneers-controls-splitter.mjs +141 -328
- package/fesm2022/ngneers-controls-splitter.mjs.map +1 -1
- package/fesm2022/ngneers-controls-switch.mjs +3 -3
- package/fesm2022/ngneers-controls-table.mjs +1520 -80
- package/fesm2022/ngneers-controls-table.mjs.map +1 -1
- package/fesm2022/ngneers-controls-tabs.mjs +40 -39
- package/fesm2022/ngneers-controls-tabs.mjs.map +1 -1
- package/fesm2022/ngneers-controls-tag.mjs +4 -4
- package/fesm2022/ngneers-controls-tag.mjs.map +1 -1
- package/fesm2022/ngneers-controls-toast.mjs +18 -18
- package/fesm2022/ngneers-controls-toast.mjs.map +1 -1
- package/fesm2022/ngneers-controls-toggle-button.mjs +9 -9
- package/fesm2022/ngneers-controls-toggle-button.mjs.map +1 -1
- package/fesm2022/ngneers-controls-tooltip.mjs +36 -36
- package/fesm2022/ngneers-controls-tooltip.mjs.map +1 -1
- package/fesm2022/ngneers-controls-utils-ng.mjs +9 -9
- package/fesm2022/ngneers-controls-utils-ng.mjs.map +1 -1
- package/package.json +14 -10
- package/types/ngneers-controls-api-ng.d.ts +2 -2
- package/types/ngneers-controls-api-resize.d.ts +318 -0
- package/types/ngneers-controls-base.d.ts +8 -0
- package/types/ngneers-controls-breadcrumb.d.ts +1 -1
- package/types/ngneers-controls-button.d.ts +13 -8
- package/types/ngneers-controls-calendar.d.ts +5 -1
- package/types/ngneers-controls-checkbox.d.ts +1 -1
- package/types/ngneers-controls-directives.d.ts +7 -1
- package/types/ngneers-controls-drawer.d.ts +4 -0
- package/types/ngneers-controls-edit-inplace.d.ts +4 -0
- package/types/ngneers-controls-filter.d.ts +53 -4
- package/types/ngneers-controls-i18n.d.ts +4 -0
- package/types/ngneers-controls-icon.d.ts +1 -1
- package/types/ngneers-controls-input-field.d.ts +4 -0
- package/types/ngneers-controls-list-box.d.ts +5 -1
- package/types/ngneers-controls-menu.d.ts +1 -1
- package/types/ngneers-controls-paginator.d.ts +4 -0
- package/types/ngneers-controls-popover.d.ts +1 -1
- package/types/ngneers-controls-scroller.d.ts +12 -2
- package/types/ngneers-controls-select.d.ts +6 -2
- package/types/ngneers-controls-spinner.d.ts +1 -1
- package/types/ngneers-controls-splitter.d.ts +29 -59
- package/types/ngneers-controls-table.d.ts +392 -24
- package/types/ngneers-controls-toast.d.ts +1 -1
- package/fesm2022/ngneers-controls-i18n-de-CdTPeBiR.mjs.map +0 -1
- package/fesm2022/ngneers-controls-i18n-en-Cfp2pOLY.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngneers-controls-calendar-time-
|
|
1
|
+
{"version":3,"file":"ngneers-controls-calendar-time-Bzlv9Vkn.mjs","sources":["../../src/calendar/time/time.ts","../../src/calendar/time/time.html"],"sourcesContent":["import { Component, computed, inject, input, output, ChangeDetectionStrategy } from '@angular/core';\r\nimport { Platform } from '@ngneers/controls/api/ng';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnInput } from '@ngneers/controls/input';\r\nimport { MASKS, NgnInputMask } from '@ngneers/controls/input-mask';\r\n\r\nimport type { NgnBaseSafe } from '@ngneers/controls/base';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-calendar-time',\r\n templateUrl: './time.html',\r\n imports: [NgnInput, NgnInputMask],\r\n})\r\nexport class CalendarTime {\r\n protected readonly i18n = inject(I18n).translations;\r\n protected readonly isTouchDevice = inject(Platform).isTouchDevice();\r\n\r\n public readonly component = input.required<NgnBaseSafe<'calendar'>>();\r\n public readonly currentValue = input.required<Date | null>();\r\n public readonly showSeconds = input.required<boolean>();\r\n public readonly timeChange = output<Date | null>();\r\n public readonly mask = computed(() => (this.showSeconds() ? MASKS.timeSeconds : MASKS.time));\r\n\r\n protected readonly value = computed(() => {\r\n const currentValue = this.currentValue();\r\n if (!currentValue) return null;\r\n\r\n function padZero(num: number): string {\r\n return num < 10 ? `0${num}` : `${num}`;\r\n }\r\n\r\n const hours = padZero(currentValue.getHours());\r\n const minutes = padZero(currentValue.getMinutes());\r\n const seconds = padZero(currentValue.getSeconds());\r\n\r\n return this.showSeconds() ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;\r\n });\r\n\r\n protected onValueChange(value: string) {\r\n const [hours, minutes, seconds] = value.split(':').map(Number);\r\n\r\n if (hours === undefined || minutes === undefined) {\r\n throw new Error(`Invalid time value: ${value}`);\r\n }\r\n\r\n if (isNaN(hours)) {\r\n this.timeChange.emit(null);\r\n }\r\n\r\n const fixedMinutes = isNaN(minutes) ? 0 : minutes;\r\n\r\n const currentDate = this.currentValue();\r\n const newDate = new Date(currentDate || new Date());\r\n newDate.setHours(hours);\r\n newDate.setMinutes(fixedMinutes);\r\n\r\n if (this.showSeconds()) {\r\n const fixedSeconds = isNaN(seconds ?? 0) ? 0 : (seconds ?? 0);\r\n newDate.setSeconds(fixedSeconds);\r\n } else {\r\n newDate.setSeconds(0);\r\n }\r\n\r\n if (\r\n newDate.getMinutes() !== currentDate?.getMinutes() ||\r\n newDate.getHours() !== currentDate?.getHours() ||\r\n (this.showSeconds() && newDate.getSeconds() !== currentDate?.getSeconds())\r\n ) {\r\n this.timeChange.emit(newDate);\r\n }\r\n }\r\n}\r\n","<div>\r\n @if (isTouchDevice) {\r\n <input\r\n type=\"time\"\r\n ngnInput\r\n [step]=\"showSeconds() ? 1 : 60\"\r\n [value]=\"value()\"\r\n (valueChange)=\"onValueChange($event || '')\"\r\n />\r\n } @else {\r\n <ngn-input-mask [mask]=\"mask()\">\r\n <input\r\n #input\r\n ngnInput\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"onValueChange(input.value || '')\"\r\n />\r\n </ngn-input-mask>\r\n }\r\n</div>\r\n"],"names":[],"mappings":"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"}
|
|
@@ -15,57 +15,57 @@ import { NgnButton } from '@ngneers/controls/button';
|
|
|
15
15
|
class CalendarTemplates extends ValueControlBase {
|
|
16
16
|
// Day template
|
|
17
17
|
_defaultDayTemplate = viewChild.required('defaultDayTemplate');
|
|
18
|
-
_userDayTemplate = contentChild('day', ...(ngDevMode ? [{ debugName: "_userDayTemplate" }] : []));
|
|
18
|
+
_userDayTemplate = contentChild('day', ...(ngDevMode ? [{ debugName: "_userDayTemplate" }] : /* istanbul ignore next */ []));
|
|
19
19
|
/**
|
|
20
20
|
* Set a custom template for a day.
|
|
21
21
|
* Can also be set using an `<ng-template>` element with `#day` template reference variable.
|
|
22
22
|
*/
|
|
23
|
-
templateDay = input(null, ...(ngDevMode ? [{ debugName: "templateDay" }] : []));
|
|
24
|
-
dayTemplate = computed(() => this._userDayTemplate() ?? this.templateDay() ?? this._defaultDayTemplate(), ...(ngDevMode ? [{ debugName: "dayTemplate" }] : []));
|
|
23
|
+
templateDay = input(null, ...(ngDevMode ? [{ debugName: "templateDay" }] : /* istanbul ignore next */ []));
|
|
24
|
+
dayTemplate = computed(() => this._userDayTemplate() ?? this.templateDay() ?? this._defaultDayTemplate(), ...(ngDevMode ? [{ debugName: "dayTemplate" }] : /* istanbul ignore next */ []));
|
|
25
25
|
// Week day template
|
|
26
26
|
_defaultWeekDayTemplate = viewChild.required('defaultWeekDayTemplate');
|
|
27
|
-
_userWeekDayTemplate = contentChild('weekDay', ...(ngDevMode ? [{ debugName: "_userWeekDayTemplate" }] : []));
|
|
27
|
+
_userWeekDayTemplate = contentChild('weekDay', ...(ngDevMode ? [{ debugName: "_userWeekDayTemplate" }] : /* istanbul ignore next */ []));
|
|
28
28
|
/**
|
|
29
29
|
* Set a custom template for a week day.
|
|
30
30
|
* Can also be set using an `<ng-template>` element with `#weekDay` template reference variable.
|
|
31
31
|
*/
|
|
32
|
-
templateWeekDay = input(null, ...(ngDevMode ? [{ debugName: "templateWeekDay" }] : []));
|
|
33
|
-
weekDayTemplate = computed(() => this._userWeekDayTemplate() ?? this.templateWeekDay() ?? this._defaultWeekDayTemplate(), ...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : []));
|
|
32
|
+
templateWeekDay = input(null, ...(ngDevMode ? [{ debugName: "templateWeekDay" }] : /* istanbul ignore next */ []));
|
|
33
|
+
weekDayTemplate = computed(() => this._userWeekDayTemplate() ?? this.templateWeekDay() ?? this._defaultWeekDayTemplate(), ...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : /* istanbul ignore next */ []));
|
|
34
34
|
// Month template
|
|
35
35
|
_defaultMonthTemplate = viewChild.required('defaultMonthTemplate');
|
|
36
|
-
_userMonthTemplate = contentChild('month', ...(ngDevMode ? [{ debugName: "_userMonthTemplate" }] : []));
|
|
36
|
+
_userMonthTemplate = contentChild('month', ...(ngDevMode ? [{ debugName: "_userMonthTemplate" }] : /* istanbul ignore next */ []));
|
|
37
37
|
/**
|
|
38
38
|
* Set a custom template for a month.
|
|
39
39
|
* Can also be set using an `<ng-template>` element with `#month` template reference variable.
|
|
40
40
|
*/
|
|
41
|
-
templateMonth = input(null, ...(ngDevMode ? [{ debugName: "templateMonth" }] : []));
|
|
42
|
-
monthTemplate = computed(() => this._userMonthTemplate() ?? this.templateMonth() ?? this._defaultMonthTemplate(), ...(ngDevMode ? [{ debugName: "monthTemplate" }] : []));
|
|
41
|
+
templateMonth = input(null, ...(ngDevMode ? [{ debugName: "templateMonth" }] : /* istanbul ignore next */ []));
|
|
42
|
+
monthTemplate = computed(() => this._userMonthTemplate() ?? this.templateMonth() ?? this._defaultMonthTemplate(), ...(ngDevMode ? [{ debugName: "monthTemplate" }] : /* istanbul ignore next */ []));
|
|
43
43
|
// Time template
|
|
44
44
|
_defaultTimeTemplate = viewChild.required('defaultTimeTemplate');
|
|
45
|
-
_userTimeTemplate = contentChild('time', ...(ngDevMode ? [{ debugName: "_userTimeTemplate" }] : []));
|
|
45
|
+
_userTimeTemplate = contentChild('time', ...(ngDevMode ? [{ debugName: "_userTimeTemplate" }] : /* istanbul ignore next */ []));
|
|
46
46
|
/**
|
|
47
47
|
* Set a custom template for the time input.
|
|
48
48
|
* Can also be set using an `<ng-template>` element with `#time` template reference variable.
|
|
49
49
|
*/
|
|
50
|
-
templateTime = input(null, ...(ngDevMode ? [{ debugName: "templateTime" }] : []));
|
|
51
|
-
timeTemplate = computed(() => this._userTimeTemplate() ?? this.templateTime() ?? this._defaultTimeTemplate(), ...(ngDevMode ? [{ debugName: "timeTemplate" }] : []));
|
|
50
|
+
templateTime = input(null, ...(ngDevMode ? [{ debugName: "templateTime" }] : /* istanbul ignore next */ []));
|
|
51
|
+
timeTemplate = computed(() => this._userTimeTemplate() ?? this.templateTime() ?? this._defaultTimeTemplate(), ...(ngDevMode ? [{ debugName: "timeTemplate" }] : /* istanbul ignore next */ []));
|
|
52
52
|
// Year template
|
|
53
53
|
_defaultYearTemplate = viewChild.required('defaultYearTemplate');
|
|
54
|
-
_userYearTemplate = contentChild('year', ...(ngDevMode ? [{ debugName: "_userYearTemplate" }] : []));
|
|
54
|
+
_userYearTemplate = contentChild('year', ...(ngDevMode ? [{ debugName: "_userYearTemplate" }] : /* istanbul ignore next */ []));
|
|
55
55
|
/**
|
|
56
56
|
* Set a custom template for the year input.
|
|
57
57
|
* Can also be set using an `<ng-template>` element with `#year` template reference variable.
|
|
58
58
|
*/
|
|
59
|
-
templateYear = input(null, ...(ngDevMode ? [{ debugName: "templateYear" }] : []));
|
|
60
|
-
yearTemplate = computed(() => this._userYearTemplate() ?? this.templateYear() ?? this._defaultYearTemplate(), ...(ngDevMode ? [{ debugName: "yearTemplate" }] : []));
|
|
59
|
+
templateYear = input(null, ...(ngDevMode ? [{ debugName: "templateYear" }] : /* istanbul ignore next */ []));
|
|
60
|
+
yearTemplate = computed(() => this._userYearTemplate() ?? this.templateYear() ?? this._defaultYearTemplate(), ...(ngDevMode ? [{ debugName: "yearTemplate" }] : /* istanbul ignore next */ []));
|
|
61
61
|
/**
|
|
62
62
|
* Types for the calendar templates.
|
|
63
63
|
*/
|
|
64
64
|
templateTypes = templateTypesFn();
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
66
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.
|
|
65
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CalendarTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
66
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.2", type: CalendarTemplates, isStandalone: true, inputs: { templateDay: { classPropertyName: "templateDay", publicName: "templateDay", isSignal: true, isRequired: false, transformFunction: null }, templateWeekDay: { classPropertyName: "templateWeekDay", publicName: "templateWeekDay", isSignal: true, isRequired: false, transformFunction: null }, templateMonth: { classPropertyName: "templateMonth", publicName: "templateMonth", isSignal: true, isRequired: false, transformFunction: null }, templateTime: { classPropertyName: "templateTime", publicName: "templateTime", isSignal: true, isRequired: false, transformFunction: null }, templateYear: { classPropertyName: "templateYear", publicName: "templateYear", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userDayTemplate", first: true, predicate: ["day"], descendants: true, isSignal: true }, { propertyName: "_userWeekDayTemplate", first: true, predicate: ["weekDay"], descendants: true, isSignal: true }, { propertyName: "_userMonthTemplate", first: true, predicate: ["month"], descendants: true, isSignal: true }, { propertyName: "_userTimeTemplate", first: true, predicate: ["time"], descendants: true, isSignal: true }, { propertyName: "_userYearTemplate", first: true, predicate: ["year"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultDayTemplate", first: true, predicate: ["defaultDayTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultWeekDayTemplate", first: true, predicate: ["defaultWeekDayTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultMonthTemplate", first: true, predicate: ["defaultMonthTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultTimeTemplate", first: true, predicate: ["defaultTimeTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultYearTemplate", first: true, predicate: ["defaultYearTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
|
|
67
67
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CalendarTemplates, decorators: [{
|
|
69
69
|
type: Directive
|
|
70
70
|
}], propDecorators: { _defaultDayTemplate: [{ type: i0.ViewChild, args: ['defaultDayTemplate', { isSignal: true }] }], _userDayTemplate: [{ type: i0.ContentChild, args: ['day', { isSignal: true }] }], templateDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateDay", required: false }] }], _defaultWeekDayTemplate: [{ type: i0.ViewChild, args: ['defaultWeekDayTemplate', { isSignal: true }] }], _userWeekDayTemplate: [{ type: i0.ContentChild, args: ['weekDay', { isSignal: true }] }], templateWeekDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateWeekDay", required: false }] }], _defaultMonthTemplate: [{ type: i0.ViewChild, args: ['defaultMonthTemplate', { isSignal: true }] }], _userMonthTemplate: [{ type: i0.ContentChild, args: ['month', { isSignal: true }] }], templateMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateMonth", required: false }] }], _defaultTimeTemplate: [{ type: i0.ViewChild, args: ['defaultTimeTemplate', { isSignal: true }] }], _userTimeTemplate: [{ type: i0.ContentChild, args: ['time', { isSignal: true }] }], templateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateTime", required: false }] }], _defaultYearTemplate: [{ type: i0.ViewChild, args: ['defaultYearTemplate', { isSignal: true }] }], _userYearTemplate: [{ type: i0.ContentChild, args: ['year', { isSignal: true }] }], templateYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateYear", required: false }] }] } });
|
|
71
71
|
|
|
@@ -97,19 +97,19 @@ const WEEK_DAYS = [
|
|
|
97
97
|
const WEEKS_BEFORE = 1;
|
|
98
98
|
const WEEKS_AFTER = 1;
|
|
99
99
|
class CalendarDays {
|
|
100
|
-
component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
|
|
101
|
-
theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
102
|
-
year = input.required(...(ngDevMode ? [{ debugName: "year" }] : []));
|
|
103
|
-
month = input.required(...(ngDevMode ? [{ debugName: "month" }] : []));
|
|
104
|
-
currentValue = input.required(...(ngDevMode ? [{ debugName: "currentValue" }] : []));
|
|
105
|
-
firstDayOfWeek = input.required(...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
|
|
106
|
-
dayTemplate = input.required(...(ngDevMode ? [{ debugName: "dayTemplate" }] : []));
|
|
107
|
-
weekDayTemplate = input.required(...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : []));
|
|
108
|
-
timeTemplate = input.required(...(ngDevMode ? [{ debugName: "timeTemplate" }] : []));
|
|
109
|
-
yearTemplate = input.required(...(ngDevMode ? [{ debugName: "yearTemplate" }] : []));
|
|
110
|
-
monthTemplate = input.required(...(ngDevMode ? [{ debugName: "monthTemplate" }] : []));
|
|
111
|
-
showTime = input.required(...(ngDevMode ? [{ debugName: "showTime" }] : []));
|
|
112
|
-
showSeconds = input.required(...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
|
|
100
|
+
component = input.required(...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
|
|
101
|
+
theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
102
|
+
year = input.required(...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
|
|
103
|
+
month = input.required(...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
|
|
104
|
+
currentValue = input.required(...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
|
|
105
|
+
firstDayOfWeek = input.required(...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
106
|
+
dayTemplate = input.required(...(ngDevMode ? [{ debugName: "dayTemplate" }] : /* istanbul ignore next */ []));
|
|
107
|
+
weekDayTemplate = input.required(...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : /* istanbul ignore next */ []));
|
|
108
|
+
timeTemplate = input.required(...(ngDevMode ? [{ debugName: "timeTemplate" }] : /* istanbul ignore next */ []));
|
|
109
|
+
yearTemplate = input.required(...(ngDevMode ? [{ debugName: "yearTemplate" }] : /* istanbul ignore next */ []));
|
|
110
|
+
monthTemplate = input.required(...(ngDevMode ? [{ debugName: "monthTemplate" }] : /* istanbul ignore next */ []));
|
|
111
|
+
showTime = input.required(...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
|
|
112
|
+
showSeconds = input.required(...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
|
|
113
113
|
previousMonth = output();
|
|
114
114
|
nextMonth = output();
|
|
115
115
|
daySelected = output();
|
|
@@ -129,12 +129,12 @@ class CalendarDays {
|
|
|
129
129
|
.map(day => ({
|
|
130
130
|
weekDay: day,
|
|
131
131
|
translation: this.i18n[`calendar_weekdaysShort_${day}`],
|
|
132
|
-
})), ...(ngDevMode ? [{ debugName: "weekDaysSorted" }] : []));
|
|
133
|
-
_dayButton = viewChildren('dayButton', ...(ngDevMode ? [{ debugName: "_dayButton" }] : []));
|
|
134
|
-
_firstDayOfWeekIndex = computed(() => WEEK_DAYS.indexOf(this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "_firstDayOfWeekIndex" }] : []));
|
|
135
|
-
_daysInMonth = computed(() => new Date(this.year(), this.month() + 1, 0).getDate(), ...(ngDevMode ? [{ debugName: "_daysInMonth" }] : []));
|
|
136
|
-
_daysInPreviousMonth = computed(() => new Date(this.year(), this.month(), 0).getDate(), ...(ngDevMode ? [{ debugName: "_daysInPreviousMonth" }] : []));
|
|
137
|
-
_firstDayOfMonth = computed(() => new Date(this.year(), this.month(), 1).getDay(), ...(ngDevMode ? [{ debugName: "_firstDayOfMonth" }] : []));
|
|
132
|
+
})), ...(ngDevMode ? [{ debugName: "weekDaysSorted" }] : /* istanbul ignore next */ []));
|
|
133
|
+
_dayButton = viewChildren('dayButton', ...(ngDevMode ? [{ debugName: "_dayButton" }] : /* istanbul ignore next */ []));
|
|
134
|
+
_firstDayOfWeekIndex = computed(() => WEEK_DAYS.indexOf(this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "_firstDayOfWeekIndex" }] : /* istanbul ignore next */ []));
|
|
135
|
+
_daysInMonth = computed(() => new Date(this.year(), this.month() + 1, 0).getDate(), ...(ngDevMode ? [{ debugName: "_daysInMonth" }] : /* istanbul ignore next */ []));
|
|
136
|
+
_daysInPreviousMonth = computed(() => new Date(this.year(), this.month(), 0).getDate(), ...(ngDevMode ? [{ debugName: "_daysInPreviousMonth" }] : /* istanbul ignore next */ []));
|
|
137
|
+
_firstDayOfMonth = computed(() => new Date(this.year(), this.month(), 1).getDay(), ...(ngDevMode ? [{ debugName: "_firstDayOfMonth" }] : /* istanbul ignore next */ []));
|
|
138
138
|
monthModel = computed(() => {
|
|
139
139
|
const firstDayOfMonth = this._firstDayOfMonth();
|
|
140
140
|
const firstDayOfWeek = this._firstDayOfWeekIndex();
|
|
@@ -174,14 +174,14 @@ class CalendarDays {
|
|
|
174
174
|
});
|
|
175
175
|
}
|
|
176
176
|
return { weeks };
|
|
177
|
-
}, ...(ngDevMode ? [{ debugName: "monthModel" }] : []));
|
|
177
|
+
}, ...(ngDevMode ? [{ debugName: "monthModel" }] : /* istanbul ignore next */ []));
|
|
178
178
|
tabFocusDay = computed(() => {
|
|
179
179
|
const val = this.currentValue();
|
|
180
180
|
if (val && val.getMonth() === this.month() && val.getFullYear() === this.year()) {
|
|
181
181
|
return val.getDate();
|
|
182
182
|
}
|
|
183
183
|
return 1;
|
|
184
|
-
}, ...(ngDevMode ? [{ debugName: "tabFocusDay" }] : []));
|
|
184
|
+
}, ...(ngDevMode ? [{ debugName: "tabFocusDay" }] : /* istanbul ignore next */ []));
|
|
185
185
|
prev() {
|
|
186
186
|
this.previousMonth.emit();
|
|
187
187
|
}
|
|
@@ -252,10 +252,10 @@ class CalendarDays {
|
|
|
252
252
|
}
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CalendarDays, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: CalendarDays, isStandalone: true, selector: "ngn-calendar-days", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekDayTemplate: { classPropertyName: "weekDayTemplate", publicName: "weekDayTemplate", isSignal: true, isRequired: true, transformFunction: null }, timeTemplate: { classPropertyName: "timeTemplate", publicName: "timeTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: true, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { previousMonth: "previousMonth", nextMonth: "nextMonth", daySelected: "daySelected", yearSelected: "yearSelected", monthSelected: "monthSelected", timeChanged: "timeChanged" }, viewQueries: [{ propertyName: "_dayButton", predicate: ["dayButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ptInt]=\"component()\" [ptClass]=\"'details'\">\r\n <div [ptInt]=\"component()\" [ptClass]=\"'header'\">\r\n <div [ptInt]=\"component()\" [ptClass]=\"'navigation'\">\r\n <button\r\n ngnButton\r\n [kind]=\"'icon'\"\r\n [ptInt]=\"component()\"\r\n [ptClass]=\"'previous'\"\r\n (click)=\"prev()\"\r\n >\r\n <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n </button>\r\n <button ngnButton [kind]=\"'icon'\" [ptInt]=\"component()\" [ptClass]=\"'next'\" (click)=\"next()\">\r\n <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n monthTemplate();\r\n context: {\r\n $implicit: {\r\n month: MONTHS[month()],\r\n change: doMonthChange,\r\n },\r\n }\r\n \"\r\n />\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n yearTemplate();\r\n context: {\r\n $implicit: {\r\n year: year(),\r\n change: doYearChange,\r\n },\r\n }\r\n \"\r\n />\r\n </div>\r\n <div class=\"ngn-calendar-days\">\r\n @for (weekDay of weekDaysSorted(); track weekDay) {\r\n <span [ptInt]=\"component()\" [ptClass]=\"'week-day'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n weekDayTemplate();\r\n context: {\r\n $implicit: {\r\n weekDay: weekDay.weekDay,\r\n translation: weekDay.translation(),\r\n },\r\n }\r\n \"\r\n />\r\n </span>\r\n }\r\n @for (item of monthModel().weeks; track $index) {\r\n @for (day of item.days; track $index) {\r\n <button\r\n #dayButton\r\n [ptInt]=\"component()\"\r\n [ptClass]=\"{\r\n day: true,\r\n 'day-other-month': day.monthOffset !== 0,\r\n 'day-today':\r\n todaysMonth === month() + day.monthOffset &&\r\n todaysDay === day.date &&\r\n todaysYear === year(),\r\n 'day-selected':\r\n currentValue()?.getDate() === day.date &&\r\n currentValue()?.getMonth() === month() + day.monthOffset &&\r\n currentValue()?.getFullYear() === year(),\r\n }\"\r\n [tabIndex]=\"!day.monthOffset && tabFocusDay() === day.date ? 0 : -1\"\r\n type=\"button\"\r\n (click)=\"\r\n daySelected.emit({\r\n date: day.date,\r\n monthOffset: day.monthOffset,\r\n })\r\n \"\r\n (keydown)=\"dayKeydown($event, dayButton)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n dayTemplate();\r\n context: {\r\n $implicit: {\r\n date: day.date,\r\n fromOtherMonth: day.monthOffset !== 0,\r\n selected:\r\n currentValue()?.getDate() === day.date &&\r\n currentValue()?.getMonth() === month() + day.monthOffset &&\r\n currentValue()?.getFullYear() === year(),\r\n today:\r\n todaysMonth === month() + day.monthOffset &&\r\n todaysDay === day.date &&\r\n todaysYear === year(),\r\n },\r\n }\r\n \"\r\n />\r\n </button>\r\n }\r\n }\r\n </div>\r\n @if (showTime()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n timeTemplate();\r\n context: {\r\n $implicit: { time: currentValue(), showSeconds: showSeconds(), change: doTimeChange },\r\n }\r\n \"\r\n />\r\n }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
257
|
}
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CalendarDays, decorators: [{
|
|
259
259
|
type: Component,
|
|
260
260
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-calendar-days', imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon], template: "<div [ptInt]=\"component()\" [ptClass]=\"'details'\">\r\n <div [ptInt]=\"component()\" [ptClass]=\"'header'\">\r\n <div [ptInt]=\"component()\" [ptClass]=\"'navigation'\">\r\n <button\r\n ngnButton\r\n [kind]=\"'icon'\"\r\n [ptInt]=\"component()\"\r\n [ptClass]=\"'previous'\"\r\n (click)=\"prev()\"\r\n >\r\n <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n </button>\r\n <button ngnButton [kind]=\"'icon'\" [ptInt]=\"component()\" [ptClass]=\"'next'\" (click)=\"next()\">\r\n <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n </button>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n monthTemplate();\r\n context: {\r\n $implicit: {\r\n month: MONTHS[month()],\r\n change: doMonthChange,\r\n },\r\n }\r\n \"\r\n />\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n yearTemplate();\r\n context: {\r\n $implicit: {\r\n year: year(),\r\n change: doYearChange,\r\n },\r\n }\r\n \"\r\n />\r\n </div>\r\n <div class=\"ngn-calendar-days\">\r\n @for (weekDay of weekDaysSorted(); track weekDay) {\r\n <span [ptInt]=\"component()\" [ptClass]=\"'week-day'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n weekDayTemplate();\r\n context: {\r\n $implicit: {\r\n weekDay: weekDay.weekDay,\r\n translation: weekDay.translation(),\r\n },\r\n }\r\n \"\r\n />\r\n </span>\r\n }\r\n @for (item of monthModel().weeks; track $index) {\r\n @for (day of item.days; track $index) {\r\n <button\r\n #dayButton\r\n [ptInt]=\"component()\"\r\n [ptClass]=\"{\r\n day: true,\r\n 'day-other-month': day.monthOffset !== 0,\r\n 'day-today':\r\n todaysMonth === month() + day.monthOffset &&\r\n todaysDay === day.date &&\r\n todaysYear === year(),\r\n 'day-selected':\r\n currentValue()?.getDate() === day.date &&\r\n currentValue()?.getMonth() === month() + day.monthOffset &&\r\n currentValue()?.getFullYear() === year(),\r\n }\"\r\n [tabIndex]=\"!day.monthOffset && tabFocusDay() === day.date ? 0 : -1\"\r\n type=\"button\"\r\n (click)=\"\r\n daySelected.emit({\r\n date: day.date,\r\n monthOffset: day.monthOffset,\r\n })\r\n \"\r\n (keydown)=\"dayKeydown($event, dayButton)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n dayTemplate();\r\n context: {\r\n $implicit: {\r\n date: day.date,\r\n fromOtherMonth: day.monthOffset !== 0,\r\n selected:\r\n currentValue()?.getDate() === day.date &&\r\n currentValue()?.getMonth() === month() + day.monthOffset &&\r\n currentValue()?.getFullYear() === year(),\r\n today:\r\n todaysMonth === month() + day.monthOffset &&\r\n todaysDay === day.date &&\r\n todaysYear === year(),\r\n },\r\n }\r\n \"\r\n />\r\n </button>\r\n }\r\n }\r\n </div>\r\n @if (showTime()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n timeTemplate();\r\n context: {\r\n $implicit: { time: currentValue(), showSeconds: showSeconds(), change: doTimeChange },\r\n }\r\n \"\r\n />\r\n }\r\n</div>\r\n" }]
|
|
261
261
|
}], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], currentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentValue", required: true }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: true }] }], dayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTemplate", required: true }] }], weekDayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekDayTemplate", required: true }] }], timeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeTemplate", required: true }] }], yearTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearTemplate", required: true }] }], monthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthTemplate", required: true }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: true }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: true }] }], previousMonth: [{ type: i0.Output, args: ["previousMonth"] }], nextMonth: [{ type: i0.Output, args: ["nextMonth"] }], daySelected: [{ type: i0.Output, args: ["daySelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], timeChanged: [{ type: i0.Output, args: ["timeChanged"] }], _dayButton: [{ type: i0.ViewChildren, args: ['dayButton', { isSignal: true }] }] } });
|
|
@@ -276,28 +276,28 @@ class NgnCalendar extends CalendarTemplates {
|
|
|
276
276
|
* Set the first day of the week.
|
|
277
277
|
* @default 'monday'
|
|
278
278
|
*/
|
|
279
|
-
firstDayOfWeek = input('monday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
|
|
279
|
+
firstDayOfWeek = input('monday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
280
280
|
/**
|
|
281
281
|
* Whether to show the time input.
|
|
282
282
|
* @default false
|
|
283
283
|
*/
|
|
284
|
-
showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : {}), transform: booleanAttribute });
|
|
284
|
+
showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
285
285
|
/**
|
|
286
286
|
* Whether to show seconds in the time input.
|
|
287
287
|
* @default false
|
|
288
288
|
*/
|
|
289
|
-
showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : {}), transform: booleanAttribute });
|
|
289
|
+
showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
290
290
|
/**
|
|
291
291
|
* Whether to show the calendar inline instead of with a input field & popup.
|
|
292
292
|
* @default false
|
|
293
293
|
*/
|
|
294
|
-
inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : {}), transform: booleanAttribute });
|
|
295
|
-
_popover = viewChild(NgnPopover, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
|
|
294
|
+
inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
295
|
+
_popover = viewChild(NgnPopover, ...(ngDevMode ? [{ debugName: "_popover" }] : /* istanbul ignore next */ []));
|
|
296
296
|
_platform = inject(Platform);
|
|
297
297
|
i18n = inject(I18n).translations;
|
|
298
298
|
theme = this.injectThemeTemplate(calendarControlTemplate);
|
|
299
|
-
year = linkedSignal(() => this.value()?.getFullYear() || new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "year" }] : []));
|
|
300
|
-
month = linkedSignal(() => this.value()?.getMonth() ?? new Date().getMonth(), ...(ngDevMode ? [{ debugName: "month" }] : []));
|
|
299
|
+
year = linkedSignal(() => this.value()?.getFullYear() || new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
|
|
300
|
+
month = linkedSignal(() => this.value()?.getMonth() ?? new Date().getMonth(), ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
|
|
301
301
|
yearOptions = generateYearOptions();
|
|
302
302
|
monthOptions = computed(() => {
|
|
303
303
|
const months = Array.from({ length: 12 }, (_, i) => ({
|
|
@@ -306,7 +306,7 @@ class NgnCalendar extends CalendarTemplates {
|
|
|
306
306
|
testId: `calendar-month-${MONTHS[i]}`,
|
|
307
307
|
}));
|
|
308
308
|
return months;
|
|
309
|
-
}, ...(ngDevMode ? [{ debugName: "monthOptions" }] : []));
|
|
309
|
+
}, ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
|
|
310
310
|
valueStr = computed(() => {
|
|
311
311
|
const value = this.value();
|
|
312
312
|
if (!value) {
|
|
@@ -316,7 +316,7 @@ class NgnCalendar extends CalendarTemplates {
|
|
|
316
316
|
return `${String(value.getFullYear()).padStart(4, '0')}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}${this.showTime()
|
|
317
317
|
? `T${String(value.getHours()).padStart(2, '0')}:${String(value.getMinutes()).padStart(2, '0')}${this.showSeconds() ? `:${String(value.getSeconds()).padStart(2, '0')}` : ''}`
|
|
318
318
|
: ''}`;
|
|
319
|
-
}, ...(ngDevMode ? [{ debugName: "valueStr" }] : []));
|
|
319
|
+
}, ...(ngDevMode ? [{ debugName: "valueStr" }] : /* istanbul ignore next */ []));
|
|
320
320
|
previousMonth = () => {
|
|
321
321
|
const currentMonth = this.month();
|
|
322
322
|
const currentYear = this.year();
|
|
@@ -440,11 +440,11 @@ class NgnCalendar extends CalendarTemplates {
|
|
|
440
440
|
this.touched.set(true);
|
|
441
441
|
});
|
|
442
442
|
}
|
|
443
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
443
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnCalendar, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NgnCalendar, isStandalone: true, selector: "ngn-calendar", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnCalendar)], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (inline()) {\r\n <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\r\n} @else {\r\n <ngn-input-field\r\n #field\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'input-field'\"\r\n (click)=\"show()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [label]=\"label()\"\r\n [inputId]=\"inputId()\"\r\n [invalid]=\"invalid()\"\r\n [labelledBy]=\"labelledBy()\"\r\n (focusout)=\"potentiallyBlurred()\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <input\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'input'\"\r\n ngnInput\r\n #input\r\n (valueChange)=\"stringValueChange($event)\"\r\n [type]=\"showTime() ? 'datetime-local' : 'date'\"\r\n [value]=\"valueStr()\"\r\n [disabled]=\"disabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n <ngn-icon defaultIcon=\"calendar\" />\r\n </ngn-input-field>\r\n <ngn-popover\r\n #popover\r\n [anchor]=\"field.element.nativeElement\"\r\n [id]=\"inputId() + '_popover'\"\r\n (closing)=\"potentiallyBlurred()\"\r\n >\r\n <ng-template #lazy>\r\n <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\r\n </ng-template>\r\n </ngn-popover>\r\n}\r\n\r\n<ng-template #calendar>\r\n <div\r\n [ptInt]=\"this\"\r\n [ptClass]=\"{\r\n root: true,\r\n inline: inline(),\r\n }\"\r\n >\r\n <ngn-calendar-days\r\n [component]=\"this\"\r\n [theme]=\"theme\"\r\n [year]=\"year()\"\r\n [month]=\"month()\"\r\n [currentValue]=\"value()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n (previousMonth)=\"previousMonth()\"\r\n (nextMonth)=\"nextMonth()\"\r\n (daySelected)=\"selectDay($event)\"\r\n (monthSelected)=\"selectMonth($event)\"\r\n (yearSelected)=\"selectYear($event)\"\r\n (timeChanged)=\"changeTime($event)\"\r\n [dayTemplate]=\"dayTemplate()\"\r\n [weekDayTemplate]=\"weekDayTemplate()\"\r\n [timeTemplate]=\"timeTemplate()\"\r\n [yearTemplate]=\"yearTemplate()\"\r\n [monthTemplate]=\"monthTemplate()\"\r\n [showTime]=\"showTime()\"\r\n [showSeconds]=\"showSeconds()\"\r\n (focusout)=\"potentiallyBlurred()\"\r\n />\r\n </div>\r\n</ng-template>\r\n<ng-template #defaultDayTemplate [ngnTemplate]=\"templateTypes.day\" let-day>\r\n {{ day.date }}\r\n</ng-template>\r\n\r\n<ng-template #defaultWeekDayTemplate [ngnTemplate]=\"templateTypes.weekDay\" let-weekDay>\r\n <span>\r\n {{ weekDay.translation }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultTimeTemplate [ngnTemplate]=\"templateTypes.time\" let-time>\r\n @defer {\r\n <div [ptInt]=\"this\" [ptClass]=\"'time'\">\r\n <ngn-calendar-time\r\n [component]=\"this\"\r\n [currentValue]=\"time.time\"\r\n [showSeconds]=\"time.showSeconds\"\r\n (timeChange)=\"time.change($event)\"\r\n />\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultYearTemplate [ngnTemplate]=\"templateTypes.year\" let-y>\r\n @defer {\r\n <ngn-select\r\n [editable]=\"true\"\r\n [value]=\"year() + ''\"\r\n (valueChange)=\"y.change(+($event || 0))\"\r\n [options]=\"yearOptions\"\r\n [virtual]=\"true\"\r\n [itemHeight]=\"40\"\r\n [popoverOptions]=\"{ sizeConstraints: { maxHeight: '300px' } }\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'current-year'\"\r\n [scrollToSelectedItemOnOpen]=\"'center'\"\r\n [editableAutoFilter]=\"false\"\r\n [tabindex]=\"-1\"\r\n >\r\n <input ngnInput type=\"number\" [attr.aria-label]=\"i18n['calendar_selectYear']()\" />\r\n </ngn-select>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultMonthTemplate [ngnTemplate]=\"templateTypes.month\" let-m>\r\n @defer {\r\n <ngn-select\r\n [value]=\"m.month\"\r\n (valueChange)=\"m.change($event!)\"\r\n [options]=\"monthOptions()\"\r\n [popoverOptions]=\"{\r\n sizeConstraints: { maxHeight: '300px', width: '130px', maxWidth: '130px' },\r\n }\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'current-month'\"\r\n [scrollToSelectedItemOnOpen]=\"'center'\"\r\n [tabindex]=\"-1\"\r\n />\r\n }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnInput, selector: "input[ngnInput], textarea[ngnInput]", inputs: ["invalid", "value"], outputs: ["valueChange"], exportAs: ["ngnInput"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "component", type: CalendarDays, selector: "ngn-calendar-days", inputs: ["component", "theme", "year", "month", "currentValue", "firstDayOfWeek", "dayTemplate", "weekDayTemplate", "timeTemplate", "yearTemplate", "monthTemplate", "showTime", "showSeconds"], outputs: ["previousMonth", "nextMonth", "daySelected", "yearSelected", "monthSelected", "timeChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgnPt, import('./ngneers-controls-calendar-time-Bzlv9Vkn.mjs').then(m => m.CalendarTime)], () => [NgnPt,
|
|
445
445
|
NgnInput, import('@ngneers/controls/select').then(m => m.NgnSelect)], () => [NgnPt, import('@ngneers/controls/select').then(m => m.NgnSelect)]] });
|
|
446
446
|
}
|
|
447
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.
|
|
447
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.2", ngImport: i0, type: NgnCalendar, resolveDeferredDeps: () => [import('./ngneers-controls-calendar-time-Bzlv9Vkn.mjs').then(m => m.CalendarTime), import('@ngneers/controls/select').then(m => m.NgnSelect)], resolveMetadata: (CalendarTime, NgnSelect) => ({ decorators: [{
|
|
448
448
|
type: Component,
|
|
449
449
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-calendar', imports: [
|
|
450
450
|
NgTemplateOutlet,
|