@riverty/web-components 5.7.0 → 6.0.0

package/dist/cjs/r-input-date.cjs.entry.js

@@ -70,6 +70,10 @@ const InputDate = class {
         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
          * */
@@ -160,6 +164,7 @@ const InputDate = class {
             if (this.readonly)
                 return;
             if (event.code === 'Enter') {
+                this.touched = true;
                 this.validateFormElement(this.nativeElement);
                 if (this.invalid && !this.isNoValidate)
                     return;
@@ -210,6 +215,8 @@ const InputDate = class {
             if (this.readonly)
                 return;
             this.value = event.clipboardData.getData('text');
+            this.touched = true;
+            this.dirty = true;
             event.preventDefault();
         };
         this.createInputHandler = (input, index) => {
@@ -227,7 +234,10 @@ const InputDate = class {
                 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);
@@ -240,29 +250,64 @@ const InputDate = class {
             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) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
-            const valid = dayjs(this.value, this.format, true).isValid();
+            const valid = this.value ? dayjs(this.value, this.format, true).isValid() : true;
             if (!valid) {
-                this.validityState = 'invalid';
-                this.validityMessage = this.invalidDateMessage;
-                return;
+                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 };
+                    }
+                }
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
                 return;
             if (this.isNoValidate)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -311,6 +356,8 @@ const InputDate = class {
     }
     handleValueChange() {
         this.setCurrentValues();
+        if (this.touched)
+            this.validateFormElement(this.nativeElement);
     }
     /** Get the date value */
     async getValue() {
@@ -318,6 +365,7 @@ const InputDate = class {
     }
     /** Sets the date value */
     async setValue(value) {
+        this.nativeElement.value = value;
         this.value = value;
     }
     /** Gets the current date format */
@@ -328,6 +376,19 @@ const InputDate = class {
     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
@@ -335,6 +396,7 @@ const InputDate = class {
     async reset() {
         if (this.readonly)
             return;
+        this.markAsPristine();
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -342,6 +404,14 @@ const InputDate = class {
         this.format = this.initial['format'];
         this.valid = !this.invalid;
     }
+    /**
+     * Validates the input date without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input date is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     get inputs() {
         return Array.from(this.host.shadowRoot.querySelectorAll('input[data-date-type]'));
     }
@@ -411,7 +481,7 @@ const InputDate = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
+        const { form, name, required, disabled, label, fieldIndicator, hint, uniqueId, invalid, valid, readonly } = this;
         const groupAttrs = {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
@@ -425,24 +495,18 @@ const InputDate = class {
             readonly,
             'aria-describedby': this.ariaDescribedBy
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
-        } : {};
         const labelAttr = label ? {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (index.h(index.Host, { key: '8a1395ebe9606836eeca8c63958dd2c904901cc5', onClick: this.onHostClick }, index.h("fieldset", Object.assign({ key: '67eda3917e37c76e22dba41a3f168f25542b3e74', class: "r-input-date" }, groupAttrs), index.h("div", { key: '2e1c2fc3ff538cbaeb79cea6728a0fc01a3cfafe', class: "r-input-date--legend-container" }, index.h("legend", { key: '0f41209fd3934af15d17a60c366ae95cb7b0ffab', class: "r-input-date--legend" }, index.h("label", { key: '406ee340682dc64d75aacfe33456ed3d819b1a7d', htmlFor: uniqueId }, label ?
-            index.h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
+        return (index.h(index.Host, { key: '1a8a9175148f43758ec6b9d905c4bd2f619ffd7f', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("fieldset", Object.assign({ key: 'fb004332d8578b8da74df643bd93f93d062973bb', class: "r-input-date" }, groupAttrs), index.h("div", { key: '128e65638dc21d95c8b4b92669b0bd6733a653f6', class: "r-input-date--legend-container" }, index.h("legend", { key: '63e7e858c38930fecbe71d819f1a0b49bf711911', class: "r-input-date--legend" }, index.h("label", { key: 'ccd6a5434f5df91bf9b2c121bb182c152302d864', htmlFor: uniqueId }, label ?
+            index.h("r-label", Object.assign({}, labelAttr), label)
             :
-                index.h("slot", { name: "label" }))), index.h("slot", { key: '825c6e93994dd54738f3168e782066787c48af5c', name: "popover" })), hint &&
-            index.h("r-hint", { key: '9cee9fa8904d8fc1a1968c4a2a12caed9a708cfb', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '60db93b0f58918d1ab087455fc495b093175dca4', class: "r-input-date--container" }, index.h("r-icon", { key: '74a495cb61d248a3d10422c6e28bde310684a7e9', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), index.h("div", { key: '59d28137260f613ef9f404821e6dc2b6624fb455', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (index.h(index.Fragment, null, index.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, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            index.h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), index.h("input", Object.assign({ key: '9723d0a2417bf427a5a1ff4690f8745cc40899a0', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), index.h("div", { key: '65997938c00455e81becba759dc3fdadeeecc1e4', class: "r-input-date--trailing" }, this.readonly &&
-            index.h("r-icon", { key: '750df4d848ef7d0e7a6b9a7b7853a3389da44232', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            index.h("r-icon", { key: 'b24b8ea8a53b423c0060ac6a34d75ea7ad192b94', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && index.h("slot", { key: '147d79539620af0051addf49d7e237c2a3428ff4', name: "trailing" }))), index.h("div", { key: 'e6b2bccd8d97560940805a08f420f5fc9b165649', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && index.h("r-hint", { key: 'd4807c998838bf7a6c748a4555901e66f2ef92d0', variant: "error" }, this.message)))));
+                index.h("slot", { name: "label" }))), index.h("slot", { key: '4be5c643d1b0532d27f4b82692cb6ca937291d6b', name: "popover" })), hint &&
+            index.h("r-hint", { key: '07a912c146dff97ef991a6e375f4aeb8cd0ba45e', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '386dfb87cface9333c93d5fe8165cbe52a9a83c4', class: "r-input-date--container" }, index.h("r-icon", { key: '9ff075723ac54f6d7c2325ba59f833422404bee6', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), index.h("div", { key: 'ebcb76a92ab1591c3128a60d6620bea5b0c517ec', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (index.h(index.Fragment, null, index.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 &&
+            index.h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), index.h("input", Object.assign({ key: 'e5736ffa215662436c539332be1414cc409ce448', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), index.h("div", { key: '45ccffbb4111f2fd906d9b687f62f4adc83b62aa', class: "r-input-date--trailing" }, this.readonly &&
+            index.h("r-icon", { key: '3a5433e3d601a83154687bdd55feeeef0ef04215', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            index.h("r-icon", { key: '03de3e49b8b51690e4fb6c2edbb7a53ca1a71f76', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && index.h("slot", { key: 'db4911a4421b296effdd37ca08c96d8a0096e5e6', name: "trailing" }))), index.h("div", { key: 'd21f19188462be93812487702eb8a07fd3a91cea', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && index.h("r-hint", { key: '6937f2d48a634308c97d33e59daa0a7242bd39fd', variant: "error" }, this.message)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 var index = require('./index-DJ4H_bFj.js');
 var formData = require('./formData-B2DZyLxP.js');
 
-const inputPasswordCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top}: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 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) {
@@ -12,6 +12,7 @@ const InputPassword = class {
         this.rInput = index.createEvent(this, "rInput");
         this.rChange = index.createEvent(this, "rChange");
         this.rReset = index.createEvent(this, "rReset");
+        this.rVisibilityChange = index.createEvent(this, "rVisibilityChange");
         /** The value of the password input */
         this.value = '';
         /**
@@ -61,16 +62,19 @@ const InputPassword = class {
             this.rChange.emit({ element: host, value });
         };
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
@@ -79,7 +83,9 @@ const InputPassword = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element.shadowRoot.querySelector('input'));
+            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;
@@ -147,6 +153,7 @@ const InputPassword = class {
     async showPassword() {
         this.showed = true;
         this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: true });
     }
     /**
      * Hide password text.
@@ -154,6 +161,7 @@ const InputPassword = class {
     async hidePassword() {
         this.showed = false;
         this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: false });
     }
     /** Get the input value */
     async getValue() {
@@ -166,6 +174,14 @@ const InputPassword = class {
         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;
@@ -214,11 +230,14 @@ const InputPassword = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly } = this;
+        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,
@@ -227,15 +246,17 @@ const InputPassword = class {
             valid,
             hint,
             label,
-            tooltip,
-            tooltipIcon,
-            tooltipIconColor,
             fullWidth,
             novalidate: true,
-            readonly
+            readonly,
+            passwordrules,
+            autocomplete,
+            tooLongMessage,
+            tooShortMessage,
+            patternMismatchMessage
         };
-        return (index.h(index.Host, { key: '27a9dec1e7b44ca89bf6fa3a2519e449250503e0' }, index.h("r-input", Object.assign({ key: '5ca5a59b7dcbcc5f5bbeefd8741b679bc1d11004' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), index.h("r-icon", { key: '62a04c271572db925e1992bd1ac540a5a09234dc', name: "padlock-closed", size: "s", slot: "leading" }), index.h("slot", { key: 'cbee36e927550e21e76dcf61de99980f92564177', name: "popover", slot: "popover" }), index.h("r-icon-button", { key: 'd4939f4be247d76df7e96eee97ea9ed1079a8f5d', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
-            index.h("r-hint", { key: '5c5ba0c83013b4e6a283a86beb5abe1676b97093', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), index.h("div", { key: '0763d06fbaf887574e44b0fedbb9d08b1725b99f', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (index.h(index.Host, { key: '15d9cac9269a816de47d1ae4d3818a99f6229979' }, index.h("r-input", Object.assign({ key: 'eea64612b319eae93c0fc6591c22020bf2e3d4fb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), index.h("r-icon", { key: 'd7a425d45f7897d7f6f11b7bf37595e25da3295b', name: "padlock-closed", size: "s", slot: "leading" }), index.h("slot", { key: '6ae8e4dc4633e692ae4280d9cd1420bf7e02d0c0', name: "popover", slot: "popover" }), index.h("r-icon-button", { key: 'e51d43f5966477dc1c35bf6a8114d5b206a58187', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            index.h("r-hint", { key: 'bcee0a5b7f75a4ddd2e2fa6a2dd44cd0392170dc', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), index.h("div", { key: '995e229dfab56b03e0a177c6952c2135777f7899', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-input-phone-number.cjs.entry.js

@@ -2273,7 +2273,9 @@ const InputPhoneNumber = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData();
+            const { validityState, validityMessage } = this.getValidityStateData();
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -2284,22 +2286,25 @@ const InputPhoneNumber = class {
         };
         this.getValidityStateData = () => {
             var _a, _b;
+            let validityState = '';
+            let validityMessage = '';
             if (!this.required && !((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.length)) {
-                this.validityState = 'valid';
-                return;
+                validityState = 'valid';
+                return { validityState, validityMessage };
             }
             if (!((_b = this.phoneNumber) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
             const isPhoneNumberValid = this.countryCode ? this.getPhoneValidationResult(this.phoneNumber, this.countryCode).isValid : false;
             if (!isPhoneNumberValid) {
-                this.validityState = 'invalid';
-                this.validityMessage = this.customErrorMessage;
-                return;
+                validityState = 'invalid';
+                validityMessage = this.customErrorMessage;
+                return { validityState, validityMessage };
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.onSubmitForm = (event) => {
             if (this.isNoValidate)
@@ -2341,6 +2346,14 @@ const InputPhoneNumber = class {
         this.customErrorMessage = message;
         this.validateFormElement(this.nativeElement);
     }
+    /**
+     * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input phone number is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData();
+        return validityState === 'valid';
+    }
     /** Check validity and reveal validation state. */
     async reportValidity() {
         this.validateFormElement(this.nativeElement);
@@ -2481,14 +2494,10 @@ const InputPhoneNumber = class {
         this.disconnectEventListeners();
     }
     render() {
-        const { label, fieldIndicator, hint, name, form, inputLabel, tooltip, tooltipIcon, tooltipIconColor, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
-        } : {};
-        const labelAttr = Object.assign({ fieldIndicator }, tooltipAttrs);
+        const { label, fieldIndicator, hint, name, form, inputLabel, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
+        const labelAttr = {
+            fieldIndicator
+        };
         const inputAttrs = {
             id: uniqueId,
             form,
@@ -2498,10 +2507,9 @@ const InputPhoneNumber = class {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (index.h(index.Host, { key: '87f5720347e3627524f95f7110088b8eddef7f8f' }, index.h("div", { key: '091e2048f011ff4167b35434567149de061954bd', class: "r-input-phone-number--label-container" }, index.h("label", { key: '80994d1cfd1b6f2228fb231f64894e660bdb1a1c', id: `${uniqueId}-label` }, label &&
-            index.h("r-label", Object.assign({ key: '36fa07371ee2c9d37645060a29f2d6f4ffe66342' }, labelAttr), label)), index.h("slot", { key: '76034d24a4208a46ee92185221256b9b5e87f971', name: "popover" })), hint &&
-            index.h("r-hint", { key: '574a0ec6541310640594eed29e0c301f5f9a01f7', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '63f37ce77a8e247091e0e6bf55632a834e19992d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, index.h("slot", { key: '36f3e834567d3ce77b6d89ae3e835eee630675b7' }), index.h("r-input", { key: '2f8dc7a95823b3107d8e24f90ae53791554c19af', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
-            index.h("r-icon", { key: '4559b1d4c55e35b2ef9560554a62d4742bca875e', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), index.h("input", Object.assign({ key: 'c68a9255419c41e8b9fc02127d5f3b68cd14f40b', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), index.h("r-hint", { key: '43712e3a6b916945b1a00d3c6d8ace5f7bdcc1d7', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
+        return (index.h(index.Host, { key: '97edc0f9bbc4a3823e628bb08be3b3abbbcfe6ec' }, index.h("div", { key: '8a5236c58655d47368bfaa9bcea6bde3c39c6a22', class: "r-input-phone-number--label-container" }, index.h("label", { key: 'ae6e6e72381864d67d98f4429856cf5b1943943c', id: `${uniqueId}-label` }, label &&
+            index.h("r-label", Object.assign({ key: 'd760960dbf5806084b0a10d14fef218ca5e4cd79' }, labelAttr), label)), index.h("slot", { key: '4f9bcaba34f2f49592a3167958bd091eeac9f6be', name: "popover" })), hint &&
+            index.h("r-hint", { key: '0c3f402b7f9369dcea2c84478e12ed0ea241fd0a', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '43e5dbd9ca897cfc2ca05e6ab020c321871f3961', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, index.h("slot", { key: '4e3f891eb21f15927d6a33e7ba6728c09d20e981' }), index.h("r-input", { key: '6bd6e929e396bf515511fdd978d00df9de54cc37', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), index.h("input", Object.assign({ key: 'f113123ef2fa2096b686d132ce11ca11970ab1be', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), index.h("r-hint", { key: 'd00477c3a27f999c4a3079710c34266ed47e0e57', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {