@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1077 @@
+import { Host, h } from "@stencil/core";
+import { appendControlToFormData } from "../../utils/formData";
+export class InputPassword {
+    constructor() {
+        /** The value of the password input */
+        this.value = '';
+        /**
+         * Defines label for characters show button.
+         * */
+        this.showPasswordAriaLabel = 'Show password.';
+        /**
+         * Defines label for characters hide button.
+         * */
+        this.hidePasswordAriaLabel = 'Hide password.';
+        /** Custom message when the password is shown to alert screen reader users. */
+        this.shownPasswordMessage = "Your password is shown.";
+        /** Custom message when the password is hidden to alert screen reader users. */
+        this.hiddenPasswordMessage = "Your password is hidden.";
+        this.showed = false;
+        /** Validity state passed from validateFormElement function after validation */
+        this.validityState = '';
+        /** Validity message passed from validateFormElement function after validation */
+        this.validityMessage = '';
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        this.onShowClick = (event) => {
+            event.stopPropagation();
+            this.toggleShow();
+        };
+        this.alertOnPasswordVisibilityChange = () => {
+            this.passwordVisibilityChangeAlertContainer.innerText = this.showed ? this.shownPasswordMessage : this.hiddenPasswordMessage;
+            this.passwordVisibilityTimer = setTimeout(() => {
+                this.passwordVisibilityChangeAlertContainer.innerText = '';
+                clearTimeout(this.passwordVisibilityTimer);
+            }, 2000);
+        };
+        this.onInput = (event) => {
+            if (this.readonly)
+                return;
+            this.value = event.detail.value;
+            const { host, value } = this;
+            this.rInput.emit({ element: host, value });
+        };
+        this.onChange = (event) => {
+            if (this.readonly)
+                return;
+            this.value = event.detail.value;
+            const { host, value } = this;
+            this.rChange.emit({ element: host, value });
+        };
+        this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
+            for (const state in element.validity) {
+                if (element.validity[state]) {
+                    validityState = state;
+                    if (this[state + 'Message']) {
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
+                    }
+                    validityMessage = element.validationMessage;
+                }
+            }
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            if (this.error)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element.shadowRoot.querySelector('input'));
+            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.contributeToFormData = (event) => {
+            appendControlToFormData(this.nativeElement || this.host, event.formData);
+        };
+        this.onResetForm = () => {
+            if (this.readonly)
+                return;
+            this.validityState = null;
+            this.validityMessage = null;
+            this.value = this.initial['value'];
+            this.invalid = this.initial['invalid'];
+            this.valid = !this.invalid;
+            const { host, value } = this;
+            this.rReset.emit({ element: host, value });
+        };
+        this.onSubmitForm = async (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateFormElement(this.nativeElement);
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.handleKeyup = async (event) => {
+            var _a, _b;
+            if (this.readonly)
+                return;
+            if (event.code !== 'Enter')
+                return;
+            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();
+            }
+        };
+        this.handleBlur = () => {
+            if (this.readonly)
+                return;
+            this.validateFormElement(this.nativeElement);
+        };
+    }
+    /**
+     * Toggle password text visibility.
+     * */
+    async toggleShow() {
+        this.showed ? await this.hidePassword() : await this.showPassword();
+    }
+    /**
+     * Show password text.
+     * */
+    async showPassword() {
+        this.showed = true;
+        this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: true });
+    }
+    /**
+     * Hide password text.
+     * */
+    async hidePassword() {
+        this.showed = false;
+        this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: false });
+    }
+    /** Get the input value */
+    async getValue() {
+        return this.value || '';
+    }
+    /** Set the input value */
+    async setValue(value) {
+        if (this.readonly)
+            return;
+        this.value = value;
+        this.validateFormElement(this.nativeElement);
+    }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * Validates the input password without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input password is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement.shadowRoot.querySelector('input'));
+        return validityState === 'valid';
+    }
+    /** 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 ||
+            false);
+    }
+    get hasError() {
+        var _a;
+        return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    get hasValidationError() {
+        var _a, _b;
+        return this.validityState && this.validityState !== 'valid' && (!!((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = this.validityMessage) === null || _b === void 0 ? void 0 : _b.length));
+    }
+    get hasMessage() {
+        return this.hasError || this.hasValidationError;
+    }
+    componentWillLoad() {
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+    }
+    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 { name, placeholder, required, minlength, maxlength, pattern, fieldIndicator, value, disabled, form, invalid, valid, hint, label, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly, passwordrules, autocomplete, tooLongMessage, tooShortMessage, patternMismatchMessage } = this;
+        const inputAttrs = {
+            name,
+            placeholder,
+            required,
+            minlength,
+            maxlength,
+            pattern,
+            fieldIndicator,
+            value,
+            disabled,
+            form,
+            invalid,
+            valid,
+            hint,
+            label,
+            fullWidth,
+            novalidate: true,
+            readonly,
+            passwordrules,
+            autocomplete,
+            tooLongMessage,
+            tooShortMessage,
+            patternMismatchMessage
+        };
+        return (h(Host, { key: '197cfacad4b600eb5c348d496b7a406daf664202' }, h("r-input", Object.assign({ key: 'f9f1fae507ed66bfb309e1765ae266d7c4e91962' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: 'e8ddd11585c68f22b951cf2a7fce1c7e8b5da0d2', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '39ecae0c2028d64e1afcf1e84b1dd27931e17227', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'de56d2a8366b2687ea3d2be99f1c1ab49275e0e3', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            h("r-hint", { key: '91c2c93dd827ac3c0b233217dc0aa26fc3a55f18', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'faa2b8b1ff5af58e6524a9ea3c5fe08a446e6ff4', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+    }
+    static get is() { return "r-input-password"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-password.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-password.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
+            },
+            "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 password input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of a input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "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
+            },
+            "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 input 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
+            },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length (enforced by native input)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum character length (validation only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "pattern": {
+                "type": "string",
+                "attribute": "pattern",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regex pattern the value must match (string form)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "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`) within Constrain Validation API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooLongMessage": {
+                "type": "string",
+                "attribute": "too-long-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for `tooLong`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooShortMessage": {
+                "type": "string",
+                "attribute": "too-short-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for `tooShort`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "patternMismatchMessage": {
+                "type": "string",
+                "attribute": "pattern-mismatch-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for `patternMismatch`."
+                },
+                "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
+            },
+            "showPasswordAriaLabel": {
+                "type": "string",
+                "attribute": "show-password-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines label for characters show button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Show password.'"
+            },
+            "hidePasswordAriaLabel": {
+                "type": "string",
+                "attribute": "hide-password-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines label for characters hide button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Hide password.'"
+            },
+            "shownPasswordMessage": {
+                "type": "string",
+                "attribute": "shown-password-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message when the password is shown to alert screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Your password is shown.\""
+            },
+            "hiddenPasswordMessage": {
+                "type": "string",
+                "attribute": "hidden-password-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message when the password is hidden to alert screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Your password is hidden.\""
+            },
+            "passwordrules": {
+                "type": "string",
+                "attribute": "passwordrules",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Safari-specific password rules for strong password generation.\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nExample: \"minlength: 8; required: lower; required: upper; required: digit; required: special;\"\nNote: This attribute is Safari-specific and will be ignored by other browsers.\nSee: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "autocomplete": {
+                "type": "string",
+                "attribute": "autocomplete",
+                "mutable": false,
+                "complexType": {
+                    "original": "PasswordAutocomplete",
+                    "resolved": "\"current-password\" | \"new-password\" | \"off\"",
+                    "references": {
+                        "PasswordAutocomplete": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input-password/exports.ts::PasswordAutocomplete"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "**Usage Guidelines:**\n- `'current-password'`: Use in login forms where users enter their existing password\n- `'new-password'`: Use in registration forms or password change forms for the new password field\n- `'off'`: Disable autofill in sensitive contexts where password managers should not suggest values\n\n**Common Patterns:**\n```tsx\n// Login form\n<r-input-password autocomplete=\"current-password\" />\n\n// Registration form\n<r-input-password autocomplete=\"new-password\" />\n\n// Sensitive form (e.g., admin panel)\n<r-input-password autocomplete=\"off\" />\n```"
+                        }],
+                    "text": "Password-specific autocomplete behavior for browser password managers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showed": {},
+            "validityState": {},
+            "validityMessage": {},
+            "passwordVisibilityTimer": {}
+        };
+    }
+    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: HTMLRInputPasswordElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRInputPasswordElement; value: any; }",
+                    "references": {
+                        "HTMLRInputPasswordElement": {
+                            "location": "global",
+                            "id": "global::HTMLRInputPasswordElement"
+                        }
+                    }
+                }
+            }, {
+                "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: HTMLRInputPasswordElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRInputPasswordElement; value: any; }",
+                    "references": {
+                        "HTMLRInputPasswordElement": {
+                            "location": "global",
+                            "id": "global::HTMLRInputPasswordElement"
+                        }
+                    }
+                }
+            }, {
+                "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: HTMLRInputPasswordElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRInputPasswordElement; value: any; }",
+                    "references": {
+                        "HTMLRInputPasswordElement": {
+                            "location": "global",
+                            "id": "global::HTMLRInputPasswordElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rVisibilityChange",
+                "name": "rVisibilityChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits 'rVisibilityChange' event when password visibility is toggled"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRInputPasswordElement,\n    visible: boolean\n  }",
+                    "resolved": "{ element: HTMLRInputPasswordElement; visible: boolean; }",
+                    "references": {
+                        "HTMLRInputPasswordElement": {
+                            "location": "global",
+                            "id": "global::HTMLRInputPasswordElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleShow": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle password text visibility.",
+                    "tags": []
+                }
+            },
+            "showPassword": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show password text.",
+                    "tags": []
+                }
+            },
+            "hidePassword": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hide password text.",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the input 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": "Set the input value",
+                    "tags": []
+                }
+            },
+            "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 password without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the input password is valid."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}