@ngstarter-ui/components 21.0.9 → 21.0.11
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/ai/component-registry.json +120 -2
- package/fesm2022/ngstarter-ui-components-calendar.mjs +238 -0
- package/fesm2022/ngstarter-ui-components-calendar.mjs.map +1 -0
- package/fesm2022/ngstarter-ui-components-datepicker.mjs +45 -17
- package/fesm2022/ngstarter-ui-components-datepicker.mjs.map +1 -1
- package/package.json +5 -1
- package/types/ngstarter-ui-components-calendar.d.ts +75 -0
- package/types/ngstarter-ui-components-datepicker.d.ts +14 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, LOCALE_ID, Injectable, input, output, signal, computed, ChangeDetectionStrategy, Component, effect, ViewContainerRef, viewChild, contentChild, ViewEncapsulation, forwardRef, Directive, ElementRef, untracked } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, LOCALE_ID, Injectable, input, output, signal, computed, ChangeDetectionStrategy, Component, numberAttribute, effect, ViewContainerRef, viewChild, contentChild, ViewEncapsulation, forwardRef, Directive, booleanAttribute, ElementRef, untracked } from '@angular/core';
|
|
3
3
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
4
4
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
5
5
|
import { Subject } from 'rxjs';
|
|
@@ -87,14 +87,20 @@ class MonthView {
|
|
|
87
87
|
selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
88
88
|
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
89
89
|
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
90
|
+
rangePreviewDate = input(null, ...(ngDevMode ? [{ debugName: "rangePreviewDate" }] : /* istanbul ignore next */ []));
|
|
91
|
+
sharedRangePreview = input(false, ...(ngDevMode ? [{ debugName: "sharedRangePreview" }] : /* istanbul ignore next */ []));
|
|
90
92
|
selectedChange = output();
|
|
91
|
-
|
|
93
|
+
rangePreviewDateChange = output();
|
|
94
|
+
_hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "_hoveredDate" }] : /* istanbul ignore next */ []));
|
|
95
|
+
hoveredDate = this._hoveredDate;
|
|
92
96
|
weekdays = computed(() => {
|
|
93
97
|
return this._dateAdapter.getDayOfWeekNames('short');
|
|
94
98
|
}, ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
|
|
95
99
|
weeks = computed(() => {
|
|
96
100
|
const activeDate = this.activeDate();
|
|
97
|
-
const hoveredDate = this.
|
|
101
|
+
const hoveredDate = this.sharedRangePreview()
|
|
102
|
+
? this.rangePreviewDate()
|
|
103
|
+
: this._hoveredDate();
|
|
98
104
|
const firstDayOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), this._dateAdapter.getMonth(activeDate), 1);
|
|
99
105
|
const daysInMonth = this._dateAdapter.getNumDaysInMonth(activeDate);
|
|
100
106
|
const firstDayOfWeek = this._dateAdapter.getDayOfWeek(firstDayOfMonth);
|
|
@@ -172,18 +178,19 @@ class MonthView {
|
|
|
172
178
|
}
|
|
173
179
|
}
|
|
174
180
|
handleHover(date) {
|
|
175
|
-
this.
|
|
181
|
+
this._hoveredDate.set(date);
|
|
182
|
+
this.rangePreviewDateChange.emit(date);
|
|
176
183
|
}
|
|
177
184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonthView, isStandalone: true, selector: "ngs-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mouseleave": "handleHover(null)" }, classAttribute: "ngs-month-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n <thead class=\"ngs-calendar-table-header\">\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\">{{ day }}</th>\n }\n </tr>\n </thead>\n <tbody class=\"ngs-calendar-table-body\">\n @for (week of weeks(); track $index) {\n @if (week[0].date || week[6].date) {\n <tr>\n @for (day of week; track $index) {\n <td\n class=\"ngs-calendar-cell\"\n [class.ngs-calendar-cell-selected]=\"day.selected\"\n [class.ngs-calendar-cell-today]=\"day.current\"\n [class.ngs-calendar-cell-empty]=\"!day.date\"\n [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"handleHover(day.date)\"\n >\n <div class=\"ngs-calendar-cell-content\">\n {{ day.label }}\n </div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonthView, isStandalone: true, selector: "ngs-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, rangePreviewDate: { classPropertyName: "rangePreviewDate", publicName: "rangePreviewDate", isSignal: true, isRequired: false, transformFunction: null }, sharedRangePreview: { classPropertyName: "sharedRangePreview", publicName: "sharedRangePreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", rangePreviewDateChange: "rangePreviewDateChange" }, host: { listeners: { "mouseleave": "handleHover(null)" }, classAttribute: "ngs-month-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n <thead class=\"ngs-calendar-table-header\">\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\">{{ day }}</th>\n }\n </tr>\n </thead>\n <tbody class=\"ngs-calendar-table-body\">\n @for (week of weeks(); track $index) {\n @if (week[0].date || week[6].date) {\n <tr>\n @for (day of week; track $index) {\n <td\n class=\"ngs-calendar-cell\"\n [class.ngs-calendar-cell-selected]=\"day.selected\"\n [class.ngs-calendar-cell-today]=\"day.current\"\n [class.ngs-calendar-cell-empty]=\"!day.date\"\n [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"handleHover(day.date)\"\n >\n <div class=\"ngs-calendar-cell-content\">\n {{ day.label }}\n </div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-weight:600;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
179
186
|
}
|
|
180
187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonthView, decorators: [{
|
|
181
188
|
type: Component,
|
|
182
189
|
args: [{ selector: 'ngs-month-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
183
190
|
'class': 'ngs-month-view',
|
|
184
191
|
'(mouseleave)': 'handleHover(null)'
|
|
185
|
-
}, template: "<table class=\"ngs-calendar-table\">\n <thead class=\"ngs-calendar-table-header\">\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\">{{ day }}</th>\n }\n </tr>\n </thead>\n <tbody class=\"ngs-calendar-table-body\">\n @for (week of weeks(); track $index) {\n @if (week[0].date || week[6].date) {\n <tr>\n @for (day of week; track $index) {\n <td\n class=\"ngs-calendar-cell\"\n [class.ngs-calendar-cell-selected]=\"day.selected\"\n [class.ngs-calendar-cell-today]=\"day.current\"\n [class.ngs-calendar-cell-empty]=\"!day.date\"\n [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"handleHover(day.date)\"\n >\n <div class=\"ngs-calendar-cell-content\">\n {{ day.label }}\n </div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
186
|
-
}], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
|
|
192
|
+
}, template: "<table class=\"ngs-calendar-table\">\n <thead class=\"ngs-calendar-table-header\">\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\">{{ day }}</th>\n }\n </tr>\n </thead>\n <tbody class=\"ngs-calendar-table-body\">\n @for (week of weeks(); track $index) {\n @if (week[0].date || week[6].date) {\n <tr>\n @for (day of week; track $index) {\n <td\n class=\"ngs-calendar-cell\"\n [class.ngs-calendar-cell-selected]=\"day.selected\"\n [class.ngs-calendar-cell-today]=\"day.current\"\n [class.ngs-calendar-cell-empty]=\"!day.date\"\n [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"handleHover(day.date)\"\n >\n <div class=\"ngs-calendar-cell-content\">\n {{ day.label }}\n </div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-weight:600;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
193
|
+
}], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], rangePreviewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreviewDate", required: false }] }], sharedRangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharedRangePreview", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], rangePreviewDateChange: [{ type: i0.Output, args: ["rangePreviewDateChange"] }] } });
|
|
187
194
|
|
|
188
195
|
class YearView {
|
|
189
196
|
_dateAdapter = inject(DateAdapter);
|
|
@@ -283,10 +290,12 @@ class Calendar {
|
|
|
283
290
|
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
284
291
|
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
285
292
|
headerComponent = input(null, ...(ngDevMode ? [{ debugName: "headerComponent" }] : /* istanbul ignore next */ []));
|
|
293
|
+
visibleCalendars = input(1, { ...(ngDevMode ? { debugName: "visibleCalendars" } : /* istanbul ignore next */ {}), transform: value => numberAttribute(value, 1) === 2 ? 2 : 1 });
|
|
286
294
|
selectedChange = output();
|
|
287
295
|
yearSelected = output();
|
|
288
296
|
monthSelected = output();
|
|
289
297
|
activeDate = signal(this.startAt() || this._dateAdapter.today(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
|
|
298
|
+
_rangePreviewDate = signal(null, ...(ngDevMode ? [{ debugName: "_rangePreviewDate" }] : /* istanbul ignore next */ []));
|
|
290
299
|
constructor() {
|
|
291
300
|
effect(() => {
|
|
292
301
|
const selected = this.selected();
|
|
@@ -316,10 +325,17 @@ class Calendar {
|
|
|
316
325
|
}, ...(ngDevMode ? [{ debugName: "_selectedDate" }] : /* istanbul ignore next */ []));
|
|
317
326
|
periodButtonText = computed(() => {
|
|
318
327
|
const activeDate = this.activeDate();
|
|
328
|
+
const visibleCalendars = this.visibleCalendars();
|
|
319
329
|
if (!activeDate || !this._dateAdapter.isValid(activeDate)) {
|
|
320
330
|
return '';
|
|
321
331
|
}
|
|
322
332
|
if (this.currentView() === 'month') {
|
|
333
|
+
if (visibleCalendars === 2) {
|
|
334
|
+
const endDate = this._dateAdapter.addCalendarMonths(activeDate, 1);
|
|
335
|
+
const startLabel = this._dateAdapter.format(activeDate, { month: 'long', year: 'numeric' });
|
|
336
|
+
const endLabel = this._dateAdapter.format(endDate, { month: 'long', year: 'numeric' });
|
|
337
|
+
return `${startLabel} - ${endLabel}`;
|
|
338
|
+
}
|
|
323
339
|
return this._dateAdapter.format(activeDate, { month: 'long', year: 'numeric' });
|
|
324
340
|
}
|
|
325
341
|
if (this.currentView() === 'year') {
|
|
@@ -335,6 +351,11 @@ class Calendar {
|
|
|
335
351
|
}
|
|
336
352
|
return '';
|
|
337
353
|
}, ...(ngDevMode ? [{ debugName: "periodButtonText" }] : /* istanbul ignore next */ []));
|
|
354
|
+
_monthViewActiveDates = computed(() => {
|
|
355
|
+
const activeDate = this.activeDate();
|
|
356
|
+
const count = this.visibleCalendars();
|
|
357
|
+
return Array.from({ length: count }, (_, index) => this._dateAdapter.addCalendarMonths(activeDate, index));
|
|
358
|
+
}, ...(ngDevMode ? [{ debugName: "_monthViewActiveDates" }] : /* istanbul ignore next */ []));
|
|
338
359
|
prevPage() {
|
|
339
360
|
this.activeDate.update(date => {
|
|
340
361
|
if (this.currentView() === 'month') {
|
|
@@ -384,15 +405,19 @@ class Calendar {
|
|
|
384
405
|
this.currentView.set('year');
|
|
385
406
|
this.yearSelected.emit(date);
|
|
386
407
|
}
|
|
408
|
+
_trackMonth(index, date) {
|
|
409
|
+
return `${this._dateAdapter.getYear(date)}-${this._dateAdapter.getMonth(date)}-${index}`;
|
|
410
|
+
}
|
|
387
411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Calendar, isStandalone: true, selector: "ngs-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { classAttribute: "ngs-calendar" }, exportAs: ["ngsCalendar"], ngImport: i0, template: "@if (headerComponent()) {\n <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n <div class=\"ngs-calendar-header\">\n <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n {{ periodButtonText() }}\n </button>\n <div class=\"ngs-calendar-header-actions\">\n <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </div>\n}\n\n<div class=\"ngs-calendar-content\">\n @if (currentView() === 'month') {\n <ngs-month-view [activeDate]=\"
|
|
412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Calendar, isStandalone: true, selector: "ngs-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null }, visibleCalendars: { classPropertyName: "visibleCalendars", publicName: "visibleCalendars", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.ngs-calendar-multiple-months": "currentView() === \"month\" && visibleCalendars() === 2" }, classAttribute: "ngs-calendar" }, exportAs: ["ngsCalendar"], ngImport: i0, template: "@if (headerComponent()) {\n <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n <div class=\"ngs-calendar-header\">\n <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n {{ periodButtonText() }}\n </button>\n <div class=\"ngs-calendar-header-actions\">\n <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </div>\n}\n\n<div class=\"ngs-calendar-content\" [class.ngs-calendar-content-multiple]=\"currentView() === 'month' && visibleCalendars() === 2\">\n @if (currentView() === 'month') {\n @for (monthActiveDate of _monthViewActiveDates(); track _trackMonth($index, monthActiveDate)) {\n <ngs-month-view [activeDate]=\"monthActiveDate\"\n [selected]=\"selected()\"\n [rangePreviewDate]=\"_rangePreviewDate()\"\n [sharedRangePreview]=\"true\"\n (rangePreviewDateChange)=\"_rangePreviewDate.set($event)\"\n (selectedChange)=\"selectedChange.emit($event)\"\n />\n }\n } @else if (currentView() === 'year') {\n <ngs-year-view [activeDate]=\"activeDate()\"\n [selected]=\"_selectedDate()\"\n (monthSelected)=\"_monthSelectedInYearView($event)\"\n />\n } @else if (currentView() === 'multi-year') {\n <ngs-multi-year-view [activeDate]=\"activeDate()\"\n [selected]=\"_selectedDate()\"\n (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n />\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host.ngs-calendar-multiple-months{width:auto}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--ngs-color-primary)}:host .ngs-calendar-content-multiple{display:flex;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-content-multiple ngs-month-view{flex:0 0 calc(var(--ngs-calendar-cell-size) * 7)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MonthView, selector: "ngs-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "rangePreviewDate", "sharedRangePreview"], outputs: ["selectedChange", "rangePreviewDateChange"] }, { kind: "component", type: YearView, selector: "ngs-year-view", inputs: ["activeDate", "selected"], outputs: ["monthSelected"] }, { kind: "component", type: MultiYearView, selector: "ngs-multi-year-view", inputs: ["activeDate", "selected"], outputs: ["yearSelected"] }, { kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
389
413
|
}
|
|
390
414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, decorators: [{
|
|
391
415
|
type: Component,
|
|
392
416
|
args: [{ selector: 'ngs-calendar', standalone: true, imports: [MonthView, YearView, MultiYearView, Button, Icon, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'ngsCalendar', host: {
|
|
393
417
|
'class': 'ngs-calendar',
|
|
394
|
-
|
|
395
|
-
|
|
418
|
+
'[class.ngs-calendar-multiple-months]': 'currentView() === "month" && visibleCalendars() === 2',
|
|
419
|
+
}, template: "@if (headerComponent()) {\n <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n <div class=\"ngs-calendar-header\">\n <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n {{ periodButtonText() }}\n </button>\n <div class=\"ngs-calendar-header-actions\">\n <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </div>\n}\n\n<div class=\"ngs-calendar-content\" [class.ngs-calendar-content-multiple]=\"currentView() === 'month' && visibleCalendars() === 2\">\n @if (currentView() === 'month') {\n @for (monthActiveDate of _monthViewActiveDates(); track _trackMonth($index, monthActiveDate)) {\n <ngs-month-view [activeDate]=\"monthActiveDate\"\n [selected]=\"selected()\"\n [rangePreviewDate]=\"_rangePreviewDate()\"\n [sharedRangePreview]=\"true\"\n (rangePreviewDateChange)=\"_rangePreviewDate.set($event)\"\n (selectedChange)=\"selectedChange.emit($event)\"\n />\n }\n } @else if (currentView() === 'year') {\n <ngs-year-view [activeDate]=\"activeDate()\"\n [selected]=\"_selectedDate()\"\n (monthSelected)=\"_monthSelectedInYearView($event)\"\n />\n } @else if (currentView() === 'multi-year') {\n <ngs-multi-year-view [activeDate]=\"activeDate()\"\n [selected]=\"_selectedDate()\"\n (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n />\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host.ngs-calendar-multiple-months{width:auto}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--ngs-color-primary)}:host .ngs-calendar-content-multiple{display:flex;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-content-multiple ngs-month-view{flex:0 0 calc(var(--ngs-calendar-cell-size) * 7)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
420
|
+
}], ctorParameters: () => [], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], visibleCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleCalendars", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }] } });
|
|
396
421
|
|
|
397
422
|
class DatepickerActions {
|
|
398
423
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -488,14 +513,14 @@ class Datepicker {
|
|
|
488
513
|
this.close();
|
|
489
514
|
}
|
|
490
515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Datepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Datepicker, isStandalone: true, selector: "ngs-datepicker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDatepicker"], ngImport: i0, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && quickPresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of quickPresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar\n [startAt]=\"startAt()\"\n [selected]=\"_selected()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\"/>\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Datepicker, isStandalone: true, selector: "ngs-datepicker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDatepicker"], ngImport: i0, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && quickPresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of quickPresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar\n [startAt]=\"startAt()\"\n [selected]=\"_selected()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\"/>\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent", "visibleCalendars"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
492
517
|
}
|
|
493
518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Datepicker, decorators: [{
|
|
494
519
|
type: Component,
|
|
495
520
|
args: [{ selector: 'ngs-datepicker', exportAs: 'ngsDatepicker', standalone: true, imports: [
|
|
496
521
|
OverlayModule,
|
|
497
522
|
Calendar
|
|
498
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && quickPresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of quickPresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar\n [startAt]=\"startAt()\"\n [selected]=\"_selected()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\"/>\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
523
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && quickPresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of quickPresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar\n [startAt]=\"startAt()\"\n [selected]=\"_selected()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\"/>\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
499
524
|
}], propDecorators: { _portalTemplate: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerActions), { isSignal: true }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], quickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickPresets", required: false }] }], showQuickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickPresets", required: false }] }] } });
|
|
500
525
|
|
|
501
526
|
class DatepickerApply {
|
|
@@ -537,11 +562,14 @@ class DateRangePicker {
|
|
|
537
562
|
calendarHeaderComponent = input(null, ...(ngDevMode ? [{ debugName: "calendarHeaderComponent" }] : /* istanbul ignore next */ []));
|
|
538
563
|
quickPresets = input(null, ...(ngDevMode ? [{ debugName: "quickPresets" }] : /* istanbul ignore next */ []));
|
|
539
564
|
showQuickPresets = input(false, ...(ngDevMode ? [{ debugName: "showQuickPresets" }] : /* istanbul ignore next */ []));
|
|
565
|
+
calendarCount = input(1, { ...(ngDevMode ? { debugName: "calendarCount" } : /* istanbul ignore next */ {}), transform: value => numberAttribute(value, 1) === 2 ? 2 : 1 });
|
|
566
|
+
extended = input(false, { ...(ngDevMode ? { debugName: "extended" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
540
567
|
_portalTemplate = viewChild.required('portal');
|
|
541
568
|
actions = contentChild(DatepickerActions, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
542
569
|
_datepickerInput; // Will be DateRangeInput
|
|
543
570
|
_selectedRange = signal(new DateRange(null, null), ...(ngDevMode ? [{ debugName: "_selectedRange" }] : /* istanbul ignore next */ []));
|
|
544
571
|
_isAbove = signal(false, ...(ngDevMode ? [{ debugName: "_isAbove" }] : /* istanbul ignore next */ []));
|
|
572
|
+
_visibleCalendars = computed(() => this.extended() ? 2 : this.calendarCount(), ...(ngDevMode ? [{ debugName: "_visibleCalendars" }] : /* istanbul ignore next */ []));
|
|
545
573
|
_effectivePresets = computed(() => {
|
|
546
574
|
const userPresets = this.quickPresets();
|
|
547
575
|
if (userPresets) {
|
|
@@ -661,12 +689,12 @@ class DateRangePicker {
|
|
|
661
689
|
this.close();
|
|
662
690
|
}
|
|
663
691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
664
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateRangePicker, isStandalone: true, selector: "ngs-date-range-picker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDateRangePicker"], ngImport: i0, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && _effectivePresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of _effectivePresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar [startAt]=\"startAt()\"\n [selected]=\"_selectedRange()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\" />\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateRangePicker, isStandalone: true, selector: "ngs-date-range-picker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null }, calendarCount: { classPropertyName: "calendarCount", publicName: "calendarCount", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDateRangePicker"], ngImport: i0, template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && _effectivePresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of _effectivePresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar [startAt]=\"startAt()\"\n [selected]=\"_selectedRange()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n [visibleCalendars]=\"_visibleCalendars()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\" />\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent", "visibleCalendars"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
665
693
|
}
|
|
666
694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
667
695
|
type: Component,
|
|
668
|
-
args: [{ selector: 'ngs-date-range-picker', standalone: true, imports: [OverlayModule, Calendar], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngsDateRangePicker', template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && _effectivePresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of _effectivePresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar [startAt]=\"startAt()\"\n [selected]=\"_selectedRange()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\" />\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
669
|
-
}], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], quickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickPresets", required: false }] }], showQuickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickPresets", required: false }] }], _portalTemplate: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerActions), { isSignal: true }] }] } });
|
|
696
|
+
args: [{ selector: 'ngs-date-range-picker', standalone: true, imports: [OverlayModule, Calendar], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngsDateRangePicker', template: "<ng-template #portal>\n <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n <div class=\"ngs-datepicker-inner-container\">\n @if (showQuickPresets() && _effectivePresets().length > 0) {\n <div class=\"ngs-datepicker-presets\">\n @for (preset of _effectivePresets(); track preset.label) {\n <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ngs-calendar [startAt]=\"startAt()\"\n [selected]=\"_selectedRange()\"\n [headerComponent]=\"calendarHeaderComponent()\"\n [visibleCalendars]=\"_visibleCalendars()\"\n (selectedChange)=\"_select($event)\"\n />\n </div>\n\n @if (actions()) {\n <ng-content select=\"ngs-datepicker-actions\" />\n }\n </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
697
|
+
}], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], quickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickPresets", required: false }] }], showQuickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickPresets", required: false }] }], calendarCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarCount", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], _portalTemplate: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerActions), { isSignal: true }] }] } });
|
|
670
698
|
|
|
671
699
|
class DatepickerInput {
|
|
672
700
|
_elementRef = inject(ElementRef);
|
|
@@ -956,7 +984,7 @@ class DateRangeInput {
|
|
|
956
984
|
provide: FormFieldControl,
|
|
957
985
|
useExisting: forwardRef(() => DateRangeInput)
|
|
958
986
|
}
|
|
959
|
-
], queries: [{ propertyName: "_startInput", first: true, predicate: StartDate, descendants: true, isSignal: true }, { propertyName: "_endInput", first: true, predicate: EndDate, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-date-range-input-container\">\n <div class=\"ngs-date-range-input-start-wrapper\">\n <ng-content select=\"input[ngsStartDate]\"/>\n </div>\n <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n <div class=\"ngs-date-range-input-end-wrapper\">\n <ng-content select=\"input[ngsEndDate]\"/>\n </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
987
|
+
], queries: [{ propertyName: "_startInput", first: true, predicate: StartDate, descendants: true, isSignal: true }, { propertyName: "_endInput", first: true, predicate: EndDate, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-date-range-input-container\">\n <div class=\"ngs-date-range-input-start-wrapper\">\n <ng-content select=\"input[ngsStartDate]\"/>\n </div>\n <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n <div class=\"ngs-date-range-input-end-wrapper\">\n <ng-content select=\"input[ngsEndDate]\"/>\n </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
960
988
|
}
|
|
961
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangeInput, decorators: [{
|
|
962
990
|
type: Component,
|
|
@@ -970,7 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
970
998
|
provide: FormFieldControl,
|
|
971
999
|
useExisting: forwardRef(() => DateRangeInput)
|
|
972
1000
|
}
|
|
973
|
-
], template: "<div class=\"ngs-date-range-input-container\">\n <div class=\"ngs-date-range-input-start-wrapper\">\n <ng-content select=\"input[ngsStartDate]\"/>\n </div>\n <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n <div class=\"ngs-date-range-input-end-wrapper\">\n <ng-content select=\"input[ngsEndDate]\"/>\n </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:
|
|
1001
|
+
], template: "<div class=\"ngs-date-range-input-container\">\n <div class=\"ngs-date-range-input-start-wrapper\">\n <ng-content select=\"input[ngsStartDate]\"/>\n </div>\n <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n <div class=\"ngs-date-range-input-end-wrapper\">\n <ng-content select=\"input[ngsEndDate]\"/>\n </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
974
1002
|
}], ctorParameters: () => [], propDecorators: { rangePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePicker", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], _startInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StartDate), { isSignal: true }] }], _endInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EndDate), { isSignal: true }] }] } });
|
|
975
1003
|
let nextUniqueId = 0;
|
|
976
1004
|
|