npm - @seniorsistemas/angular-components - Versions diffs - 19.7.3-bugfix-ptfgap-1271-ddfd6e7b → 19.7.4 - Mend

@seniorsistemas/angular-components 19.7.3-bugfix-ptfgap-1271-ddfd6e7b → 19.7.4

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.

Files changed (646) hide show

package/fesm2022/seniorsistemas-angular-components-datepicker.mjs CHANGED Viewed

@@ -328,6 +328,7 @@ class DatepickerComponent {
     ngControl = null;
     value = signal(null);
     isOpen = signal(false);
+    isFocused = signal(false);
     viewDate = signal(new Date());
     pickerView = signal('calendar');
     hours = signal(0);
@@ -663,6 +664,7 @@ class DatepickerComponent {
     }
     handleInputClick() { }
     handleInputFocus(event) {
+        this.isFocused.set(true);
         this.focused.emit(event);
         if (this.showOnFocus()) {
             this.openOnFocus();
@@ -672,6 +674,7 @@ class DatepickerComponent {
         this.valueInput.emit(event);
     }
     handleInputBlur(event) {
+        this.isFocused.set(false);
         this.blurred.emit(event);
         const input = event.target;
         this._isBadInput = input.validity?.badInput ?? false;
@@ -1205,7 +1208,7 @@ class DatepickerComponent {
                 useExisting: DatepickerComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "popupPanel", first: true, predicate: ["popupPanel"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "increaseHourButton", first: true, predicate: ["increaseHourButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "iconButton", first: true, predicate: ["iconButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        class=\"hide-native-icon h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary focus:outline-1 focus:outline-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i class=\"fas fa-times text-xs\" aria-hidden=\"true\"></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i [class]=\"resolvedIcon()\" aria-hidden=\"true\"></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"closePanel()\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-full text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year)\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index)\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i class=\"fas fa-arrow-left\" aria-hidden=\"true\"></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}button[type=button]:focus-visible{outline:2px solid #428BCA;outline-offset:1px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], viewQueries: [{ propertyName: "popupPanel", first: true, predicate: ["popupPanel"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "increaseHourButton", first: true, predicate: ["increaseHourButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "iconButton", first: true, predicate: ["iconButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        class=\"hide-native-icon h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i class=\"fas fa-times text-xs\" aria-hidden=\"true\"></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i [class]=\"resolvedIcon()\" aria-hidden=\"true\"></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"closePanel()\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year)\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index)\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i class=\"fas fa-arrow-left\" aria-hidden=\"true\"></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}button[type=button]:focus-visible{outline:2px solid #428BCA;outline-offset:1px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 __decorate([
     numericKeysOnly()
@@ -1239,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: DatepickerComponent,
                             multi: true,
                         },
-                    ], template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        class=\"hide-native-icon h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary focus:outline-1 focus:outline-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i class=\"fas fa-times text-xs\" aria-hidden=\"true\"></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i [class]=\"resolvedIcon()\" aria-hidden=\"true\"></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"closePanel()\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-full text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year)\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index)\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i class=\"fas fa-arrow-left\" aria-hidden=\"true\"></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}button[type=button]:focus-visible{outline:2px solid #428BCA;outline-offset:1px;border-radius:inherit}\n"] }]
+                    ], template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        class=\"hide-native-icon h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i class=\"fas fa-times text-xs\" aria-hidden=\"true\"></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i [class]=\"resolvedIcon()\" aria-hidden=\"true\"></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"closePanel()\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year)\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index)\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i class=\"fas fa-arrow-left\" aria-hidden=\"true\"></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}button[type=button]:focus-visible{outline:2px solid #428BCA;outline-offset:1px;border-radius:inherit}\n"] }]
         }], propDecorators: { handleHoursKeydown: [], handleMinutesKeydown: [], handleSecondsKeydown: [] } });
 /**