@riverty/web-components 6.2.1 → 6.3.0

package/dist/collection/components/input-date/input-date.js

@@ -1,1228 +0,0 @@
-import { Host, h, Fragment } from "@stencil/core";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import { appendControlToFormData } from "../../utils/formData";
-export class InputDate {
-    constructor() {
-        /** Specifies a date format */
-        this.format = 'DD/MM/YYYY';
-        /** The value of the date input */
-        this.value = '';
-        /** Defines label for the input for the day */
-        this.dayAriaLabel = 'Day';
-        /** Defines label for the input for the month */
-        this.monthAriaLabel = 'Month';
-        /** Defines label for the input for the year */
-        this.yearAriaLabel = 'Year';
-        /** Save current value */
-        this.currentValues = {};
-        /** Defines date delimiter */
-        this.delimiter = '/';
-        /** Validity state passed from validateFormElement function after validation */
-        this.validityState = '';
-        /** Validity message passed from validateFormElement function after validation */
-        this.validityMessage = '';
-        /** Defines if the component has been touched by user */
-        this.touched = false;
-        /** Defines if the value has been changed by user interaction */
-        this.dirty = false;
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        this.uniqueId = `r-input-date-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.nativeElement = null;
-        this.getDateComponent = (input) => {
-            switch (input.toUpperCase()) {
-                case 'DD':
-                    return this.currentValues.day;
-                case 'MM':
-                case 'M':
-                    return this.currentValues.month;
-                case 'YYYY':
-                case 'YY':
-                    return this.currentValues.year;
-                default:
-                    return '';
-            }
-        };
-        this.setDateComponent = (input, value) => {
-            switch (input.toUpperCase()) {
-                case 'DD':
-                    this.currentValues.day = value;
-                    break;
-                case 'MM':
-                case 'M':
-                    this.currentValues.month = value;
-                    break;
-                case 'YYYY':
-                case 'YY':
-                    this.currentValues.year = value;
-                    break;
-                default:
-                    return '';
-            }
-        };
-        this.getInputAttrs = (input) => {
-            const label = (type) => {
-                switch (type) {
-                    case 'DD':
-                        return this.dayAriaLabel;
-                    case 'MM':
-                    case 'M':
-                        return this.monthAriaLabel;
-                    case 'YYYY':
-                    case 'YY':
-                        return this.yearAriaLabel;
-                    default:
-                        return '';
-                }
-            };
-            const type = input.toUpperCase();
-            return {
-                placeholder: input,
-                maxlength: input.length > 2 ? input.length : 2,
-                size: input.length,
-                inputmode: 'numeric',
-                disabled: this.disabled,
-                required: this.required,
-                readonly: this.readonly,
-                'aria-label': label(type),
-                'data-date-type': type
-            };
-        };
-        this.getDelimiter = (value) => {
-            var _a;
-            return ((_a = value.replace(/[^.\-/]/g, '')) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '/';
-        };
-        this.updateValue = () => {
-            if (this.readonly)
-                return;
-            this.delimiter = this.getDelimiter(this.format);
-            this.value = this.value ? this.inputOrder.map((input) => this.getDateComponent(input)).join(this.delimiter) : '';
-        };
-        this.onHostClick = () => {
-            const input = this.firstEmptyInput || this.inputs[this.inputs.length - 1];
-            input === null || input === void 0 ? void 0 : input.focus();
-        };
-        this.onInputClick = (event) => {
-            event.stopPropagation();
-        };
-        this.createKeyDownHandler = (index) => {
-            return (e) => this.handleKeyDown(index, e);
-        };
-        this.handleKeyDown = (index, event) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (this.readonly)
-                return;
-            if (event.code === 'Enter') {
-                this.touched = true;
-                this.validateFormElement(this.nativeElement);
-                if (this.invalid && !this.isNoValidate)
-                    return;
-                const submitEl = this.host.querySelector('[type="submit"]') ||
-                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
-                if (submitEl && 'triggerClick' in submitEl) {
-                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
-                }
-                else {
-                    (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.requestSubmit();
-                }
-            }
-            if (event.code === 'Backspace') {
-                const cursorPosition = (_c = this.inputs[index]) === null || _c === void 0 ? void 0 : _c.selectionStart;
-                if (cursorPosition === 0 && index > 0) {
-                    (_d = this.inputs[index - 1]) === null || _d === void 0 ? void 0 : _d.focus();
-                }
-            }
-            if (event.code === 'ArrowLeft') {
-                const input = this.inputs[index];
-                const cursorPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
-                if (cursorPosition === 0 && index > 0) {
-                    const previousInputValue = this.inputs[index - 1].value;
-                    const length = previousInputValue === null || previousInputValue === void 0 ? void 0 : previousInputValue.length;
-                    (_e = this.inputs[index - 1]) === null || _e === void 0 ? void 0 : _e.focus();
-                    if (length) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = this.inputs[index - 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(length, length);
-                        }, 0);
-                    }
-                }
-            }
-            if (event.code === 'ArrowRight') {
-                const input = this.inputs[index];
-                const cursorPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
-                const value = input === null || input === void 0 ? void 0 : input.value;
-                if ((!value || cursorPosition === value.length) && index < this.inputOrder.length - 1) {
-                    (_f = this.inputs[index + 1]) === null || _f === void 0 ? void 0 : _f.focus();
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.inputs[index + 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 0);
-                    }, 0);
-                }
-            }
-        };
-        this.handlePaste = (event) => {
-            if (this.readonly)
-                return;
-            this.value = event.clipboardData.getData('text');
-            this.touched = true;
-            this.dirty = true;
-            event.preventDefault();
-        };
-        this.createInputHandler = (input, index) => {
-            return (e) => this.handleInput(input, index, e);
-        };
-        this.handleInput = (input, index, event) => {
-            var _a, _b, _c;
-            if (this.readonly)
-                return;
-            const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
-            event.target.value = value;
-            this.setDateComponent(input, value);
-            this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
-            if ((value === null || value === void 0 ? void 0 : value.length) === ((_b = this.inputs[index]) === null || _b === void 0 ? void 0 : _b.maxLength) &&
-                index < this.inputOrder.length - 1) {
-                (_c = this.inputs[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
-            }
-            this.touched = true;
-            this.dirty = true;
-            this.rInput.emit({ element: this.host, value: this.value });
-            this.validateFormElement(this.nativeElement);
-        };
-        this.createChangeHandler = (input) => {
-            return (e) => this.handleChange(input, e);
-        };
-        this.handleChange = (input, event) => {
-            var _a;
-            if (this.readonly)
-                return;
-            const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
-            event.target.value = value;
-            this.setDateComponent(input, value);
-            this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
-            this.touched = true;
-            this.dirty = true;
-            this.rChange.emit({ element: this.host, value: this.value });
-            this.validateFormElement(this.nativeElement);
-        };
-        this.handleBlur = () => {
-            this.touched = true;
-            this.validateFormElement(this.nativeElement);
-        };
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            if (this.required && element.value.length === 0) {
-                validityState = 'valueMissing';
-                validityMessage = this.valueMissingMessage;
-                return { validityState, validityMessage };
-            }
-            const valid = this.value ? dayjs(this.value, this.format, true).isValid() : true;
-            if (!valid) {
-                validityState = 'invalid';
-                validityMessage = this.invalidDateMessage;
-                return { validityState, validityMessage };
-            }
-            // Check min/max constraints only if date is valid and has a value
-            // Note: min and max are expected to be in the same format as this.format
-            // If format changes, the developer should update min/max accordingly
-            if (this.value && valid) {
-                const currentDate = dayjs(this.value, this.format, true);
-                // Check minimum date constraint
-                if (this.min) {
-                    const minDate = dayjs(this.min, this.format, true);
-                    if (minDate.isValid() && currentDate.isBefore(minDate, 'day')) {
-                        validityState = 'rangeUnderflow';
-                        validityMessage = this.rangeUnderflowMessage;
-                        return { validityState, validityMessage };
-                    }
-                }
-                // Check maximum date constraint
-                if (this.max) {
-                    const maxDate = dayjs(this.max, this.format, true);
-                    if (maxDate.isValid() && currentDate.isAfter(maxDate, 'day')) {
-                        validityState = 'rangeOverflow';
-                        validityMessage = this.rangeOverflowMessage;
-                        return { validityState, validityMessage };
-                    }
-                }
-            }
-            validityState = 'valid';
-            return { validityState, validityMessage };
-        };
-        this.validateFormElement = (element) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData(element);
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.onResetForm = async () => {
-            if (this.readonly)
-                return;
-            this.reset();
-            this.validityState = null;
-            this.validityMessage = null;
-            this.invalid = null;
-            this.valid = null;
-            const { host, value } = this;
-            this.rReset.emit({ element: host, value });
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            if (this.disabled)
-                return;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.setCurrentValues = () => {
-            var _a;
-            const valueDelimiter = this.getDelimiter(this.value);
-            const valueInOrder = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.split(valueDelimiter)) || [];
-            this.value = valueInOrder.join(this.delimiter);
-            this.inputOrder.forEach((el, i) => {
-                this.setDateComponent(el, valueInOrder[i] || '');
-            });
-        };
-    }
-    handleFormatChange() {
-        this.updateValue();
-    }
-    handleValueChange() {
-        this.setCurrentValues();
-        if (this.touched)
-            this.validateFormElement(this.nativeElement);
-    }
-    /** Get the date value */
-    async getValue() {
-        return this.value;
-    }
-    /** Sets the date value */
-    async setValue(value) {
-        this.nativeElement.value = value;
-        this.value = value;
-    }
-    /** Gets the current date format */
-    async getFormat() {
-        return this.format;
-    }
-    /** Sets the date format */
-    async setFormat(format) {
-        this.format = format;
-    }
-    /** Gets the touched state (whether user has interacted with the input) */
-    async isTouched() {
-        return this.touched;
-    }
-    /** Gets the dirty state (whether value has been changed by user) */
-    async isDirty() {
-        return this.dirty;
-    }
-    /** Resets touched and dirty states to pristine (untouched/clean) */
-    async markAsPristine() {
-        this.touched = false;
-        this.dirty = false;
-    }
-    /**
-     * Resets the component by clearing all input values and focusing the first input.
-     * @returns Promise that resolves when reset is complete
-     */
-    async reset() {
-        if (this.readonly)
-            return;
-        this.markAsPristine();
-        this.validityState = null;
-        this.validityMessage = null;
-        this.value = this.initial['value'];
-        this.invalid = this.initial['invalid'];
-        this.format = this.initial['format'];
-        this.valid = !this.invalid;
-    }
-    /**
-     * Validates the input date without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the input date is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    get inputs() {
-        return Array.from(this.host.shadowRoot.querySelectorAll('input[data-date-type]'));
-    }
-    get inputOrder() {
-        return this.format.split(this.delimiter);
-    }
-    get message() {
-        if (this.invalid && this.error) {
-            return this.error;
-        }
-        return (this.validityState && this.validityState !== 'valid' ?
-            (this.customErrorMessage || this.validityMessage)
-            : null);
-    }
-    get hasMessage() {
-        return this.message !== null;
-    }
-    get ariaDescribedBy() {
-        const messageId = this.message ? `${this.uniqueId}-message` : null;
-        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /**
-     * Determine whether this element should be ignored
-     * during Constraint Validation API validation.
-     * */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            this.disabled ||
-            false);
-    }
-    get firstEmptyInput() {
-        return this.inputs.find(input => !input.value) || null;
-    }
-    get hasTrailingSlot() {
-        return !!this.host.querySelector('[slot="trailing"]');
-    }
-    componentWillLoad() {
-        dayjs.extend(customParseFormat);
-        this.delimiter = this.getDelimiter(this.format);
-        this.initial['value'] = this.value;
-        this.initial['invalid'] = this.invalid;
-        this.initial['format'] = this.format;
-        this.setCurrentValues();
-    }
-    connectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, uniqueId, invalid, valid, readonly } = this;
-        const groupAttrs = {
-            'aria-invalid': `${invalid || false}`,
-            'aria-describedby': this.ariaDescribedBy
-        };
-        const dateInputAttrs = {
-            id: uniqueId,
-            form,
-            name,
-            required,
-            disabled,
-            readonly,
-            'aria-describedby': this.ariaDescribedBy
-        };
-        const labelAttr = label ? {
-            id: `${uniqueId}-label`,
-            fieldIndicator
-        } : {};
-        return (h(Host, { key: '1fe0cc5598857ca719ef334807da6e2540c4a399', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'a7ad4075376fc3d08cc59be2f4340c9327e05f82', class: "r-input-date" }, groupAttrs), h("div", { key: 'ec18205fad6069d54715807529a145d03f8bdebb', class: "r-input-date--legend-container" }, h("legend", { key: '59c4384b37a3a845eb5cb0c2955b8a12777b2320', class: "r-input-date--legend" }, h("label", { key: '8b5502aeb26daa26d3f32d3669406b87e2eb29ca', htmlFor: uniqueId }, label ?
-            h("r-label", Object.assign({}, labelAttr), label)
-            :
-                h("slot", { name: "label" }))), h("slot", { key: '7a5b5ad6401bb8199d94c36383e4219fd3556db5', name: "popover" })), hint &&
-            h("r-hint", { key: '1226c6002eb581811e419db7518e02d5fbc18b5b', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '5581e3cbb731a4a23a243118f2840563352e6df1', class: "r-input-date--container" }, h("r-icon", { key: 'e8b52fc6fcb1d4f22fd24e7e26e55218a1b6ee80', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '4b97bab9a65f4a9d1958287f23940b7ee4d7143e', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'fdebeb8a48fd0fc10233166db94e928fc4b424de', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '4324ae4593512d0bd16f843e60c2058859cc1ba1', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '673fb144899c62d9b5d9267b35ce1f197b1f6549', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: '26828285dad4ccae6ebc8d29a2f4e1e6a5d92a6d', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'bda392fa837a8fba6917fed22ff356c4e6f15b85', name: "trailing" }))), h("div", { key: 'a6d891a2f2bf3456d5cbb3ec27c6cef0bce7d434', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '8a3316ce851bfa02b9ca1a1fad8fde6f48a7fab6', variant: "error" }, this.message)))));
-    }
-    static get is() { return "r-input-date"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["input-date.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["input-date.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "form": {
-                "type": "string",
-                "attribute": "form",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "novalidate": {
-                "type": "boolean",
-                "attribute": "novalidate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if element must be ignored during validation of the form elements"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies a name for a input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "format": {
-                "type": "string",
-                "attribute": "format",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies a date format"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'DD/MM/YYYY'"
-            },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the date input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text on the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "fieldIndicator": {
-                "type": "string",
-                "attribute": "field-indicator",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text of an additional marker in the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "hint": {
-                "type": "string",
-                "attribute": "hint",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional hint, visually presented under the input,\ngiving additional context to the user"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "attribute": "full-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines if the component suppose to occupy 100% width"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "dayAriaLabel": {
-                "type": "string",
-                "attribute": "day-aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines label for the input for the day"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'Day'"
-            },
-            "monthAriaLabel": {
-                "type": "string",
-                "attribute": "month-aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines label for the input for the month"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'Month'"
-            },
-            "yearAriaLabel": {
-                "type": "string",
-                "attribute": "year-aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines label for the input for the year"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'Year'"
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual indication of valid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Validity indicator, serving to change UI of the component"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "error": {
-                "type": "string",
-                "attribute": "error",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The way to provide error message separately from Constraint Validation API."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Prevents user interaction and applies disabled style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "readonly": {
-                "type": "boolean",
-                "attribute": "readonly",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies that an input is required/must be filled out"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "valueMissingMessage": {
-                "type": "string",
-                "attribute": "value-missing-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "invalidDateMessage": {
-                "type": "string",
-                "attribute": "invalid-date-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom error message displayed when date is not valid."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "min": {
-                "type": "string",
-                "attribute": "min",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `min` is also updated to match the new format."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "max": {
-                "type": "string",
-                "attribute": "max",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `max` is also updated to match the new format."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "rangeUnderflowMessage": {
-                "type": "string",
-                "attribute": "range-underflow-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom error message displayed when date is before the minimum date."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "rangeOverflowMessage": {
-                "type": "string",
-                "attribute": "range-overflow-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom error message displayed when date is after the maximum date."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "customErrorMessage": {
-                "type": "string",
-                "attribute": "custom-error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom error message displayed for any validation failures in the input."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "currentValues": {},
-            "delimiter": {},
-            "validityState": {},
-            "validityMessage": {},
-            "touched": {},
-            "dirty": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "rValidate",
-                "name": "rValidate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits event after each validation"
-                },
-                "complexType": {
-                    "original": "{\n    state: string,\n    message: string\n  }",
-                    "resolved": "{ state: string; message: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "rInput",
-                "name": "rInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rInput' event when value of the component is changing"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputDateElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputDateElement; value: any; }",
-                    "references": {
-                        "HTMLRInputDateElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputDateElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rChange",
-                "name": "rChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rChange' event when value of the component has been changed"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputDateElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputDateElement; value: any; }",
-                    "references": {
-                        "HTMLRInputDateElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputDateElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rReset",
-                "name": "rReset",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rReset' event when form containing the component was reset"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputDateElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputDateElement; value: any; }",
-                    "references": {
-                        "HTMLRInputDateElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputDateElement"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Get the date value",
-                    "tags": []
-                }
-            },
-            "setValue": {
-                "complexType": {
-                    "signature": "(value: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the date value",
-                    "tags": []
-                }
-            },
-            "getFormat": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Gets the current date format",
-                    "tags": []
-                }
-            },
-            "setFormat": {
-                "complexType": {
-                    "signature": "(format: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "format",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the date format",
-                    "tags": []
-                }
-            },
-            "isTouched": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Gets the touched state (whether user has interacted with the input)",
-                    "tags": []
-                }
-            },
-            "isDirty": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Gets the dirty state (whether value has been changed by user)",
-                    "tags": []
-                }
-            },
-            "markAsPristine": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Resets touched and dirty states to pristine (untouched/clean)",
-                    "tags": []
-                }
-            },
-            "reset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Resets the component by clearing all input values and focusing the first input.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "Promise that resolves when reset is complete"
-                        }]
-                }
-            },
-            "checkValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validates the input date without triggering UI and returns a boolean indicating its validity.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the input date is valid."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "format",
-                "methodName": "handleFormatChange"
-            }, {
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }];
-    }
-}