tecnualng 21.1.2 → 21.1.4

package/fesm2022/tecnualng.mjs

@@ -382,6 +382,8 @@ class TecnualDatepickerComponent {
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     id = input(`tng-datepicker-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    locale = input((typeof navigator !== 'undefined' ? navigator.language : 'en-US'), ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : [])); // 0 = Sunday, 1 = Monday, etc.
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     currentViewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentViewDate" }] : [])); // The month we are looking at
     viewMode = signal('day', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -393,29 +395,79 @@ class TecnualDatepickerComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
+    getEffectiveFirstDayOfWeek() {
+        const definedDay = this.firstDayOfWeek();
+        if (definedDay !== null)
+            return definedDay;
+        // Try to determine from locale
+        try {
+            // @ts-ignore: weekInfo is a newer API, might need a shim or ignore
+            const weekInfo = new Intl.Locale(this.locale()).weekInfo;
+            if (weekInfo && typeof weekInfo.firstDay === 'number') {
+                return weekInfo.firstDay;
+            }
+        }
+        catch (e) {
+            // Fallback
+        }
+        // Default fallback: US=0 (Sun), others usually 1 (Mon). Simplified logic:
+        const l = this.locale().toLowerCase();
+        if (l.includes('us') || l.includes('en-ca') || l.includes('zh'))
+            return 0;
+        return 1;
+    }
     // Calendar Logic
-    daysOfWeek = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-    monthNames = [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
+    daysOfWeek = computed(() => {
+        const firstDay = this.getEffectiveFirstDayOfWeek();
+        const days = [];
+        // Create a date that is definitely a valid day index to start iterating.
+        // 2024-01-07 is a Sunday. 
+        // We want to generate names: Sun, Mon, etc.
+        // Let's iterate 7 days starting from a known Sunday + offset
+        const baseDate = new Date(2024, 0, 7); // Jan 7, 2024 is Sunday
+        const formatter = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+        for (let i = 0; i < 7; i++) {
+            const d = new Date(baseDate);
+            d.setDate(baseDate.getDate() + (firstDay + i));
+            // Remove dot usually found in some locales (e.g. es-ES "lun.") if desired or keep it.
+            // Let's keep it clean
+            days.push(formatter.format(d).replace('.', ''));
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
+    monthNames = computed(() => {
+        const formatter = new Intl.DateTimeFormat(this.locale(), { month: 'long' });
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            const d = new Date(2024, i, 1);
+            months.push(formatter.format(d));
+        }
+        return months;
+    }, ...(ngDevMode ? [{ debugName: "monthNames" }] : []));
     calendarDays = computed(() => {
         const year = this.currentViewDate().getFullYear();
         const month = this.currentViewDate().getMonth();
+        const firstDayIndex = this.getEffectiveFirstDayOfWeek();
         const firstDayOfMonth = new Date(year, month, 1);
         const lastDayOfMonth = new Date(year, month + 1, 0);
         const days = [];
         // Padding days from previous month
-        const startDay = firstDayOfMonth.getDay();
-        for (let i = startDay - 1; i >= 0; i--) {
+        // Calculate how many days to fallback:
+        // current day of week (0-6) - firstDayIndex
+        // if result < 0, add 7
+        let startDayOfWeek = firstDayOfMonth.getDay();
+        let daysToBacktrack = startDayOfWeek - firstDayIndex;
+        if (daysToBacktrack < 0)
+            daysToBacktrack += 7;
+        for (let i = daysToBacktrack - 1; i >= 0; i--) {
             days.push(new Date(year, month, -i));
         }
         // Days of current month
         for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
             days.push(new Date(year, month, i));
         }
-        // Padding days for next month (to fill 6 rows usually, or just enough to finish week)
-        const remaining = 42 - days.length; // 6 rows * 7 days
+        // Padding days for next month to fill complete rows (usually 6 rows total 42 days)
+        const remaining = 42 - days.length;
         for (let i = 1; i <= remaining; i++) {
             days.push(new Date(year, month + 1, i));
         }
@@ -448,7 +500,7 @@ class TecnualDatepickerComponent {
     get headerLabel() {
         const d = this.currentViewDate();
         if (this.viewMode() === 'day') {
-            return d.toLocaleString('default', { month: 'long', year: 'numeric' });
+            return d.toLocaleString(this.locale(), { month: 'long', year: 'numeric' });
         }
         else if (this.viewMode() === 'month') {
             return d.getFullYear().toString();
@@ -616,13 +668,13 @@ class TecnualDatepickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualDatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TecnualDatepickerComponent, isStandalone: true, selector: "tng-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TecnualDatepickerComponent, isStandalone: true, selector: "tng-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TecnualDatepickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <i class=\"fa-solid fa-calendar tng-icon\"></i>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n          <i class=\"fa-solid fa-chevron-left\"></i>\n        </button>\n        <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n          {{ headerLabel }}\n        </button>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </button>\n      </div>\n\n      @switch (viewMode()) {\n        @case ('day') {\n          <div class=\"tng-calendar-grid\">\n            @for (day of daysOfWeek; track day) {\n              <div class=\"day-name\">{{ day }}</div>\n            }\n            @for (date of calendarDays(); track date.getTime()) {\n              <div\n                class=\"day-cell\"\n                [class.not-current-month]=\"!isCurrentMonth(date)\"\n                [class.today]=\"isToday(date)\"\n                [class.selected]=\"isSelected(date)\"\n                [class.in-range]=\"isInRange(date)\"\n                [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n                [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n                [class.disabled]=\"isDisabled(date)\"\n                (click)=\"selectDate(date)\"\n              >\n                {{ date.getDate() }}\n              </div>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div class=\"tng-month-grid\">\n            @for (month of monthNames; track $index) {\n              <div \n                class=\"month-cell\"\n                [class.current]=\"currentViewDate().getMonth() === $index\"\n                (click)=\"selectMonth($index)\"\n              >\n                {{ month.substring(0, 3) }}\n              </div>\n            }\n          </div>\n        }\n        @case ('year') {\n          <div class=\"tng-year-grid\">\n            @for (year of yearsList(); track year) {\n              <div \n                class=\"year-cell\"\n                [class.current]=\"currentViewDate().getFullYear() === year\"\n                (click)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center;z-index:1;padding-bottom:5px}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 85%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <i class=\"fa-solid fa-calendar tng-icon\"></i>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n          <i class=\"fa-solid fa-chevron-left\"></i>\n        </button>\n        <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n          {{ headerLabel }}\n        </button>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </button>\n      </div>\n\n      @switch (viewMode()) {\n        @case ('day') {\n          <div class=\"tng-calendar-grid\">\n            @for (day of daysOfWeek(); track day) {\n              <div class=\"day-name\">{{ day }}</div>\n            }\n            @for (date of calendarDays(); track date.getTime()) {\n              <div\n                class=\"day-cell\"\n                [class.not-current-month]=\"!isCurrentMonth(date)\"\n                [class.today]=\"isToday(date)\"\n                [class.selected]=\"isSelected(date)\"\n                [class.in-range]=\"isInRange(date)\"\n                [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n                [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n                [class.disabled]=\"isDisabled(date)\"\n                (click)=\"selectDate(date)\"\n              >\n                {{ date.getDate() }}\n              </div>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div class=\"tng-month-grid\">\n            @for (month of monthNames(); track $index) {\n              <div \n                class=\"month-cell\"\n                [class.current]=\"currentViewDate().getMonth() === $index\"\n                (click)=\"selectMonth($index)\"\n              >\n                {{ month.substring(0, 3) }}\n              </div>\n            }\n          </div>\n        }\n        @case ('year') {\n          <div class=\"tng-year-grid\">\n            @for (year of yearsList(); track year) {\n              <div \n                class=\"year-cell\"\n                [class.current]=\"currentViewDate().getFullYear() === year\"\n                (click)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center;z-index:1;padding-bottom:5px}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 85%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualDatepickerComponent, decorators: [{
             type: Component,
@@ -632,8 +684,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             useExisting: forwardRef(() => TecnualDatepickerComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <i class=\"fa-solid fa-calendar tng-icon\"></i>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n          <i class=\"fa-solid fa-chevron-left\"></i>\n        </button>\n        <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n          {{ headerLabel }}\n        </button>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </button>\n      </div>\n\n      @switch (viewMode()) {\n        @case ('day') {\n          <div class=\"tng-calendar-grid\">\n            @for (day of daysOfWeek; track day) {\n              <div class=\"day-name\">{{ day }}</div>\n            }\n            @for (date of calendarDays(); track date.getTime()) {\n              <div\n                class=\"day-cell\"\n                [class.not-current-month]=\"!isCurrentMonth(date)\"\n                [class.today]=\"isToday(date)\"\n                [class.selected]=\"isSelected(date)\"\n                [class.in-range]=\"isInRange(date)\"\n                [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n                [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n                [class.disabled]=\"isDisabled(date)\"\n                (click)=\"selectDate(date)\"\n              >\n                {{ date.getDate() }}\n              </div>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div class=\"tng-month-grid\">\n            @for (month of monthNames; track $index) {\n              <div \n                class=\"month-cell\"\n                [class.current]=\"currentViewDate().getMonth() === $index\"\n                (click)=\"selectMonth($index)\"\n              >\n                {{ month.substring(0, 3) }}\n              </div>\n            }\n          </div>\n        }\n        @case ('year') {\n          <div class=\"tng-year-grid\">\n            @for (year of yearsList(); track year) {\n              <div \n                class=\"year-cell\"\n                [class.current]=\"currentViewDate().getFullYear() === year\"\n                (click)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center;z-index:1;padding-bottom:5px}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 85%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onClickOutside: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-datepicker-container\" [class.focused]=\"isOpen()\" [class.has-value]=\"formattedValue\" [class.disabled]=\"disabled()\">\n  <!-- Trigger Field (Reusing Input Style) -->\n  <div class=\"tng-input-trigger\" (click)=\"toggleCalendar()\">\n    <fieldset class=\"tng-fieldset\" aria-hidden=\"true\">\n      <legend class=\"tng-legend\"><span>{{ label() }}</span></legend>\n    </fieldset>\n    <label class=\"tng-label\">{{ label() }}</label>\n    <div class=\"tng-input-display\">\n      {{ formattedValue || (isOpen() ? placeholder() : '') }}\n    </div>\n    <i class=\"fa-solid fa-calendar tng-icon\"></i>\n  </div>\n\n  <!-- Calendar Popup -->\n  @if (isOpen()) {\n    <div class=\"tng-calendar-popup\">\n      <div class=\"tng-calendar-header\">\n        <button type=\"button\" class=\"nav-btn\" (click)=\"prev($event)\">\n          <i class=\"fa-solid fa-chevron-left\"></i>\n        </button>\n        <button type=\"button\" class=\"header-label-btn\" (click)=\"onHeaderClick()\">\n          {{ headerLabel }}\n        </button>\n        <button type=\"button\" class=\"nav-btn\" (click)=\"next($event)\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </button>\n      </div>\n\n      @switch (viewMode()) {\n        @case ('day') {\n          <div class=\"tng-calendar-grid\">\n            @for (day of daysOfWeek(); track day) {\n              <div class=\"day-name\">{{ day }}</div>\n            }\n            @for (date of calendarDays(); track date.getTime()) {\n              <div\n                class=\"day-cell\"\n                [class.not-current-month]=\"!isCurrentMonth(date)\"\n                [class.today]=\"isToday(date)\"\n                [class.selected]=\"isSelected(date)\"\n                [class.in-range]=\"isInRange(date)\"\n                [class.range-start]=\"mode() === 'range' && isSameDay(date, rangeValue.start)\"\n                [class.range-end]=\"mode() === 'range' && isSameDay(date, rangeValue.end)\"\n                [class.disabled]=\"isDisabled(date)\"\n                (click)=\"selectDate(date)\"\n              >\n                {{ date.getDate() }}\n              </div>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div class=\"tng-month-grid\">\n            @for (month of monthNames(); track $index) {\n              <div \n                class=\"month-cell\"\n                [class.current]=\"currentViewDate().getMonth() === $index\"\n                (click)=\"selectMonth($index)\"\n              >\n                {{ month.substring(0, 3) }}\n              </div>\n            }\n          </div>\n        }\n        @case ('year') {\n          <div class=\"tng-year-grid\">\n            @for (year of yearsList(); track year) {\n              <div \n                class=\"year-cell\"\n                [class.current]=\"currentViewDate().getFullYear() === year\"\n                (click)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif);position:relative}.tng-datepicker-container{position:relative}.tng-datepicker-container.disabled{opacity:.6;pointer-events:none}.tng-datepicker-container.disabled .tng-fieldset{border-color:var(--tng-border, #e0e0e0);background-color:var(--tng-background, #fafafa)}.tng-input-trigger{position:relative;padding:0 16px;height:48px;display:flex;align-items:center;cursor:pointer}.tng-input-trigger:hover .tng-fieldset{border-color:var(--tng-text-secondary, #757575)}.tng-fieldset{position:absolute;inset:0 0 5px;margin:0;padding:0 12px;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:border-color .2s ease,border-width .1s ease;z-index:0}.tng-legend{width:auto;max-width:0;height:11px;font-size:.75em;visibility:hidden;white-space:nowrap;padding-inline:0px;transition:max-width .1s cubic-bezier(.4,0,.2,1)}.tng-legend span{padding:0 2px;visibility:visible;opacity:0}.tng-label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--tng-text-secondary, #666);font-size:16px;font-weight:400;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s ease;z-index:1}.tng-input-display{flex:1;font-size:16px;color:var(--tng-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center;z-index:1;padding-bottom:5px}.tng-icon{color:var(--tng-text-secondary, #666);font-size:16px;margin-left:8px;z-index:1;padding-bottom:5px}.tng-datepicker-container.focused .tng-fieldset,.tng-datepicker-container.has-value .tng-fieldset{border-color:var(--tng-primary, #6200ee);border-width:2px}.tng-datepicker-container.focused .tng-label,.tng-datepicker-container.has-value .tng-label{transform:translateY(-24px) scale(.75)}.tng-datepicker-container.focused .tng-legend,.tng-datepicker-container.has-value .tng-legend{max-width:100%}.tng-datepicker-container.focused .tng-label{color:var(--tng-primary, #6200ee)}.tng-calendar-popup{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--tng-surface, #fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 20px rgba(0, 0, 0, .15));padding:16px;width:320px;animation:fadeIn .2s ease;border:1px solid var(--tng-border, #eee);color:var(--tng-text, #333)}@media(max-width:768px){.tng-calendar-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:350px;margin-top:0;box-shadow:0 10px 40px #0000004d,0 0 0 100vmax #0006;z-index:10000;animation:fadeInMobile .3s cubic-bezier(.16,1,.3,1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInMobile{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tng-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tng-calendar-header .header-label-btn{background:none;border:none;font-weight:600;font-size:16px;color:var(--tng-text, #333);text-transform:capitalize;cursor:pointer;padding:4px 8px;border-radius:var(--tng-border-radius, 4px);transition:background-color .2s ease}.tng-calendar-header .header-label-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tng-text-secondary, #666);transition:background-color .2s ease}.tng-calendar-header .nav-btn:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.tng-calendar-header .nav-btn i{font-size:14px}.tng-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.day-name{font-size:12px;color:var(--tng-text-secondary, #666);font-weight:500;margin-bottom:8px}.day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:50%;transition:all .2s ease;position:relative;color:var(--tng-text, #333)}.day-cell:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end){background-color:var(--tng-background, #f5f5f5)}.day-cell.not-current-month{color:var(--tng-text-secondary, #ccc);opacity:.5}.day-cell.today{font-weight:600;color:var(--tng-primary, #6200ee)}.day-cell.selected,.day-cell.range-start,.day-cell.range-end{background-color:var(--tng-primary, #6200ee);color:var(--tng-primary-contrast, #fff)}.day-cell.selected.today,.day-cell.range-start.today,.day-cell.range-end.today{border-color:transparent}.day-cell.in-range{background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));border-radius:0;color:var(--tng-primary, #6200ee)}.day-cell.in-range.range-start{border-top-right-radius:0;border-bottom-right-radius:0}.day-cell.in-range.range-end{border-top-left-radius:0;border-bottom-left-radius:0}.day-cell.range-start{border-radius:50% 0 0 50%;position:relative}.day-cell.range-start:after{content:\"\";position:absolute;inset:0 0 0 50%;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),var(--tng-surface));z-index:-1}.day-cell.range-end{border-radius:0 50% 50% 0;position:relative}.day-cell.range-end:after{content:\"\";position:absolute;inset:0 50% 0 0;background-color:color-mix(in srgb,var(--tng-primary, #6200ee),white 85%);z-index:-1}.day-cell.selected{border-radius:50%}.day-cell.disabled{opacity:.3;pointer-events:none;cursor:not-allowed}.tng-month-grid,.tng-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.month-cell,.year-cell{height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border-radius:var(--tng-border-radius, 4px);transition:all .2s ease;color:var(--tng-text, #333)}.month-cell:hover,.year-cell:hover{background-color:var(--tng-background, #f5f5f5);color:var(--tng-primary, #6200ee)}.month-cell.current,.year-cell.current{font-weight:600;color:var(--tng-primary, #6200ee);border:1px solid var(--tng-primary, #6200ee)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });