@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/datetime-picker/datetime-input/datetime-input.js

@@ -0,0 +1,825 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { compareAsc } from "date-fns/compareAsc";
+import { format } from "date-fns/format";
+import { getHours } from "date-fns/getHours";
+import { getMinutes } from "date-fns/getMinutes";
+import { isValid } from "date-fns/isValid";
+import { parse } from "date-fns/parse";
+import { set } from "date-fns/set";
+import { toDate } from "date-fns/toDate";
+import { dispatchNativeFormEvent } from "../../../shared/utils/event";
+import { resolveSsrLocalDate } from "../../../shared/utils/ssr-date";
+import { normalizeDatetimeInputMode, normalizeDatetimeInputReferenceDate, normalizeDatetimeInputValue, } from "./datetime-input-props-validation";
+/**
+ * ## Design System
+ *
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/datetime-input?tab=designer).
+ *
+ * @part container - Parte para o container base do campo.
+ * @part input - Parte para o campo textual interno.
+ * @part icon - Parte para o ícone de ação (calendário/relógio).
+ */
+export class DatetimeInput {
+    constructor() {
+        /** Valor textual exibido no campo e usado durante a edição manual. */
+        this.inputValue = '';
+        /**
+         * Define o placeholder do campo de entrada.
+         *
+         * @default ''
+         */
+        this.placeholder = '';
+        /**
+         * Define o modo de entrada: `date`, `time` ou `datetime`.
+         *
+         * @default 'datetime'
+         */
+        this.mode = 'datetime';
+        /**
+         * Data de referência que orienta a navegação visual do calendário.
+         *
+         * @default new Date()
+         */
+        this.referenceDate = new Date();
+        /**
+         * Valor selecionado pelo usuário, ou `null` quando nada foi escolhido.
+         *
+         * @default null
+         */
+        this.value = null;
+        /**
+         * Desabilita digitação e abertura do picker quando ativo.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Define se a seleção ocorre por data única ou por intervalo.
+         *
+         * @default 'single'
+         */
+        this.selectionMode = 'single';
+        /**
+         * Data inicial do intervalo quando em modo range.
+         *
+         * @default null
+         */
+        this.rangeStart = null;
+        /**
+         * Data final do intervalo quando em modo range.
+         *
+         * @default null
+         */
+        this.rangeEnd = null;
+        this.handleActionButtonClick = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            this.togglePicker.emit();
+        };
+        /**
+         * Confirma o conteúdo digitado ao perder foco.
+         */
+        this.handleInputBlur = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.commitInputValue();
+        };
+        /**
+         * Atualiza o estado local com o valor digitado no campo.
+         *
+         * @param event - Evento de input disparado pelo campo textual.
+         */
+        this.handleInputChange = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            const input = event.target;
+            this.inputValue = input.value;
+        };
+        /**
+         * Permite confirmar a digitação pressionando Enter.
+         *
+         * @param event - Evento de teclado do campo de entrada.
+         */
+        this.handleInputKeydown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            // Alt+ArrowDown ou F4 abre/fecha o picker (padrão ARIA combobox)
+            if ((event.key === 'ArrowDown' && event.altKey) || event.key === 'F4') {
+                event.preventDefault();
+                this.togglePicker.emit();
+                return;
+            }
+            if (event.key === 'Enter') {
+                this.commitInputValue();
+            }
+        };
+        /**
+         * Evita propagação do clique e solicita a abertura/fechamento do picker.
+         *
+         * @param event - Evento de clique no ícone de ação.
+         */
+        this.handleToggleDropdown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            event.stopPropagation();
+            this.togglePicker.emit();
+        };
+    }
+    handleRangeValueChange(newValue) {
+        if (!newValue)
+            return;
+        this.rangeStart = newValue.start;
+        this.rangeEnd = newValue.end;
+        this.syncInputValueFromProps();
+    }
+    /**
+     * Revalida e reflete no input mudanças externas em `value`.
+     *
+     * @param newValue - Novo valor recebido via prop.
+     */
+    handleValueChange(newValue) {
+        this.ensureValidValue(newValue);
+        this.syncInputValueFromProps();
+    }
+    /**
+     * Garante modo suportado e ajusta máscara/valor textual exibido.
+     *
+     * @param newValue - Novo modo recebido via prop.
+     */
+    handleModeChange(newValue) {
+        this.ensureValidMode(newValue);
+        this.syncInputValueFromProps();
+    }
+    /**
+     * Valida a data de referência e sincroniza o campo quando não há seleção.
+     *
+     * @param newValue - Nova data de referência recebida.
+     */
+    handleReferenceDateChange(newValue) {
+        this.ensureValidReferenceDate(newValue);
+        if (this.value === null) {
+            this.syncInputValueFromProps();
+        }
+    }
+    /**
+     * Sincroniza o input quando o início do range muda.
+     *
+     * @param newValue - Nova data inicial do range.
+     */
+    handleRangeStartChange() {
+        if (this.selectionMode === 'range') {
+            this.syncInputValueFromProps();
+        }
+    }
+    /**
+     * Sincroniza o input quando o fim do range muda.
+     *
+     * @param newValue - Nova data final do range.
+     */
+    handleRangeEndChange() {
+        if (this.selectionMode === 'range') {
+            this.syncInputValueFromProps();
+        }
+    }
+    /**
+     * Valida props iniciais e sincroniza o texto exibido no input.
+     */
+    componentWillLoad() {
+        this.referenceDate = resolveSsrLocalDate(this.el, this.referenceDate);
+        this.ensureValidMode();
+        this.ensureValidReferenceDate();
+        this.ensureValidValue();
+        this.syncInputValueFromProps();
+    }
+    /**
+     * Registra o listener de teclado no botão de ação após o DOM estar disponível.
+     *
+     * O br-button que envolve o slot "action" é focável. Quando Space/Enter é pressionado,
+     * o browser dispara um click sintético. Adicionamos um listener imperativo para
+     * garantir que o clique no botão de ação acione o toggle.
+     */
+    componentDidLoad() {
+        // Tenta encontrar o br-button dentro do br-input que envolve o slot action
+        const brInput = this.el.shadowRoot?.querySelector('br-input');
+        if (!brInput?.shadowRoot)
+            return;
+        const actionButton = brInput.shadowRoot.querySelector('br-button.button-transform');
+        if (!actionButton)
+            return;
+        this.actionButton = actionButton;
+        // Listener para clique no botão de ação (funciona para mouse e Space/Enter via button nativo)
+        actionButton.addEventListener('click', this.handleActionButtonClick);
+    }
+    disconnectedCallback() {
+        this.actionButton?.removeEventListener('click', this.handleActionButtonClick);
+        this.actionButton = undefined;
+    }
+    /**
+     * Retorna o rótulo acessível do botão de alternância do picker.
+     *
+     * @returns Texto anunciado pelo leitor de tela para o ícone de ação.
+     */
+    getToggleAriaLabel() {
+        switch (this.mode) {
+            case 'date':
+                return 'Abrir calendário';
+            case 'time':
+                return 'Abrir seletor de hora';
+            default:
+                return 'Abrir seletor de data e hora';
+        }
+    }
+    /**
+     * Normaliza o modo de operação para um valor suportado.
+     *
+     * @param value - Modo informado externamente.
+     */
+    ensureValidMode(value = this.mode) {
+        const normalizedMode = normalizeDatetimeInputMode(value);
+        if (normalizedMode !== value) {
+            this.mode = normalizedMode;
+        }
+    }
+    /**
+     * Garante que a data de referência seja uma instância válida de `Date`.
+     *
+     * @param value - Data de referência recebida via prop.
+     */
+    ensureValidReferenceDate(value = this.referenceDate) {
+        const normalizedReferenceDate = normalizeDatetimeInputReferenceDate(value);
+        if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+            this.referenceDate = normalizedReferenceDate;
+        }
+    }
+    /**
+     * Normaliza o valor selecionado para `Date` válido ou `null`.
+     *
+     * @param value - Valor recebido via prop.
+     */
+    ensureValidValue(value = this.value) {
+        const normalizedValue = normalizeDatetimeInputValue(value);
+        if (value !== normalizedValue) {
+            this.value = normalizedValue;
+        }
+    }
+    /**
+     * Consolida o texto digitado, tenta analisar e emite o novo estado selecionado.
+     */
+    commitInputValue() {
+        const inputText = this.inputValue.trim();
+        if (inputText === '') {
+            this.value = null;
+            this.dateStateChange.emit({
+                referenceDate: this.referenceDate,
+                value: null,
+            });
+            this.emitNativeValueChange();
+            return;
+        }
+        if (this.selectionMode === 'range' && this.mode === 'date') {
+            const parsedRange = this.parseRangeInput(inputText);
+            if (parsedRange === null)
+                return;
+            const normalizedRange = this.normalizeRangeBounds(parsedRange.start, parsedRange.end);
+            this.rangeValue = normalizedRange;
+            this.inputValue = `${this.formatDateByMode(normalizedRange.start)} - ${this.formatDateByMode(normalizedRange.end)}`;
+            this.value = normalizedRange.end;
+            this.dateStateChange.emit({
+                referenceDate: normalizedRange.end,
+                value: normalizedRange.end,
+                range: normalizedRange,
+            });
+            this.emitNativeValueChange();
+            return;
+        }
+        const parsed = this.parseInputValue(inputText);
+        if (parsed === null)
+            return;
+        const newDate = new Date(parsed);
+        newDate.setSeconds(0, 0);
+        this.inputValue = this.formatDateByMode(newDate);
+        this.value = newDate;
+        this.dateStateChange.emit({
+            referenceDate: newDate,
+            value: newDate,
+        });
+        this.emitNativeValueChange();
+    }
+    emitNativeValueChange() {
+        dispatchNativeFormEvent(this.el, 'input');
+        dispatchNativeFormEvent(this.el, 'change');
+    }
+    /**
+     * Analisa o intervalo no formato `dd/MM/yyyy - dd/MM/yyyy`.
+     *
+     * @param value - Texto de intervalo informado no input.
+     * @returns Intervalo analisado ou `null` quando inválido.
+     */
+    parseRangeInput(value) {
+        const rangeMatch = value.match(/^(.*?)\s*-\s*(.*?)$/);
+        if (rangeMatch === null) {
+            return null;
+        }
+        const startText = rangeMatch[1]?.trim() ?? '';
+        const endText = rangeMatch[2]?.trim() ?? '';
+        if (startText === '' || endText === '') {
+            return null;
+        }
+        const base = this.referenceDate ?? toDate(new Date());
+        const parsedStart = this.parseDateInput(startText, base);
+        const parsedEnd = this.parseDateInput(endText, base);
+        if (parsedStart === null || parsedEnd === null) {
+            return null;
+        }
+        return { start: parsedStart, end: parsedEnd };
+    }
+    /** Normaliza os limites do intervalo para garantir ordem cronológica. */
+    normalizeRangeBounds(start, end) {
+        return compareAsc(start, end) <= 0 ? { start, end } : { start: end, end: start };
+    }
+    /**
+     * Sincroniza o texto do campo com as props atuais de valor e modo.
+     */
+    syncInputValueFromProps() {
+        if (this.selectionMode === 'range') {
+            if (this.rangeStart === null || this.rangeEnd === null) {
+                this.inputValue = '';
+                return;
+            }
+            const startFormatted = this.formatDateByMode(this.rangeStart);
+            const endFormatted = this.formatDateByMode(this.rangeEnd);
+            this.inputValue = `${startFormatted} - ${endFormatted}`;
+            return;
+        }
+        if (this.value === null) {
+            this.inputValue = '';
+            return;
+        }
+        this.inputValue = this.formatDateByMode(this.value);
+    }
+    /**
+     * Formata uma data de acordo com o modo atual do componente.
+     *
+     * @param date - Data a ser formatada para exibição no input.
+     * @returns Representação textual da data/hora no padrão esperado.
+     */
+    formatDateByMode(date) {
+        switch (this.mode) {
+            case 'date':
+                return format(date, 'dd/MM/yyyy');
+            case 'time':
+                return format(date, 'HH:mm');
+            default:
+                return format(date, 'dd/MM/yyyy HH:mm');
+        }
+    }
+    /**
+     * Retorna as classes CSS base aplicadas ao host visual do componente.
+     */
+    getCssClassMap() {
+        return {
+            'br-datetime-input': true,
+        };
+    }
+    /**
+     * Seleciona o ícone do campo conforme o modo de entrada ativo.
+     *
+     * @returns Nome do ícone usado na ação lateral do input.
+     */
+    getInputIcon() {
+        switch (this.mode) {
+            case 'time':
+                return 'fa7-solid:clock';
+            default:
+                return 'fa6-solid:calendar-days';
+        }
+    }
+    /**
+     * Converte o texto digitado em `Date` com base no modo configurado.
+     *
+     * @param value - Texto informado pelo usuário no input.
+     * @returns Data convertida em objeto `Date` ou `null` quando inválida.
+     */
+    parseInputValue(value) {
+        const base = this.value ?? this.referenceDate ?? toDate(new Date());
+        switch (this.mode) {
+            case 'date':
+                return this.parseDateInput(value, base);
+            case 'time':
+                return this.parseTimeInput(value, base);
+            case 'datetime':
+                return this.parseDateTimeInput(value, base);
+            default:
+                return null;
+        }
+    }
+    /**
+     * Faz parse de uma data no formato `dd/MM/yyyy`, preservando hora e minuto base.
+     *
+     * @param value - Texto de data digitado pelo usuário.
+     * @param base - Data base usada para completar informações de tempo.
+     * @returns Data válida normalizada ou `null` quando o parse falhar.
+     */
+    parseDateInput(value, base) {
+        const parsedDate = parse(value, 'dd/MM/yyyy', base);
+        if (!isValid(parsedDate))
+            return null;
+        return set(parsedDate, {
+            hours: getHours(base),
+            minutes: getMinutes(base),
+            seconds: 0,
+            milliseconds: 0,
+        });
+    }
+    /**
+     * Faz parse de hora no formato `HH:mm`, preservando o dia da data base.
+     *
+     * @param value - Texto de hora digitado pelo usuário.
+     * @param base - Data base usada para manter dia, mês e ano.
+     * @returns Data válida com hora ajustada ou `null` quando inválida.
+     */
+    parseTimeInput(value, base) {
+        const parsedTime = parse(value, 'HH:mm', base);
+        if (!isValid(parsedTime))
+            return null;
+        return set(base, {
+            hours: getHours(parsedTime),
+            minutes: getMinutes(parsedTime),
+            seconds: 0,
+            milliseconds: 0,
+        });
+    }
+    /**
+     * Faz parse de data e hora completas, com fallback para entradas parciais.
+     *
+     * @param value - Texto digitado no input.
+     * @param base - Data base usada como contexto para completar o parse.
+     * @returns Data válida a partir da entrada ou `null` quando não reconhecida.
+     */
+    parseDateTimeInput(value, base) {
+        // data + hora
+        const full = parse(value, 'dd/MM/yyyy HH:mm', base);
+        if (isValid(full))
+            return full;
+        // so data -> hora atual
+        const date = this.parseDateInput(value, base);
+        if (date !== null) {
+            return set(date, {
+                hours: getHours(base),
+                minutes: getMinutes(base),
+                seconds: 0,
+                milliseconds: 0,
+            });
+        }
+        // so hora -> data atual
+        return this.parseTimeInput(value, base);
+    }
+    /**
+     * Renderiza o campo textual e o ícone de ação do datetime input.
+     */
+    renderInputField() {
+        return (h("br-input", { type: "text", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, actionLabel: this.getToggleAriaLabel(), onInput: this.handleInputChange, onBlur: this.handleInputBlur, onKeyDown: this.handleInputKeydown, "aria-label": this.getInputAriaLabel(), part: "input" }, h("br-icon", { slot: "action", iconName: this.getInputIcon(), width: "16", height: "16", "aria-hidden": "true", onClick: this.handleToggleDropdown, part: "icon" })));
+    }
+    /**
+     * Retorna o rótulo acessível do campo de entrada de acordo com o modo ativo.
+     *
+     * @returns Texto anunciado pelo leitor de tela para identificar o campo.
+     */
+    getInputAriaLabel() {
+        switch (this.mode) {
+            case 'date':
+                return 'Campo de data';
+            case 'time':
+                return 'Campo de horário';
+            default:
+                return 'Campo de data e hora';
+        }
+    }
+    /**
+     * Renderização principal do componente.
+     */
+    render() {
+        return (h(Host, { key: '81cb75473b92df9e9026cae60361b30243f81e7c' }, h("div", { key: '009535a00998695c36ba186dba1410dac4459250', class: this.getCssClassMap(), part: "container" }, this.renderInputField())));
+    }
+    static get is() { return "br-datetime-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datetime-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datetime-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "Define o placeholder do campo de entrada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerMode",
+                    "resolved": "\"date\" | \"datetime\" | \"time\"",
+                    "references": {
+                        "DatetimePickerMode": {
+                            "location": "import",
+                            "path": "../datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerMode",
+                            "referenceLocation": "DatetimePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'datetime'"
+                        }],
+                    "text": "Define o modo de entrada: `date`, `time` ou `datetime`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'datetime'"
+            },
+            "referenceDate": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "new Date()"
+                        }],
+                    "text": "Data de refer\u00EAncia que orienta a navega\u00E7\u00E3o visual do calend\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Date()"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Valor selecionado pelo usu\u00E1rio, ou `null` quando nada foi escolhido."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Desabilita digita\u00E7\u00E3o e abertura do picker quando ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatetimePickerSelectionMode",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "DatetimePickerSelectionMode": {
+                            "location": "import",
+                            "path": "../datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerSelectionMode",
+                            "referenceLocation": "DatetimePickerSelectionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'single'"
+                        }],
+                    "text": "Define se a sele\u00E7\u00E3o ocorre por data \u00FAnica ou por intervalo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
+            },
+            "rangeStart": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Data inicial do intervalo quando em modo range."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "rangeEnd": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Data final do intervalo quando em modo range."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "rangeValue": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerDateRange",
+                    "resolved": "{ start: Date; end: Date; }",
+                    "references": {
+                        "DatetimePickerDateRange": {
+                            "location": "import",
+                            "path": "../datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDateRange",
+                            "referenceLocation": "DatetimePickerDateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intervalo controlado no modo `range`."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateStateChange",
+                "name": "dateStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite quando o valor \u00E9 alterado via input ou parsing."
+                },
+                "complexType": {
+                    "original": "DatetimePickerDateState",
+                    "resolved": "{ referenceDate: Date; value: Date; range?: DatetimePickerDateRange; rangeDates?: DatetimePickerRangeDateState[]; }",
+                    "references": {
+                        "DatetimePickerDateState": {
+                            "location": "import",
+                            "path": "../datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDateState",
+                            "referenceLocation": "DatetimePickerDateState"
+                        }
+                    }
+                }
+            }, {
+                "method": "togglePicker",
+                "name": "togglePicker",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Solicita ao componente pai a altern\u00E2ncia da abertura do picker."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rangeValue",
+                "methodName": "handleRangeValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }, {
+                "propName": "referenceDate",
+                "methodName": "handleReferenceDateChange"
+            }, {
+                "propName": "rangeStart",
+                "methodName": "handleRangeStartChange"
+            }, {
+                "propName": "rangeEnd",
+                "methodName": "handleRangeEndChange"
+            }];
+    }
+}