@seniorsistemas/angular-components 19.9.11 → 19.9.12

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

@@ -2347,7 +2347,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 }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], 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        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\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\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></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\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></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)=\"handleBackdropClick($event)\"\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: dialogAriaLabelParams()\"\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]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\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]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\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]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\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 && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\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\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\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]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !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                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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                        </div>\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\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\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]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\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]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\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\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}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 }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"datepicker-group relative flex w-full items-center after:pointer-events-none after:absolute after:inset-0 after:rounded-medium has-[input:focus]:after:outline has-[input:focus]:after:outline-2 has-[input:focus]:after:outline-offset-[-2px] has-[input:focus]:after:outline-[var(--s-focus-ring-color,#0090ff)]\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-medium border border-solid border-grayscale-30 pl-[10px] text-sm outline-none transition-colors duration-200 ease-out\"\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=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\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\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"trigger-icon absolute right-0 flex h-[35px] w-9 items-center justify-center rounded-r-medium border border-solid transition-colors duration-200 ease-out\"\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.bg-grayscale-0]=\"!disabled()\"\n            [class.bg-grayscale-5]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-5]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></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)=\"handleBackdropClick($event)\"\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: dialogAriaLabelParams()\"\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]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\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]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\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]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\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 && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\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\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\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]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !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                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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                        </div>\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\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\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]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\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]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\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\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty .datepicker-group:not(:focus-within){input,button.trigger-icon{border-color:#c13018}}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}button.trigger-icon[type=button]:focus-visible{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px;border-radius:0 4px 4px 0}\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()
@@ -2381,7 +2381,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        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\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\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></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\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></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)=\"handleBackdropClick($event)\"\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: dialogAriaLabelParams()\"\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]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\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]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\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]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\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 && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\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\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\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]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !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                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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                        </div>\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\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\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]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\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]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\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\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}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=\"datepicker-group relative flex w-full items-center after:pointer-events-none after:absolute after:inset-0 after:rounded-medium has-[input:focus]:after:outline has-[input:focus]:after:outline-2 has-[input:focus]:after:outline-offset-[-2px] has-[input:focus]:after:outline-[var(--s-focus-ring-color,#0090ff)]\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-medium border border-solid border-grayscale-30 pl-[10px] text-sm outline-none transition-colors duration-200 ease-out\"\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=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\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\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"trigger-icon absolute right-0 flex h-[35px] w-9 items-center justify-center rounded-r-medium border border-solid transition-colors duration-200 ease-out\"\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.bg-grayscale-0]=\"!disabled()\"\n            [class.bg-grayscale-5]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-5]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></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)=\"handleBackdropClick($event)\"\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: dialogAriaLabelParams()\"\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]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\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]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\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]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\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 && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\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\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\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]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !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                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\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]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></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]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></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                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\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                        </div>\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\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\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]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\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]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></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-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></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]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\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\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty .datepicker-group:not(:focus-within){input,button.trigger-icon{border-color:#c13018}}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}button.trigger-icon[type=button]:focus-visible{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px;border-radius:0 4px 4px 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handleHoursKeydown: [], handleMinutesKeydown: [], handleSecondsKeydown: [] } });
 
 /**