@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1254 @@
+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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * 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: 'e8d5144a4cefeca243ea6e80840e4ff12b9344f0', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: '417cac30b7b535e7367eef280732869cdd984ed1', class: "r-input-date" }, groupAttrs), h("div", { key: 'd7ef5eb79c96c0d8845399e536c356272ab7c03c', class: "r-input-date--legend-container" }, h("legend", { key: '14c195899fb789333bbd07a40ec1db746d004839', class: "r-input-date--legend" }, h("label", { key: 'f6ac0e10142bceefe404a385ac44534d81ae3f98', htmlFor: uniqueId }, label ?
+            h("r-label", Object.assign({}, labelAttr), label)
+            :
+                h("slot", { name: "label" }))), h("slot", { key: 'b3bb261cb82002f7c41470bb9ca09110c6f7a345', name: "popover" })), hint &&
+            h("r-hint", { key: '606d8d0f83416914627b23f901838c55f65b6adc', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '46ca5170c4eafd18464dd7575ab41263907e2116', class: "r-input-date--container" }, h("r-icon", { key: '488dc02a12c354dc9fdd5d814b2c63dbd080175f', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '69ef56323ea2c1d90121dc280cb2072701558064', 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: '918cf85992a45287c77df5f937f82d0f6f316bf1', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '57dbce64441410f59571417fce01213af7ee146f', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: 'e60109ba459f42e391a972cd7fdbd9fba134244f', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '0c5af571965830bffdb226d94e4d2a2f4a158553', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '2b3836138862a6b6538aa75ddc2929b63f85667e', name: "trailing" }))), h("div", { key: 'd07f45f25bd1c6ad19f7feacf24cab515c40aa01', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '7974223f426574a5b6a54bbf773007475dfb6450', 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"
+                        }]
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
+            "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"
+            }];
+    }
+}