@riverty/web-components 6.2.1 → 6.3.0

package/dist/esm/r-input-password.entry.js

@@ -1,263 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
-
-const inputPasswordCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-input--validation-icon--display:none}:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])) r-icon-button{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
-
-const InputPassword = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rValidate = createEvent(this, "rValidate");
-        this.rInput = createEvent(this, "rInput");
-        this.rChange = createEvent(this, "rChange");
-        this.rReset = createEvent(this, "rReset");
-        this.rVisibilityChange = createEvent(this, "rVisibilityChange");
-        /** 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 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 !== '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: 'c4f877854375e558677df5f33682e37e048382be' }, h("r-input", Object.assign({ key: '97941b514a5f4f48b7c043ea0641cc5f26ab2ced' }, 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: '6c59c76305a41bcd4c0bfc109f7e207a871118e5', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '921c7c3309a362a0e1d273e382bc43fe9a627257', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'cd258b86fec5b52818fe711b078514feee825866', 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: '667984f03375ec43be01732309020c45c81d9306', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '6d950d7eb59905342e328047f45f9b5ae3f6f8cb', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
-    }
-    get host() { return getElement(this); }
-};
-InputPassword.style = inputPasswordCss;
-
-export { InputPassword as r_input_password };