tecnualng 21.1.4 → 21.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tecnualng.mjs +77 -9
- package/fesm2022/tecnualng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tecnualng.d.ts +4 -2
package/fesm2022/tecnualng.mjs
CHANGED
|
@@ -484,15 +484,16 @@ class TecnualDatepickerComponent {
|
|
|
484
484
|
return years;
|
|
485
485
|
}, ...(ngDevMode ? [{ debugName: "yearsList" }] : []));
|
|
486
486
|
get formattedValue() {
|
|
487
|
+
const locale = this.locale();
|
|
487
488
|
if (this.mode() === 'single') {
|
|
488
|
-
return this.singleValue ? this.singleValue.toLocaleDateString() : '';
|
|
489
|
+
return this.singleValue ? this.singleValue.toLocaleDateString(locale) : '';
|
|
489
490
|
}
|
|
490
491
|
else {
|
|
491
492
|
if (this.rangeValue.start && this.rangeValue.end) {
|
|
492
|
-
return `${this.rangeValue.start.toLocaleDateString()} - ${this.rangeValue.end.toLocaleDateString()}`;
|
|
493
|
+
return `${this.rangeValue.start.toLocaleDateString(locale)} - ${this.rangeValue.end.toLocaleDateString(locale)}`;
|
|
493
494
|
}
|
|
494
495
|
else if (this.rangeValue.start) {
|
|
495
|
-
return `${this.rangeValue.start.toLocaleDateString()} - ...`;
|
|
496
|
+
return `${this.rangeValue.start.toLocaleDateString(locale)} - ...`;
|
|
496
497
|
}
|
|
497
498
|
return '';
|
|
498
499
|
}
|
|
@@ -511,9 +512,17 @@ class TecnualDatepickerComponent {
|
|
|
511
512
|
return `${years[0]} - ${years[years.length - 1]}`;
|
|
512
513
|
}
|
|
513
514
|
}
|
|
514
|
-
toggleCalendar() {
|
|
515
|
+
toggleCalendar(event) {
|
|
515
516
|
if (this.disabled())
|
|
516
517
|
return;
|
|
518
|
+
// If clicking the input itself, ensure we don't close if already open
|
|
519
|
+
if (event && event.target.tagName === 'INPUT') {
|
|
520
|
+
if (!this.isOpen()) {
|
|
521
|
+
this.isOpen.set(true);
|
|
522
|
+
this.viewMode.set('day');
|
|
523
|
+
}
|
|
524
|
+
return;
|
|
525
|
+
}
|
|
517
526
|
if (!this.isOpen()) {
|
|
518
527
|
// Reset to day view when opening
|
|
519
528
|
this.viewMode.set('day');
|
|
@@ -568,19 +577,22 @@ class TecnualDatepickerComponent {
|
|
|
568
577
|
this.currentViewDate.set(new Date(year, d.getMonth(), 1));
|
|
569
578
|
this.viewMode.set('month');
|
|
570
579
|
}
|
|
571
|
-
selectDate(date) {
|
|
580
|
+
selectDate(date, closeCalendar = true) {
|
|
572
581
|
if (this.isDisabled(date))
|
|
573
582
|
return;
|
|
574
583
|
if (this.mode() === 'single') {
|
|
575
584
|
this.singleValue = date;
|
|
585
|
+
this.currentViewDate.set(new Date(date)); // Sync view
|
|
576
586
|
this.onChange(date);
|
|
577
|
-
|
|
587
|
+
if (closeCalendar)
|
|
588
|
+
this.isOpen.set(false);
|
|
578
589
|
}
|
|
579
590
|
else {
|
|
580
591
|
// Range logic
|
|
581
592
|
if (!this.rangeValue.start || (this.rangeValue.start && this.rangeValue.end)) {
|
|
582
593
|
// Start new range
|
|
583
594
|
this.rangeValue = { start: date, end: null };
|
|
595
|
+
this.currentViewDate.set(new Date(date)); // Sync view
|
|
584
596
|
}
|
|
585
597
|
else {
|
|
586
598
|
// Complete range
|
|
@@ -591,10 +603,66 @@ class TecnualDatepickerComponent {
|
|
|
591
603
|
this.rangeValue = { ...this.rangeValue, end: date };
|
|
592
604
|
}
|
|
593
605
|
this.onChange(this.rangeValue);
|
|
594
|
-
|
|
606
|
+
if (closeCalendar)
|
|
607
|
+
this.isOpen.set(false);
|
|
595
608
|
}
|
|
596
609
|
}
|
|
597
610
|
}
|
|
611
|
+
parseDate(value) {
|
|
612
|
+
if (!value)
|
|
613
|
+
return null;
|
|
614
|
+
const locale = this.locale();
|
|
615
|
+
// Use Intl to determine the order of parts
|
|
616
|
+
const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2000, 10, 25)); // Nov 25, 2000
|
|
617
|
+
// Parts will contain type: 'day', 'month', 'year', 'literal'
|
|
618
|
+
const formatOrder = [];
|
|
619
|
+
parts.forEach(p => {
|
|
620
|
+
if (p.type === 'day' || p.type === 'month' || p.type === 'year') {
|
|
621
|
+
formatOrder.push(p.type);
|
|
622
|
+
}
|
|
623
|
+
});
|
|
624
|
+
// Split input by non-digit characters
|
|
625
|
+
const dateParts = value.split(/\D+/).filter(part => part.trim() !== '').map(p => parseInt(p, 10));
|
|
626
|
+
if (dateParts.length !== 3) {
|
|
627
|
+
// Fallback to standard parse if structure doesn't match
|
|
628
|
+
const d = new Date(value);
|
|
629
|
+
return isNaN(d.getTime()) ? null : d;
|
|
630
|
+
}
|
|
631
|
+
let day;
|
|
632
|
+
let month;
|
|
633
|
+
let year;
|
|
634
|
+
// Map input parts to Day/Month/Year based on locale order
|
|
635
|
+
for (let i = 0; i < 3; i++) {
|
|
636
|
+
const type = formatOrder[i];
|
|
637
|
+
const val = dateParts[i];
|
|
638
|
+
if (type === 'day')
|
|
639
|
+
day = val;
|
|
640
|
+
if (type === 'month')
|
|
641
|
+
month = val - 1; // JS months are 0-indexed
|
|
642
|
+
if (type === 'year')
|
|
643
|
+
year = val;
|
|
644
|
+
}
|
|
645
|
+
if (day === undefined || month === undefined || year === undefined)
|
|
646
|
+
return null;
|
|
647
|
+
// Validate year length (handle 2-digit years if needed, but let's stick to 4 for now or simple logic)
|
|
648
|
+
if (year < 100)
|
|
649
|
+
year += 2000; // Very basic 2-digit handling
|
|
650
|
+
const d = new Date(year, month, day);
|
|
651
|
+
if (d.getFullYear() === year && d.getMonth() === month && d.getDate() === day) {
|
|
652
|
+
return d;
|
|
653
|
+
}
|
|
654
|
+
return null;
|
|
655
|
+
}
|
|
656
|
+
onManualInput(event) {
|
|
657
|
+
const value = event.target.value;
|
|
658
|
+
if (!value)
|
|
659
|
+
return;
|
|
660
|
+
// Try localized parse first
|
|
661
|
+
let date = this.parseDate(value);
|
|
662
|
+
if (date) {
|
|
663
|
+
this.selectDate(date, false);
|
|
664
|
+
}
|
|
665
|
+
}
|
|
598
666
|
// Helper checks
|
|
599
667
|
isSelected(date) {
|
|
600
668
|
if (this.mode() === 'single') {
|
|
@@ -674,7 +742,7 @@ class TecnualDatepickerComponent {
|
|
|
674
742
|
useExisting: forwardRef(() => TecnualDatepickerComponent),
|
|
675
743
|
multi: true
|
|
676
744
|
}
|
|
677
|
-
], 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 <
|
|
745
|
+
], 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($event)\">\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 <input\n type=\"text\"\n class=\"tng-input-display\"\n [value]=\"formattedValue || (isOpen() ? '' : '')\"\n [placeholder]=\"isOpen() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n (input)=\"onManualInput($event)\"\n (click)=\"toggleCalendar($event)\"\n />\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);height:100%;border:none;background:transparent;outline:none;padding:0 0 5px;margin:0;width:100%;font-family:inherit;pointer-events:auto;z-index:1}.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),var(--tng-surface));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 });
|
|
678
746
|
}
|
|
679
747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TecnualDatepickerComponent, decorators: [{
|
|
680
748
|
type: Component,
|
|
@@ -684,7 +752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
684
752
|
useExisting: forwardRef(() => TecnualDatepickerComponent),
|
|
685
753
|
multi: true
|
|
686
754
|
}
|
|
687
|
-
], 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 <
|
|
755
|
+
], 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($event)\">\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 <input\n type=\"text\"\n class=\"tng-input-display\"\n [value]=\"formattedValue || (isOpen() ? '' : '')\"\n [placeholder]=\"isOpen() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n (input)=\"onManualInput($event)\"\n (click)=\"toggleCalendar($event)\"\n />\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);height:100%;border:none;background:transparent;outline:none;padding:0 0 5px;margin:0;width:100%;font-family:inherit;pointer-events:auto;z-index:1}.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),var(--tng-surface));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"] }]
|
|
688
756
|
}], 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: [{
|
|
689
757
|
type: HostListener,
|
|
690
758
|
args: ['document:click', ['$event']]
|