@seniorsistemas/angular-components 19.9.10 → 19.9.11-develop-1dc6275b

package/fesm2022/seniorsistemas-angular-components-content-generator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-content-generator.mjs","sources":["../../projects/angular-components/content-generator/src/lib/services/IAssist/iassist.service.ts","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.component.ts","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.component.html","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.module.ts","../../projects/angular-components/content-generator/src/seniorsistemas-angular-components-content-generator.ts"],"sourcesContent":["/* eslint-disable max-len */\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\nimport { Injectable, inject } from '@angular/core';\n\nimport { Observable, throwError } from 'rxjs';\nimport { catchError } from 'rxjs/operators';\n\nimport { IAssistInputData } from './models/iassist-input-data';\nimport { IAssistResponse } from './models/iassist-response';\nimport { ToastService } from \"@seniorsistemas/angular-components/toast\";\n\n@Injectable({ providedIn: 'root' })\nexport class IAssistService {\n\tprivate readonly http = inject(HttpClient);\n\tprivate readonly toastService = inject(ToastService);\n\n\n\tpublic askIA(context: string, data: IAssistInputData): Observable<IAssistResponse> {\n\t\tconst prompt: string = data.prompt\n\t\t\t? this._replacePlaceholder(context, data)\n\t\t\t: this._createPrompt(context, data);\n\n\t\treturn this.http\n\t\t\t.post<IAssistResponse>('platform/iassist/api/latest/completions', {\n\t\t\t\tprompt,\n\t\t\t\tprovider: 'OPEN_AI',\n\t\t\t\tparameters: {\n\t\t\t\t\tmodel: 'gpt-3.5-turbo',\n\t\t\t\t\tmax_tokens: 700,\n\t\t\t\t\ttemperature: 1,\n\t\t\t\t},\n\t\t\t})\n\t\t\t.pipe(\n\t\t\t\tcatchError((err: HttpErrorResponse) => {\n\t\t\t\t\tthis.toastService.show({\n\t\t\t\t\t\tseverity: 'error',\n\t\t\t\t\t\ttitle: err.status ? String(err.status) : 'Error',\n\t\t\t\t\t\ttext: (err.error && err.error.message) || err.statusText || err.message || 'Error',\n\t\t\t\t\t});\n\t\t\t\t\treturn throwError(() => new Error(err.message));\n\t\t\t\t}),\n\t\t\t);\n\t}\n\n\tprivate _replacePlaceholder(context: string, data: IAssistInputData): string {\n\t\tconst values = { ...data, context };\n\t\tdelete (values as Partial<IAssistInputData>).prompt;\n\n\t\tlet result = data.prompt;\n\t\tfor (const key in { ...values, context: context }) {\n\t\t\tconst placeholder = new RegExp(`{{\\\\s*${key}\\\\s*}}`, 'g');\n\t\t\tresult = result.replace(placeholder, values[key as keyof typeof values]);\n\t\t}\n\n\t\tconsole.log('prompt', result);\n\t\treturn result;\n\t}\n\n\tprivate _createPrompt(context: string, data: IAssistInputData): string {\n\t\treturn `Crie um texto genérico para preencher o campo de textarea.\n        ${data.label ? `O campo tem o label ${data.label}.` : ''}\n        ${data.id ? `O campo tem o id ${data.id}.` : ''}\n        ${data.placeholder ? `Considere as instruções/sugestões do placeholder: ${data.placeholder}.` : ''}\n        Baseie-se no contexto informado pelo usuário: '${context}'.\n        O texto deve ser formal e conter informações pertinentes a um campo como este, como se um usuário real tivesse preenchido com as informações necessárias.\n        O texto deve ser neutro com relação a generos, raças, religiões, etc.\n        O texto deve ser impessoal e não deve conter informações pessoais do usuário.\n        Não direcione o texto a ninguém, não use expressões como: caro, atenciosamente. gostaria, agradeço. O texto deve ser genérico.\n\n        Exemplos de texto:\n        Um campo de descrição de usuário: \"Usuário com 20 anos, estudante de engenharia, gosta de jogar futebol e assistir filmes.\"\n        Outro exemplo de descrição de usuário: \"Usuário administrador, com acesso total ao sistema, responsável por gerenciar os usuários e os produtos.\"\n        Um campo de descrição de um produto: \"O produto é um celular, com tela de 6 polegadas, 128GB de armazenamento, 4GB de memória RAM, câmera de 12MP e bateria de 4000mAh.\"\n        Outro exemplo de descrição de produto: \"O produto é uma geladeira, com capacidade de 500 litros, 2 portas, cor branca, com freezer e gaveta de legumes.\"\n        Outro exemplo de descrição de produto: \"O produto é uma camiseta, tamanho M, cor azul, 100% algodão, com estampa de um gato.\"\n\n        Em caso de contexto incompleto crie um texto genérico, como se fosse um exemplo de preenchimento do campo.\n        O texto é para um campo de textarea, então escreva um texto sucinto.\n        Exiba apenas o texto do output`;\n\t}\n}\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport {\r\n    Component,\r\n    DestroyRef,\r\n    forwardRef,\r\n    input,\r\n    Input,\r\n    OnInit,\r\n    viewChild,\r\n    ViewEncapsulation,\r\n    inject,\r\n    signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { Injector } from '@angular/core';\r\n\r\nimport {\r\n    ControlValueAccessor,\r\n    FormBuilder,\r\n    FormGroup,\r\n    NG_VALUE_ACCESSOR,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n} from '@angular/forms';\r\n\r\nimport { TranslateService, TranslatePipe } from '@ngx-translate/core';\r\nimport {\r\n    DEPRECATED_CONFIG,\r\n    DeprecatedSelectorDirective,\r\n} from '@seniorsistemas/angular-components/common/deprecated-selector';\r\nimport { SpeechRecognitionService } from '@seniorsistemas/angular-components/speech-recognition';\r\nimport {\r\n    TextAreaComponent,\r\n    TextAreaComponent as TextAreaComponent_1,\r\n} from '@seniorsistemas/angular-components/text-area';\r\nimport { throwError } from 'rxjs';\r\nimport { catchError } from 'rxjs/operators';\r\n\r\nimport { IAssistService } from '../services/IAssist/iassist.service';\r\nimport { IAssistResponse } from '../services/IAssist/models/iassist-response';\r\nimport { LoadingStateComponent } from '@seniorsistemas/angular-components/loading-state';\r\nimport { DialogComponent } from '@seniorsistemas/angular-components/dialog';\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { ButtonComponent } from '@seniorsistemas/angular-components/button';\r\nimport { SVGFactoryDirective } from '@seniorsistemas/angular-components/common';\r\n\r\n/**\r\n * @description Componente de área de texto com geração de conteúdo por inteligência artificial.\r\n * Integra-se ao serviço IAssist para sugerir e completar textos com base em um prompt configurável.\r\n * Suporta reconhecimento de voz opcional e mantém contexto entre gerações quando `keepContext` é `true`.\r\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\r\n *\r\n * @example\r\n * ```html\r\n * <s-content-generator\r\n *   formControlName=\"descricao\"\r\n *   label=\"Descrição\"\r\n *   prompt=\"Gere uma descrição para o produto\"\r\n *   [rows]=\"5\"\r\n *   [speechRecognition]=\"true\" />\r\n * ```\r\n *\r\n * @category Inputs\r\n */\r\n@Component({\r\n    selector: 's-content-generator, s-text-area-ia',\r\n    templateUrl: './content-generator.component.html',\r\n    styleUrls: ['./content-generator.component.scss'],\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() => ContentGeneratorComponent),\r\n            multi: true,\r\n        },\r\n        {\r\n            provide: DEPRECATED_CONFIG,\r\n            useValue: {\r\n                oldSelector: 's-text-area-ia',\r\n                newSelector: 's-content-generator',\r\n                removalVersion: '20.0.0',\r\n            },\r\n        },\r\n    ],\r\n    hostDirectives: [DeprecatedSelectorDirective],\r\n    encapsulation: ViewEncapsulation.None,\r\n    standalone: true,\r\n    imports: [\r\n        LoadingStateComponent,\r\n        DialogComponent,\r\n        TemplateDirective,\r\n        NgTemplateOutlet,\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        TextAreaComponent_1,\r\n        ButtonComponent,\r\n        SVGFactoryDirective,\r\n        TranslatePipe,\r\n    ],\r\n})\r\nexport class ContentGeneratorComponent implements OnInit, ControlValueAccessor {\r\n    private readonly _iassistService = inject(IAssistService);\r\n    private readonly _formBuilder = inject(FormBuilder);\r\n    speechRecognitionService = inject(SpeechRecognitionService);\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n  disabled = signal(false);\r\n\r\n    textArea = viewChild<TextAreaComponent>('textAreaElement');\r\n    private static id = 0;\r\n\r\n    /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\r\n    @Input()\r\n    public id = `ContentGenerator_${ContentGeneratorComponent.id--}`;\r\n\r\n    /** @description Label exibido acima da área de texto. */\r\n    @Input()\r\n    public label!: string;\r\n\r\n    /** @description Texto de placeholder exibido na área de texto quando vazia. @default '' */\r\n    @Input()\r\n    public placeholder: string = '';\r\n\r\n    /** @description Instrução (prompt) enviada ao serviço de IA para gerar o conteúdo sugerido. */\r\n    @Input()\r\n    public prompt!: string;\r\n\r\n    /** @description Torna a área de texto somente leitura. @default false */\r\n    @Input()\r\n    public readonly: boolean = false;\r\n\r\n    /** @description Número de linhas visíveis da área de texto. @default 10 */\r\n    @Input()\r\n    public rows: number = 10;\r\n\r\n    /** @description Número de colunas visíveis da área de texto. @default 10 */\r\n    @Input()\r\n    public cols: number = 10;\r\n\r\n    /** @description Habilita o botão de reconhecimento de voz para ditado de texto. @default false */\r\n    @Input()\r\n    public speechRecognition = false;\r\n\r\n    /** @description Quando `true`, o histórico de gerações anteriores é enviado ao serviço de IA como contexto. @default false */\r\n    @Input()\r\n    public keepContext = false;\r\n\r\n    /** @description Texto de placeholder exibido no campo de reconhecimento de voz. @default '' */\r\n    @Input()\r\n    speechRecognitionPlaceholder = '';\r\n\r\n    /** @description Limite máximo de caracteres permitidos na área de texto. `null` desabilita o limite. @default null */\r\n    @Input()\r\n    maxLength: number | null = null;\r\n\r\n    /** @description Estilos CSS inline aplicados à área de texto interna. */\r\n    textAreaStyle = input<Partial<CSSStyleDeclaration>>({});\r\n\r\n    public formGroup: FormGroup = new FormGroup({});\r\n    public contextForm: FormGroup = new FormGroup({});\r\n    public isVisible = false;\r\n    public isLoading = false;\r\n    public value = '';\r\n\r\n    private _onChange?: (value: string) => void;\r\n    private _onTouched?: () => void;\r\n\r\n    public ngOnInit(): void {\r\n        this._createDialogFormGroup();\r\n    }\r\n\r\n    public writeValue(value: string): void {\r\n        this.value = value;\r\n    }\r\n\r\n    public setDisabledState(isDisabled: boolean): void {\r\n      this.disabled.set(isDisabled);\r\n    }\r\n\r\n    public registerOnChange(onChange: (value: string) => void): void {\r\n        this._onChange = onChange;\r\n    }\r\n\r\n    public registerOnTouched(onTouched: () => void): void {\r\n        this._onTouched = onTouched;\r\n    }\r\n\r\n    public onValueChange(value: string): void {\r\n        this.value = value;\r\n        this._onChange?.(value);\r\n    }\r\n\r\n    public showDialog(): void {\r\n        this.isVisible = true;\r\n        if (this._onTouched) {\r\n            this._onTouched();\r\n        }\r\n    }\r\n\r\n    public hideDialog(): void {\r\n        this.isVisible = false;\r\n    }\r\n\r\n    public onHideDialog(): void {\r\n        if (this.isVisible === false) {\r\n            this.formGroup.get('context')?.setValue('');\r\n        }\r\n    }\r\n\r\n    public submitContext(): void {\r\n        const context = this.formGroup.get('context');\r\n        if (!context) {\r\n            return;\r\n        }\r\n        this.isLoading = true;\r\n\r\n        this._iassistService\r\n            .askIA(context.value, {\r\n                id: this.id,\r\n                label: this.label,\r\n                placeholder: this.placeholder,\r\n                prompt: this.prompt,\r\n            })\r\n            .pipe(\r\n                catchError((err: HttpErrorResponse) => {\r\n                    this.isLoading = false;\r\n                    return throwError(() => new Error(err.message));\r\n                }),\r\n                takeUntilDestroyed(this._destroyRef),\r\n            )\r\n            .subscribe((res: IAssistResponse) => {\r\n                this.value = res.text;\r\n                this._onChange?.(this.value);\r\n                this.isLoading = false;\r\n            });\r\n\r\n        this.hideDialog();\r\n    }\r\n\r\n    private _createDialogFormGroup(): void {\r\n        this.formGroup = this._formBuilder.group({\r\n            context: [''],\r\n        });\r\n    }\r\n}\r\n","<s-loading-state\n    [loading]=\"isLoading\"\n    [blockWindow]=\"true\"\n>\n</s-loading-state>\n\n<s-dialog\n    [(visible)]=\"isVisible\"\n    [escapeOnEsc]=\"false\"\n    [destroyClickOutside]=\"false\"\n    size=\"lg\"\n    (visibleChange)=\"onHideDialog()\"\n>\n    <ng-template sTemplate=\"header\">\n        <div class=\"dialog-header\">\n            <span class=\"iassist-icon\">\n                <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n            </span>\n            IAssist - Content Generator\n        </div>\n    </ng-template>\n\n    <form [formGroup]=\"formGroup\">\n        <label for=\"context\">{{ 'platform.angular_components.context' | translate }}</label>\n        <s-textarea\n            inputId=\"context\"\n            formControlName=\"context\"\n            [speechRecognition]=\"speechRecognition\"\n            [keepContext]=\"keepContext\"\n        />\n    </form>\n\n    <ng-template sTemplate=\"footer\">\n        <div class=\"footer-content\">\n            <s-button\n                id=\"-submit-button\"\n                type=\"button\"\n                [label]=\"'platform.angular_components.generate_text' | translate\"\n                (clicked)=\"submitContext()\"\n                sTooltip=\"(ALT + SHIFT + S)\"\n                showDelay=\"500\"\n                [disabled]=\"disabled()\"\n            >\n            </s-button>\n            <s-button\n                id=\"-cancel-button\"\n                type=\"button\"\n                priority=\"link\"\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                (clicked)=\"hideDialog()\"\n                sTooltip=\"(ALT + SHIFT + C)\"\n                showDelay=\"500\"\n                [disabled]=\"disabled()\"\n            >\n            </s-button>\n        </div>\n    </ng-template>\n</s-dialog>\n\n<div class=\"textarea-ia\">\n    <s-textarea\n        #textAreaElement\n        [inputId]=\"id\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [rows]=\"rows\"\n        [readOnly]=\"readonly\"\n        [placeholder]=\"placeholder\"\n        [keepContext]=\"keepContext\"\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n        [maxLength]=\"maxLength\"\n        [speechRecognition]=\"speechRecognition\"\n        [disabled]=\"disabled()\"\n    >\n    </s-textarea>\n    <!--TODO: Tooltip em propriedade-->\n    <button\n        class=\"iassist-button\"\n        [class.speech-recognition]=\"speechRecognition && speechRecognitionService.hasSupportSpeechRecognition\"\n        (click)=\"showDialog()\"\n        sTooltip=\"IAssist - Content Generator\"\n        [disabled]=\"disabled()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n    </button>\n</div>\n\n<ng-template #iassistIcon>\n    <div style=\"width: 100%; height: 100%;\">\n        <span *sSVGFactory=\"'iassist'\"></span>\n    </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\r\n\r\nimport { ContentGeneratorComponent } from './content-generator.component';\r\n\r\n@NgModule({\r\n    imports: [ContentGeneratorComponent],\r\n    exports: [ContentGeneratorComponent],\r\n})\r\nexport class ContentGeneratorModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["TextAreaComponent_1"],"mappings":"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"}
+{"version":3,"file":"seniorsistemas-angular-components-content-generator.mjs","sources":["../../projects/angular-components/content-generator/src/lib/services/IAssist/iassist.service.ts","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.component.ts","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.component.html","../../projects/angular-components/content-generator/src/lib/content-generator/content-generator.module.ts","../../projects/angular-components/content-generator/src/seniorsistemas-angular-components-content-generator.ts"],"sourcesContent":["/* eslint-disable max-len */\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\nimport { Injectable, inject } from '@angular/core';\n\nimport { Observable, throwError } from 'rxjs';\nimport { catchError } from 'rxjs/operators';\n\nimport { IAssistInputData } from './models/iassist-input-data';\nimport { IAssistResponse } from './models/iassist-response';\nimport { ToastService } from \"@seniorsistemas/angular-components/toast\";\n\n@Injectable({ providedIn: 'root' })\nexport class IAssistService {\n\tprivate readonly http = inject(HttpClient);\n\tprivate readonly toastService = inject(ToastService);\n\n\n\tpublic askIA(context: string, data: IAssistInputData): Observable<IAssistResponse> {\n\t\tconst prompt: string = data.prompt\n\t\t\t? this._replacePlaceholder(context, data)\n\t\t\t: this._createPrompt(context, data);\n\n\t\treturn this.http\n\t\t\t.post<IAssistResponse>('platform/iassist/api/latest/completions', {\n\t\t\t\tprompt,\n\t\t\t\tprovider: 'OPEN_AI',\n\t\t\t\tparameters: {\n\t\t\t\t\tmodel: 'gpt-3.5-turbo',\n\t\t\t\t\tmax_tokens: 700,\n\t\t\t\t\ttemperature: 1,\n\t\t\t\t},\n\t\t\t})\n\t\t\t.pipe(\n\t\t\t\tcatchError((err: HttpErrorResponse) => {\n\t\t\t\t\tthis.toastService.show({\n\t\t\t\t\t\tseverity: 'error',\n\t\t\t\t\t\ttitle: err.status ? String(err.status) : 'Error',\n\t\t\t\t\t\ttext: (err.error && err.error.message) || err.statusText || err.message || 'Error',\n\t\t\t\t\t});\n\t\t\t\t\treturn throwError(() => new Error(err.message));\n\t\t\t\t}),\n\t\t\t);\n\t}\n\n\tprivate _replacePlaceholder(context: string, data: IAssistInputData): string {\n\t\tconst values = { ...data, context };\n\t\tdelete (values as Partial<IAssistInputData>).prompt;\n\n\t\tlet result = data.prompt;\n\t\tfor (const key in { ...values, context: context }) {\n\t\t\tconst placeholder = new RegExp(`{{\\\\s*${key}\\\\s*}}`, 'g');\n\t\t\tresult = result.replace(placeholder, values[key as keyof typeof values]);\n\t\t}\n\n\t\tconsole.log('prompt', result);\n\t\treturn result;\n\t}\n\n\tprivate _createPrompt(context: string, data: IAssistInputData): string {\n\t\treturn `Crie um texto genérico para preencher o campo de textarea.\n        ${data.label ? `O campo tem o label ${data.label}.` : ''}\n        ${data.id ? `O campo tem o id ${data.id}.` : ''}\n        ${data.placeholder ? `Considere as instruções/sugestões do placeholder: ${data.placeholder}.` : ''}\n        Baseie-se no contexto informado pelo usuário: '${context}'.\n        O texto deve ser formal e conter informações pertinentes a um campo como este, como se um usuário real tivesse preenchido com as informações necessárias.\n        O texto deve ser neutro com relação a generos, raças, religiões, etc.\n        O texto deve ser impessoal e não deve conter informações pessoais do usuário.\n        Não direcione o texto a ninguém, não use expressões como: caro, atenciosamente. gostaria, agradeço. O texto deve ser genérico.\n\n        Exemplos de texto:\n        Um campo de descrição de usuário: \"Usuário com 20 anos, estudante de engenharia, gosta de jogar futebol e assistir filmes.\"\n        Outro exemplo de descrição de usuário: \"Usuário administrador, com acesso total ao sistema, responsável por gerenciar os usuários e os produtos.\"\n        Um campo de descrição de um produto: \"O produto é um celular, com tela de 6 polegadas, 128GB de armazenamento, 4GB de memória RAM, câmera de 12MP e bateria de 4000mAh.\"\n        Outro exemplo de descrição de produto: \"O produto é uma geladeira, com capacidade de 500 litros, 2 portas, cor branca, com freezer e gaveta de legumes.\"\n        Outro exemplo de descrição de produto: \"O produto é uma camiseta, tamanho M, cor azul, 100% algodão, com estampa de um gato.\"\n\n        Em caso de contexto incompleto crie um texto genérico, como se fosse um exemplo de preenchimento do campo.\n        O texto é para um campo de textarea, então escreva um texto sucinto.\n        Exiba apenas o texto do output`;\n\t}\n}\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport {\r\n    Component,\r\n    DestroyRef,\r\n    forwardRef,\r\n    input,\r\n    Input,\r\n    OnInit,\r\n    viewChild,\r\n    ViewEncapsulation,\r\n    inject,\r\n    signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { Injector } from '@angular/core';\r\n\r\nimport {\r\n    ControlValueAccessor,\r\n    FormBuilder,\r\n    FormGroup,\r\n    NG_VALUE_ACCESSOR,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n} from '@angular/forms';\r\n\r\nimport { TranslateService, TranslatePipe } from '@ngx-translate/core';\r\nimport {\r\n    DEPRECATED_CONFIG,\r\n    DeprecatedSelectorDirective,\r\n} from '@seniorsistemas/angular-components/common/deprecated-selector';\r\nimport { SpeechRecognitionService } from '@seniorsistemas/angular-components/speech-recognition';\r\nimport {\r\n    TextAreaComponent,\r\n    TextAreaComponent as TextAreaComponent_1,\r\n} from '@seniorsistemas/angular-components/text-area';\r\nimport { throwError } from 'rxjs';\r\nimport { catchError } from 'rxjs/operators';\r\n\r\nimport { IAssistService } from '../services/IAssist/iassist.service';\r\nimport { IAssistResponse } from '../services/IAssist/models/iassist-response';\r\nimport { LoadingStateComponent } from '@seniorsistemas/angular-components/loading-state';\r\nimport { DialogComponent } from '@seniorsistemas/angular-components/dialog';\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { ButtonComponent } from '@seniorsistemas/angular-components/button';\r\nimport { SVGFactoryDirective } from '@seniorsistemas/angular-components/common';\r\n\r\n/**\r\n * @description Componente de área de texto com geração de conteúdo por inteligência artificial.\r\n * Integra-se ao serviço IAssist para sugerir e completar textos com base em um prompt configurável.\r\n * Suporta reconhecimento de voz opcional e mantém contexto entre gerações quando `keepContext` é `true`.\r\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\r\n *\r\n * @example\r\n * ```html\r\n * <s-content-generator\r\n *   formControlName=\"descricao\"\r\n *   label=\"Descrição\"\r\n *   prompt=\"Gere uma descrição para o produto\"\r\n *   [rows]=\"5\"\r\n *   [speechRecognition]=\"true\" />\r\n * ```\r\n *\r\n * @category Inputs\r\n */\r\n@Component({\r\n    selector: 's-content-generator, s-text-area-ia',\r\n    templateUrl: './content-generator.component.html',\r\n    styleUrls: ['./content-generator.component.scss'],\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() => ContentGeneratorComponent),\r\n            multi: true,\r\n        },\r\n        {\r\n            provide: DEPRECATED_CONFIG,\r\n            useValue: {\r\n                oldSelector: 's-text-area-ia',\r\n                newSelector: 's-content-generator',\r\n                removalVersion: '20.0.0',\r\n            },\r\n        },\r\n    ],\r\n    hostDirectives: [DeprecatedSelectorDirective],\r\n    encapsulation: ViewEncapsulation.None,\r\n    standalone: true,\r\n    imports: [\r\n        LoadingStateComponent,\r\n        DialogComponent,\r\n        TemplateDirective,\r\n        NgTemplateOutlet,\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        TextAreaComponent_1,\r\n        ButtonComponent,\r\n        SVGFactoryDirective,\r\n        TranslatePipe,\r\n    ],\r\n})\r\nexport class ContentGeneratorComponent implements OnInit, ControlValueAccessor {\r\n    private readonly _iassistService = inject(IAssistService);\r\n    private readonly _formBuilder = inject(FormBuilder);\r\n    speechRecognitionService = inject(SpeechRecognitionService);\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n  disabled = signal(false);\r\n\r\n    textArea = viewChild<TextAreaComponent>('textAreaElement');\r\n    private static id = 0;\r\n\r\n    /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\r\n    @Input()\r\n    public id = `ContentGenerator_${ContentGeneratorComponent.id--}`;\r\n\r\n    /** @description Label exibido acima da área de texto. */\r\n    @Input()\r\n    public label!: string;\r\n\r\n    /** @description Texto de placeholder exibido na área de texto quando vazia. @default '' */\r\n    @Input()\r\n    public placeholder: string = '';\r\n\r\n    /** @description Instrução (prompt) enviada ao serviço de IA para gerar o conteúdo sugerido. */\r\n    @Input()\r\n    public prompt!: string;\r\n\r\n    /** @description Torna a área de texto somente leitura. @default false */\r\n    @Input()\r\n    public readonly: boolean = false;\r\n\r\n    /** @description Número de linhas visíveis da área de texto. @default 10 */\r\n    @Input()\r\n    public rows: number = 10;\r\n\r\n    /** @description Número de colunas visíveis da área de texto. @default 10 */\r\n    @Input()\r\n    public cols: number = 10;\r\n\r\n    /** @description Habilita o botão de reconhecimento de voz para ditado de texto. @default false */\r\n    @Input()\r\n    public speechRecognition = false;\r\n\r\n    /** @description Quando `true`, o histórico de gerações anteriores é enviado ao serviço de IA como contexto. @default false */\r\n    @Input()\r\n    public keepContext = false;\r\n\r\n    /** @description Texto de placeholder exibido no campo de reconhecimento de voz. @default '' */\r\n    @Input()\r\n    speechRecognitionPlaceholder = '';\r\n\r\n    /** @description Limite máximo de caracteres permitidos na área de texto. `null` desabilita o limite. @default null */\r\n    @Input()\r\n    maxLength: number | null = null;\r\n\r\n    /** @description Estilos CSS inline aplicados à área de texto interna. */\r\n    textAreaStyle = input<Partial<CSSStyleDeclaration>>({});\r\n\r\n    public formGroup: FormGroup = new FormGroup({});\r\n    public contextForm: FormGroup = new FormGroup({});\r\n    public isVisible = false;\r\n    public isLoading = false;\r\n    public value = '';\r\n\r\n    private _onChange?: (value: string) => void;\r\n    private _onTouched?: () => void;\r\n\r\n    public ngOnInit(): void {\r\n        this._createDialogFormGroup();\r\n    }\r\n\r\n    public writeValue(value: string): void {\r\n        this.value = value;\r\n    }\r\n\r\n    public setDisabledState(isDisabled: boolean): void {\r\n      this.disabled.set(isDisabled);\r\n    }\r\n\r\n    public registerOnChange(onChange: (value: string) => void): void {\r\n        this._onChange = onChange;\r\n    }\r\n\r\n    public registerOnTouched(onTouched: () => void): void {\r\n        this._onTouched = onTouched;\r\n    }\r\n\r\n    public onValueChange(value: string): void {\r\n        this.value = value;\r\n        this._onChange?.(value);\r\n    }\r\n\r\n    public showDialog(): void {\r\n        this.isVisible = true;\r\n        if (this._onTouched) {\r\n            this._onTouched();\r\n        }\r\n    }\r\n\r\n    public hideDialog(): void {\r\n        this.isVisible = false;\r\n    }\r\n\r\n    public onHideDialog(): void {\r\n        if (this.isVisible === false) {\r\n            this.formGroup.get('context')?.setValue('');\r\n        }\r\n    }\r\n\r\n    public submitContext(): void {\r\n        const context = this.formGroup.get('context');\r\n        if (!context) {\r\n            return;\r\n        }\r\n        this.isLoading = true;\r\n\r\n        this._iassistService\r\n            .askIA(context.value, {\r\n                id: this.id,\r\n                label: this.label,\r\n                placeholder: this.placeholder,\r\n                prompt: this.prompt,\r\n            })\r\n            .pipe(\r\n                catchError((err: HttpErrorResponse) => {\r\n                    this.isLoading = false;\r\n                    return throwError(() => new Error(err.message));\r\n                }),\r\n                takeUntilDestroyed(this._destroyRef),\r\n            )\r\n            .subscribe((res: IAssistResponse) => {\r\n                this.value = res.text;\r\n                this._onChange?.(this.value);\r\n                this.isLoading = false;\r\n            });\r\n\r\n        this.hideDialog();\r\n    }\r\n\r\n    private _createDialogFormGroup(): void {\r\n        this.formGroup = this._formBuilder.group({\r\n            context: [''],\r\n        });\r\n    }\r\n}\r\n","<s-loading-state\n    [loading]=\"isLoading\"\n    [blockWindow]=\"true\"\n>\n</s-loading-state>\n\n<s-dialog\n    [(visible)]=\"isVisible\"\n    [escapeOnEsc]=\"false\"\n    [destroyClickOutside]=\"false\"\n    size=\"lg\"\n    (visibleChange)=\"onHideDialog()\"\n>\n    <ng-template sTemplate=\"header\">\n        <div class=\"dialog-header\">\n            <span class=\"iassist-icon\">\n                <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n            </span>\n            IAssist - Content Generator\n        </div>\n    </ng-template>\n\n    <form [formGroup]=\"formGroup\">\n        <label for=\"context\">{{ 'platform.angular_components.context' | translate }}</label>\n        <s-textarea\n            inputId=\"context\"\n            formControlName=\"context\"\n            [speechRecognition]=\"speechRecognition\"\n            [keepContext]=\"keepContext\"\n        />\n    </form>\n\n    <ng-template sTemplate=\"footer\">\n        <div class=\"footer-content\">\n            <s-button\n                id=\"-submit-button\"\n                type=\"button\"\n                [label]=\"'platform.angular_components.generate_text' | translate\"\n                (clicked)=\"submitContext()\"\n                sTooltip=\"(ALT + SHIFT + S)\"\n                showDelay=\"500\"\n                [disabled]=\"disabled()\"\n            >\n            </s-button>\n            <s-button\n                id=\"-cancel-button\"\n                type=\"button\"\n                priority=\"link\"\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                (clicked)=\"hideDialog()\"\n                sTooltip=\"(ALT + SHIFT + C)\"\n                showDelay=\"500\"\n                [disabled]=\"disabled()\"\n            >\n            </s-button>\n        </div>\n    </ng-template>\n</s-dialog>\n\n<div class=\"textarea-ia\">\n    <s-textarea\n        #textAreaElement\n        [inputId]=\"id\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [rows]=\"rows\"\n        [readOnly]=\"readonly\"\n        [placeholder]=\"placeholder\"\n        [keepContext]=\"keepContext\"\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n        [maxLength]=\"maxLength\"\n        [speechRecognition]=\"speechRecognition\"\n        [disabled]=\"disabled()\"\n    >\n    </s-textarea>\n    <!--TODO: Tooltip em propriedade-->\n    <button\n        class=\"iassist-button\"\n        [class.speech-recognition]=\"speechRecognition && speechRecognitionService.hasSupportSpeechRecognition\"\n        (click)=\"showDialog()\"\n        sTooltip=\"IAssist - Content Generator\"\n        [disabled]=\"disabled()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n    </button>\n</div>\n\n<ng-template #iassistIcon>\n    <div style=\"width: 100%; height: 100%;\">\n        <span *sSVGFactory=\"'iassist'\"></span>\n    </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\r\n\r\nimport { ContentGeneratorComponent } from './content-generator.component';\r\n\r\n@NgModule({\r\n    imports: [ContentGeneratorComponent],\r\n    exports: [ContentGeneratorComponent],\r\n})\r\nexport class ContentGeneratorModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["TextAreaComponent_1"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;MAYa,cAAc,CAAA;AACT,IAAA,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAC1B,IAAA,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAG9C,KAAK,CAAC,OAAe,EAAE,IAAsB,EAAA;AACnD,QAAA,MAAM,MAAM,GAAW,IAAI,CAAC,MAAM;cAC/B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC;cACvC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAErC,OAAO,IAAI,CAAC,IAAI;aACd,IAAI,CAAkB,yCAAyC,EAAE;YACjE,MAAM;AACN,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,UAAU,EAAE;AACX,gBAAA,KAAK,EAAE,eAAe;AACtB,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,WAAW,EAAE,CAAC;AACd,aAAA;SACD,CAAC;AACD,aAAA,IAAI,CACJ,UAAU,CAAC,CAAC,GAAsB,KAAI;AACrC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACtB,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO;gBAChD,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,OAAO,IAAI,OAAO;AAClF,aAAA,CAAC,CAAC;AACH,YAAA,OAAO,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;SAChD,CAAC,CACF,CAAC;KACH;IAEO,mBAAmB,CAAC,OAAe,EAAE,IAAsB,EAAA;QAClE,MAAM,MAAM,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC;QACpC,OAAQ,MAAoC,CAAC,MAAM,CAAC;AAEpD,QAAA,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;AACzB,QAAA,KAAK,MAAM,GAAG,IAAI,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,CAAS,MAAA,EAAA,GAAG,CAAQ,MAAA,CAAA,EAAE,GAAG,CAAC,CAAC;AAC1D,YAAA,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,GAA0B,CAAC,CAAC,CAAC;SACzE;AAED,QAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC9B,QAAA,OAAO,MAAM,CAAC;KACd;IAEO,aAAa,CAAC,OAAe,EAAE,IAAsB,EAAA;QAC5D,OAAO,CAAA;AACC,QAAA,EAAA,IAAI,CAAC,KAAK,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA;AACtD,QAAA,EAAA,IAAI,CAAC,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,EAAE,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA;AAC7C,QAAA,EAAA,IAAI,CAAC,WAAW,GAAG,CAAA,kDAAA,EAAqD,IAAI,CAAC,WAAW,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA;yDACjD,OAAO,CAAA;;;;;;;;;;;;;;;uCAezB,CAAC;KACtC;wGAnEW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAd,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cADD,MAAM,EAAA,CAAA,CAAA;;4FACnB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAA;;;ACqClC;;;;;;;;;;;;;;;;;AAiBG;MAoCU,yBAAyB,CAAA;AACjB,IAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACzC,IAAA,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACpD,IAAA,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC;AAC3C,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAEpD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAEvB,IAAA,QAAQ,GAAG,SAAS,CAAoB,iBAAiB,CAAC,CAAC;AACnD,IAAA,OAAO,EAAE,GAAG,CAAC,CAAC;;AAIf,IAAA,EAAE,GAAG,CAAoB,iBAAA,EAAA,yBAAyB,CAAC,EAAE,EAAE,EAAE,CAAC;;AAI1D,IAAA,KAAK,CAAU;;IAIf,WAAW,GAAW,EAAE,CAAC;;AAIzB,IAAA,MAAM,CAAU;;IAIhB,QAAQ,GAAY,KAAK,CAAC;;IAI1B,IAAI,GAAW,EAAE,CAAC;;IAIlB,IAAI,GAAW,EAAE,CAAC;;IAIlB,iBAAiB,GAAG,KAAK,CAAC;;IAI1B,WAAW,GAAG,KAAK,CAAC;;IAI3B,4BAA4B,GAAG,EAAE,CAAC;;IAIlC,SAAS,GAAkB,IAAI,CAAC;;AAGhC,IAAA,aAAa,GAAG,KAAK,CAA+B,EAAE,CAAC,CAAC;AAEjD,IAAA,SAAS,GAAc,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;AACzC,IAAA,WAAW,GAAc,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;IAC3C,SAAS,GAAG,KAAK,CAAC;IAClB,SAAS,GAAG,KAAK,CAAC;IAClB,KAAK,GAAG,EAAE,CAAC;AAEV,IAAA,SAAS,CAA2B;AACpC,IAAA,UAAU,CAAc;IAEzB,QAAQ,GAAA;QACX,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;AAEM,IAAA,UAAU,CAAC,KAAa,EAAA;AAC3B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACtB;AAEM,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KAC/B;AAEM,IAAA,gBAAgB,CAAC,QAAiC,EAAA;AACrD,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC7B;AAEM,IAAA,iBAAiB,CAAC,SAAqB,EAAA;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;AAEM,IAAA,aAAa,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;KAC3B;IAEM,UAAU,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AACtB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;KACJ;IAEM,UAAU,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC1B;IAEM,YAAY,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC/C;KACJ;IAEM,aAAa,GAAA;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;SACV;AACD,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AAEtB,QAAA,IAAI,CAAC,eAAe;AACf,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;YAClB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,MAAM,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC;AACD,aAAA,IAAI,CACD,UAAU,CAAC,CAAC,GAAsB,KAAI;AAClC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;AACvB,YAAA,OAAO,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;SACnD,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CACvC;AACA,aAAA,SAAS,CAAC,CAAC,GAAoB,KAAI;AAChC,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAC7B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;AAC3B,SAAC,CAAC,CAAC;QAEP,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAEO,sBAAsB,GAAA;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACrC,OAAO,EAAE,CAAC,EAAE,CAAC;AAChB,SAAA,CAAC,CAAC;KACN;wGA/IQ,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,EA/BvB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,4BAAA,EAAA,EAAA,iBAAA,EAAA,8BAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,yBAAyB,CAAC;AACxD,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACD,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,QAAQ,EAAE;AACN,oBAAA,WAAW,EAAE,gBAAgB;AAC7B,oBAAA,WAAW,EAAE,qBAAqB;AAClC,oBAAA,cAAc,EAAE,QAAQ;AAC3B,iBAAA;AACJ,aAAA;SACJ,ECpFL,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,26FA4FA,8nBDHQ,qBAAqB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACrB,eAAe,EACf,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,kBAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,iBAAiB,+EACjB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,WAAW,EACX,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,gVACnBA,iBAAmB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,8BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,eAAe,EACf,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,aAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,mBAAmB,8EACnB,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGR,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAnCrC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qCAAqC,EAGpC,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,+BAA+B,CAAC;AACxD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACD,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,QAAQ,EAAE;AACN,gCAAA,WAAW,EAAE,gBAAgB;AAC7B,gCAAA,WAAW,EAAE,qBAAqB;AAClC,gCAAA,cAAc,EAAE,QAAQ;AAC3B,6BAAA;AACJ,yBAAA;qBACJ,EACe,cAAA,EAAA,CAAC,2BAA2B,CAAC,EAAA,aAAA,EAC9B,iBAAiB,CAAC,IAAI,EACzB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA;wBACL,qBAAqB;wBACrB,eAAe;wBACf,iBAAiB;wBACjB,gBAAgB;wBAChB,WAAW;wBACX,mBAAmB;wBACnBA,iBAAmB;wBACnB,eAAe;wBACf,mBAAmB;wBACnB,aAAa;AAChB,qBAAA,EAAA,QAAA,EAAA,26FAAA,EAAA,MAAA,EAAA,CAAA,skBAAA,CAAA,EAAA,CAAA;8BAeM,EAAE,EAAA,CAAA;sBADR,KAAK;gBAKC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAKC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAKC,MAAM,EAAA,CAAA;sBADZ,KAAK;gBAKC,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAKC,IAAI,EAAA,CAAA;sBADV,KAAK;gBAKC,IAAI,EAAA,CAAA;sBADV,KAAK;gBAKC,iBAAiB,EAAA,CAAA;sBADvB,KAAK;gBAKC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAKN,4BAA4B,EAAA,CAAA;sBAD3B,KAAK;gBAKN,SAAS,EAAA,CAAA;sBADR,KAAK;;;MEjJG,sBAAsB,CAAA;wGAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAtB,sBAAsB,EAAA,OAAA,EAAA,CAHrB,yBAAyB,CAAA,EAAA,OAAA,EAAA,CACzB,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAE1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,YAHrB,yBAAyB,CAAA,EAAA,CAAA,CAAA;;4FAG1B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,yBAAyB,CAAC;oBACpC,OAAO,EAAE,CAAC,yBAAyB,CAAC;AACvC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}

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: [] } });
 
 /**