@riverty/web-components 5.8.0 → 6.0.0

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

@@ -12,24 +12,19 @@ export class RInput {
          */
         this.value = '';
         /**
-         * @deprecated Will be removed November 2025.
-         * Position of legacy icon: `start` | `end`.
-         */
-        this.iconPosition = 'start';
-        /**
-         * @deprecated Will be removed November 2025.
-         * Legacy boolean to show a validation marker icon.
-         */
-        this.validMarker = false;
-        /**
-         * @deprecated Will be removed November 2025.
-         * Icon name used when `validMarker` is active and state is valid.
-         */
-        this.validMarkerIcon = 'circled-check';
+         * When `true` field renders valid/invalid marker within.
+        */
+        this.validityMarker = true;
         /** 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;
+        /** Private flag to prevent validation during reset */
+        this.isResetting = false;
         this.nativeElement = null;
         this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         /**
@@ -48,14 +43,18 @@ export class RInput {
             for (const state in element.validity) {
                 if (element.validity[state]) {
                     validityState = state;
-                    if (this[state + 'Message']) {
-                        validityMessage = this[state + 'Message'];
+                    const customMessage = this[state + 'Message'];
+                    if (customMessage) {
+                        validityMessage = customMessage;
                         return { validityState, validityMessage };
                     }
                     validityMessage = element.validationMessage;
+                    // Found an error, use it even if no custom message
+                    return { validityState, validityMessage };
                 }
             }
-            return { validityState, validityMessage };
+            // No errors found, field is valid
+            return { validityState: 'valid', validityMessage: '' };
         };
         this.validateFormElement = (element) => {
             if (element === null)
@@ -64,6 +63,10 @@ export class RInput {
                 return;
             if (this.error)
                 return;
+            // Trigger browser validation to populate validity states
+            if (element.checkValidity) {
+                element.checkValidity();
+            }
             const { validityState, validityMessage } = this.getValidityStateData(element);
             this.validityState = validityState;
             this.validityMessage = validityMessage;
@@ -79,6 +82,8 @@ export class RInput {
             if (this.readonly)
                 return;
             this.value = event.target.value;
+            this.touched = true;
+            this.dirty = true;
             const { host, value } = this;
             this.rInput.emit({ element: host, value });
         };
@@ -86,11 +91,14 @@ export class RInput {
             if (this.readonly)
                 return;
             this.value = event.target.value;
+            this.touched = true;
+            this.dirty = true;
             const { host, value } = this;
             this.rChange.emit({ element: host, value });
         };
         this.onBlur = () => {
             this.host.classList.remove('focused');
+            this.touched = true;
             this.validateFormElement(this.nativeElement);
             this.rBlur.emit();
         };
@@ -104,17 +112,25 @@ export class RInput {
         this.onResetForm = () => {
             if (this.readonly)
                 return;
+            this.isResetting = true;
+            this.markAsPristine();
             this.validityState = null;
             this.validityMessage = null;
-            this.setValue(this.initial['value']);
+            // Restore initial value without triggering validation
+            if (this.nativeElement) {
+                this.nativeElement.value = this.initial['value'] || '';
+            }
+            this.value = this.initial['value'];
             this.invalid = this.initial['invalid'];
             this.valid = !this.invalid;
+            this.isResetting = false;
             const { host, value } = this;
             this.rReset.emit({ element: host, value });
         };
         this.onSubmitForm = (event) => {
             if (this.isNoValidate)
                 return;
+            this.touched = true;
             this.validateFormElement(this.nativeElement);
             if (this.invalid) {
                 event.preventDefault();
@@ -198,7 +214,10 @@ export class RInput {
      * Set the current value programmatically (does not fire native input/change automatically).
      */
     async setValue(value) {
-        this.nativeElement.value = value;
+        if (this.nativeElement) {
+            this.nativeElement.value = value;
+        }
+        this.value = value;
         this.validateFormElement(this.nativeElement);
     }
     /**
@@ -209,6 +228,25 @@ export class RInput {
         const { validityState } = this.getValidityStateData(this.nativeElement);
         return validityState === 'valid';
     }
+    /**
+     * 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;
+    }
     /** Identify wrapping form element */
     get parentFormEl() {
         return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
@@ -224,11 +262,8 @@ export class RInput {
     get hasValidationError() {
         return (this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
     }
-    get hasValidationSuccess() {
-        return (this.validityState === 'valid' || this.valid) && !!this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     /**
      * Determine whether this element should be ignored
@@ -272,10 +307,15 @@ export class RInput {
         this.disconnectFormEventListeners();
     }
     handleValueChange() {
-        this.validateFormElement(this.nativeElement);
+        if (!this.isResetting) {
+            this.validateFormElement(this.nativeElement);
+        }
+    }
+    handleTypeChange() {
+        this.setValue(this.nativeElement.value);
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, validMarker, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor, uniqueId, autocomplete, readonly, autofocus } = this;
+        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, validityMarker } = this;
         const inputAttrs = {
             disabled,
             readonly,
@@ -291,6 +331,7 @@ export class RInput {
             pattern,
             autocomplete,
             autofocus: autofocus || null,
+            passwordrules,
             id: uniqueId,
             'data-value': value,
             'aria-placeholder': placeholder,
@@ -298,20 +339,25 @@ export class RInput {
             'aria-required': `${required || false}`,
             'aria-describedby': this.ariaDescribedBy
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
+        const labelAttr = label ? {
+            id: `${uniqueId}-label`,
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ id: `${uniqueId}-label`, fieldIndicator }, tooltipAttrs) : {};
         const renderValidationMarker = () => {
-            if (!validMarker)
-                return null;
-            if (!valid && !invalid)
+            const icons = {
+                valid: 'circled-check',
+                invalid: 'circled-exclamation-mark'
+            };
+            const colors = {
+                valid: '--r-status-success-regular',
+                invalid: '--r-status-error-regular'
+            };
+            const shouldShowValidMarker = !!validityMarker && !!valid && !!value;
+            const shouldShowInvalidMarker = !!validityMarker && !!invalid;
+            if (!shouldShowValidMarker && !shouldShowInvalidMarker)
                 return null;
-            const iconName = invalid ? 'circled-exclamation-mark' : 'circled-check';
-            const iconColor = invalid ? '--r-status-error-regular' : '--r-status-success-regular';
+            const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
+            const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
             return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": true, size: "s", name: iconName, color: iconColor });
         };
         // Filter out event listener properties based on naming convention.
@@ -322,13 +368,13 @@ export class RInput {
             }
             return acc;
         }, {});
-        return (h(Host, { onClick: this.handleClick, onKeyup: this.handleKeyup }, h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, h("label", { htmlFor: uniqueId }, label ?
+        return (h(Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, h("label", { htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
             :
                 h("slot", { name: "label" })), h("slot", { name: "popover" })), hint &&
             h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), h("div", { class: "r-input--trailing" }, this.readonly &&
             h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
-            h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage)))));
+            h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
     }
     static get is() { return "r-input"; }
     static get encapsulation() { return "shadow"; }
@@ -523,122 +569,6 @@ export class RInput {
                 "setter": false,
                 "reflect": true
             },
-            "optional": {
-                "type": "boolean",
-                "attribute": "optional",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `fieldIndicator` instead. Will be removed November 2025.\nBoolean flag to render an \u201Coptional\u201D marker."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "optionalText": {
-                "type": "string",
-                "attribute": "optional-text",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `fieldIndicator` instead. Will be removed November 2025.\nCustom text for optional marker."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltip": {
-                "type": "string",
-                "attribute": "tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the `popover` slot instead. Will be removed November 2025.\nLabel tooltip text content."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIcon": {
-                "type": "string",
-                "attribute": "tooltip-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the `popover` slot instead. Will be removed November 2025.\nIcon name used as tooltip trigger."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIconColor": {
-                "type": "string",
-                "attribute": "tooltip-icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the `popover` slot instead. Will be removed November 2025.\nColor token for tooltip trigger icon."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "hint": {
                 "type": "string",
                 "attribute": "hint",
@@ -658,107 +588,6 @@ export class RInput {
                 "setter": false,
                 "reflect": false
             },
-            "icon": {
-                "type": "string",
-                "attribute": "icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nLegacy single icon (prefer `leading` / `trailing` slots)."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "iconColor": {
-                "type": "string",
-                "attribute": "icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nColor for legacy icon."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "iconPosition": {
-                "type": "string",
-                "attribute": "icon-position",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconPosition",
-                    "resolved": "\"end\" | \"start\"",
-                    "references": {
-                        "IconPosition": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nPosition of legacy icon: `start` | `end`."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'start'"
-            },
-            "iconSubmit": {
-                "type": "boolean",
-                "attribute": "icon-submit",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nTreat legacy icon as submit trigger."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "fullWidth": {
                 "type": "boolean",
                 "attribute": "full-width",
@@ -778,28 +607,6 @@ export class RInput {
                 "setter": false,
                 "reflect": true
             },
-            "showValid": {
-                "type": "boolean",
-                "attribute": "show-valid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nControls visibility of success validation marker."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
             "valid": {
                 "type": "boolean",
                 "attribute": "valid",
@@ -819,80 +626,6 @@ export class RInput {
                 "setter": false,
                 "reflect": true
             },
-            "validMarker": {
-                "type": "boolean",
-                "attribute": "valid-marker",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nLegacy boolean to show a validation marker icon."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "validMarkerIcon": {
-                "type": "string",
-                "attribute": "valid-marker-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nIcon name used when `validMarker` is active and state is valid."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'circled-check'"
-            },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nCustom success message when field is valid."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "invalid": {
                 "type": "boolean",
                 "attribute": "invalid",
@@ -1298,6 +1031,25 @@ export class RInput {
                 "setter": false,
                 "reflect": false
             },
+            "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 (password inputs only).\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nThis 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
+            },
             "autofocus": {
                 "type": "boolean",
                 "attribute": "autofocus",
@@ -1335,35 +1087,39 @@ export class RInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "validityMarker": {
+                "type": "boolean",
+                "attribute": "validity-marker",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true` field renders valid/invalid marker within."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "validityState": {},
-            "validityMessage": {}
+            "validityMessage": {},
+            "touched": {},
+            "dirty": {}
         };
     }
     static get events() {
         return [{
-                "method": "rClickIcon",
-                "name": "rClickIcon",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Will be removed November 2025.\nEmitted when legacy icon is clicked."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
                 "method": "rValidate",
                 "name": "rValidate",
                 "bubbles": true,
@@ -1652,6 +1408,57 @@ export class RInput {
                             "text": "A boolean indicating whether the input is valid."
                         }]
                 }
+            },
+            "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": []
+                }
             }
         };
     }
@@ -1660,6 +1467,9 @@ export class RInput {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "type",
+                "methodName": "handleTypeChange"
             }];
     }
 }