@riverty/web-components 5.3.0 → 5.5.0

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

@@ -21,6 +21,8 @@ export class InputCode {
         this.inputs = [];
         this.handleInput = (index, event) => {
             var _a;
+            if (this.readonly)
+                return;
             const input = event.target;
             const value = input.value.slice(-1);
             this.values[index] = value;
@@ -32,6 +34,8 @@ export class InputCode {
         };
         this.handleKeyDown = (index, event) => {
             var _a, _b, _c;
+            if (this.readonly)
+                return;
             const key = event.key;
             if (key === 'Backspace') {
                 if (!this.values[index] && index > 0) {
@@ -71,6 +75,8 @@ export class InputCode {
         };
         this.handlePaste = async (event) => {
             var _a;
+            if (this.readonly)
+                return;
             event.preventDefault();
             const pasted = event.clipboardData.getData('text').slice(0, this.length);
             this.values = pasted.split('').concat(new Array(this.length).fill('')).slice(0, this.length);
@@ -119,6 +125,8 @@ export class InputCode {
             });
         };
         this.onResetForm = async () => {
+            if (this.readonly)
+                return;
             this.reset();
             this.validityState = null;
             this.validityMessage = null;
@@ -155,6 +163,8 @@ export class InputCode {
      */
     async reset() {
         var _a;
+        if (this.readonly)
+            return;
         this.values = new Array(this.length).fill('');
         (_a = this.inputs[0]) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -239,13 +249,17 @@ export class InputCode {
             return `${uniqueId}-hint`;
         return null;
     }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
     componentWillLoad() {
         this.setValue(this.value);
     }
     render() {
-        const { form, name, novalidate, required, disabled, label, fieldIndicator, hint, uniqueId, valid } = this;
+        const { form, name, novalidate, required, disabled, label, fieldIndicator, hint, uniqueId, valid, readonly } = this;
         const inputAttrs = {
             id: uniqueId,
+            readonly,
             form,
             name,
             novalidate,
@@ -259,13 +273,15 @@ export class InputCode {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '21c24c54dab7a321b76b0fe43c56c2002e71c6ba', value: this.value, onClick: this.onHostClick }, h("div", { key: '20e0f7bd4caaf67b3b24f8ddddfa2c4758baca87', class: "r-input-code--label-container" }, h("label", { key: '57555ebc91e7c0cd87395eeb85878c9a8c5298d1', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '7c77442f0a5b39e6baca0e0a19b07e5c28388267', value: this.value, onClick: this.onHostClick }, h("div", { key: 'e9d80a3cbb3f8afcbfce17da69bbe881112307c5', class: "r-input-code--label-container" }, h("label", { key: 'dfdc795d969466e71d82492dd142773fbad93f6b', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: '858364e0940037842c2daba33fce0405e9bede4f', name: "popover" })), hint &&
-            h("r-hint", { key: '2f8197c1bedf2a173c21ad5b749fc70fc739f58d', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '89ab6e25c2274d74bf335e306759da7882d7fce8', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: 'cfb9ed388a51a3c8ba71160264c30093815e09eb', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '7cb823ab4fdae6e426f1b463cc6a24fb92b7dfd6', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("slot", { key: '2cc6c8837176ec3a50697511c7787f1de80057ca', name: "trailing" }, valid &&
-            h("r-icon", { key: '6aa4c20fba9e24a2176fef57e761a28ba5b5cd5b', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("slot", { key: '6597bd3d299be110dfc0b7c2b2cf5faa597a388e', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: '8a901746d9c029856157d1da45d106c91e8105ec', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: 'f68f02578abd8be8fceea4bdaf1af657f07f5327', name: "popover" })), hint &&
+            h("r-hint", { key: '784b4a072ee504c99873d8e7744c1c055cbdd52a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'b9b458b9b18859132145848135118aacf6c43ab2', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '34d0391987a526d9672ff457fbfd34c153099dbc', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '029bcca9a6907090058ea65de36cc3aea106ad25', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'a91256c17340a75fe1e5a7942c9ede1089bd477c', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: '28df1a0823e8b6c94a26fe8dac6838d663da26b7', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
+            h("slot", { key: '13dee654a15b7104fbe66408ba6c0a8d4b839a2c', name: "trailing" }, valid &&
+                h("r-icon", { key: '85f0413d86b7366229fe07af87a7bdd5368f8a22', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'cf9e23001dec5216a2c35144b9282dee25d5fe50', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: '0c642fbeef09ec9c5ce1e2a6272bb27160be05c0', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     static get is() { return "r-input-code"; }
     static get encapsulation() { return "shadow"; }
@@ -397,6 +413,25 @@ export class InputCode {
                 "setter": false,
                 "reflect": false
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "label": {
                 "type": "string",
                 "attribute": "label",

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

@@ -8,11 +8,17 @@
   display: contents;
 }
 
-:host(:hover:not([disabled]:not([disabled=false]))) {
+:host([readonly]:not([readonly=false])) {
+  --r-input-date--container--background-color: var(--r-background-soft, #f3f1f0);
+  --r-input-date--container--border-color: transparent transparent var(--r-border-soft, #686868) transparent;
+  --r-input-date--container--cursor: text;
+}
+
+:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))) {
   --r-input-date--container--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
 }
 
-:host(:active:not([disabled]:not([disabled=false]))) {
+:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))) {
   --r-input-date--container--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
 }
 
@@ -123,6 +129,11 @@
 .r-input-date--trailing {
   display: var(--r-input-date--trailing--display, flex);
   margin-left: var(--r-input-date--trailing--margin-left, auto);
+  align-items: var(--r-input-date--trailing--align-items, center);
+  gap: var(--r-input-date--trailing--gap, 0.625rem);
+}
+.r-input-date--readonly-icon {
+  color: var(--r-input-date--readonly-icon--color, var(--r-icon-soft, #686868));
 }
 
 .visually-hidden {

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

@@ -82,6 +82,7 @@ export class InputDate {
                 inputmode: 'numeric',
                 disabled: this.disabled,
                 required: this.required,
+                readonly: this.readonly,
                 'aria-label': label(type),
                 'data-date-type': type
             };
@@ -91,6 +92,8 @@ export class InputDate {
             return ((_a = value.replace(/[^.\-/]/g, '')) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '/';
         };
         this.updateValue = () => {
+            if (this.readonly)
+                return;
             this.delimiter = this.getDelimiter(this.format);
             this.value = this.value ? this.inputOrder.map((input) => this.getDateComponent(input)).join(this.delimiter) : '';
         };
@@ -106,6 +109,8 @@ export class InputDate {
         };
         this.handleKeyDown = (index, event) => {
             var _a, _b, _c, _d, _e, _f;
+            if (this.readonly)
+                return;
             if (event.code === 'Enter') {
                 this.validateFormElement(this.nativeElement);
                 if (this.invalid && !this.isNoValidate)
@@ -154,6 +159,8 @@ export class InputDate {
             }
         };
         this.handlePaste = (event) => {
+            if (this.readonly)
+                return;
             this.value = event.clipboardData.getData('text');
             event.preventDefault();
         };
@@ -162,6 +169,8 @@ export class InputDate {
         };
         this.handleInput = (input, index, event) => {
             var _a, _b, _c;
+            if (this.readonly)
+                return;
             const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
             event.target.value = value;
             this.setDateComponent(input, value);
@@ -177,11 +186,14 @@ export class InputDate {
         };
         this.handleChange = (input, event) => {
             var _a;
+            if (this.readonly)
+                return;
             const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
             event.target.value = value;
             this.setDateComponent(input, value);
             this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
             this.rChange.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
         };
         this.getValidityStateData = (element) => {
             if (this.required && element.value.length === 0) {
@@ -212,6 +224,8 @@ export class InputDate {
             });
         };
         this.onResetForm = async () => {
+            if (this.readonly)
+                return;
             this.reset();
             this.validityState = null;
             this.validityMessage = null;
@@ -271,6 +285,8 @@ export class InputDate {
      * @returns Promise that resolves when reset is complete
      */
     async reset() {
+        if (this.readonly)
+            return;
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -317,6 +333,9 @@ export class InputDate {
     get firstEmptyInput() {
         return this.inputs.find(input => !input.value) || null;
     }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
     componentWillLoad() {
         dayjs.extend(customParseFormat);
         this.delimiter = this.getDelimiter(this.format);
@@ -344,7 +363,7 @@ export class InputDate {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid } = this;
+        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
         const groupAttrs = {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
@@ -355,6 +374,7 @@ export class InputDate {
             name,
             required,
             disabled,
+            readonly,
             'aria-describedby': this.ariaDescribedBy
         };
         // DEPRECATED: will be removed in November 2025 release.
@@ -367,13 +387,14 @@ export class InputDate {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '45402df1a93a99839195db652735095a5b373f35', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: 'fa4328121e8a6391d7eca78445ce419a437543b1', class: "r-input-date" }, groupAttrs), h("div", { key: '50f428f5c1674d8355a803b0f093b6fcfcdaadb0', class: "r-input-date--legend-container" }, h("legend", { key: '55872125d4df627288369fa61bf3231500ba349b', class: "r-input-date--legend" }, h("label", { key: 'b051da10e21ac8d68d1fe56fe32ae2cb79b6289f', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '291b135444b1fa349daddde0f182d67688e739bb', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: 'ba9bdebb80e24fff65d2b18902e97a3497c3f602', class: "r-input-date" }, groupAttrs), h("div", { key: '74ac02efb2741cc4de337133d68ad5eaf978b911', class: "r-input-date--legend-container" }, h("legend", { key: 'c3fc3b194b878e9acb717b6c70e05db55a9ad63a', class: "r-input-date--legend" }, h("label", { key: '5c7eee1fadb2c62d55b8a890eeec2c163d87d0b9', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '2f6e6d44c6a81d0e649ddc325f02575fde26c505', name: "popover" })), hint &&
-            h("r-hint", { key: '7f1aed34c0391ed1cb25db22fda839bc3bc994e6', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'cd02f4b4ae91e9c2dd25a3c1d72ac345d79c769f', class: "r-input-date--container" }, h("r-icon", { key: '3472d2b8753d84c387de5e39a01538bfaef635ed', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'a8f3e0c4b986ec86e4b6f48efac093c32a359256', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '2e3e7b6fb13bc961549ad147e7bbc65b330bccd2', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '77af892c79891b6a4893d36730135f9124cb71f7', class: "r-input-date--trailing" }, h("slot", { key: '20e5f42a09a7fdda67467a25aced264d8d1c9b1e', name: "trailing" }, valid &&
-            h("r-icon", { key: '65d84ab8a34134b267be8e54fad621b112ae4a11', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("div", { key: '2943beb614010b8b2251bb96ded76021384fb1d7', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: 'efb51013501de46364d3dd043813c2fd3fb5c257', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '0f5d78659b43177ebabfe9d5201083ca09ec34c0', name: "popover" })), hint &&
+            h("r-hint", { key: 'cc46269c0a59a29ed5f4d454316d3736febd11d8', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '407b00450575bea92bbd0ea1c8f2f7050cc5731b', class: "r-input-date--container" }, h("r-icon", { key: '192a807af7a17da42dbfc104b250008fb92f9201', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'e97c5d40242fef7a0e7de74498415342e98a3914', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e93adbded043a7e5cb621b3f12c25145f1110c7e', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '6046c334c88411bbeb36f96201e75c3af55302af', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '69d132c86d369d900d9d5e7f1b8b01bb5fa35203', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '9a2ddfc73a8d9cc615abc035c5854158a3314ff3', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '6e7b97da07d9dd20da07cfd743c3e6e0d5e82308', name: "trailing" }))), h("div", { key: 'd0a3edff590af1893bafa7d51a41ba261f6c6215', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '077b7b9a115ca1c871498a8840fe4019e39deea3', variant: "error" }, this.message)))));
     }
     static get is() { return "r-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -761,6 +782,25 @@ export class InputDate {
                 "setter": false,
                 "reflect": true
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",

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

@@ -37,11 +37,15 @@ export class InputPassword {
             }, 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 });
@@ -78,6 +82,8 @@ export class InputPassword {
             appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
         this.onResetForm = () => {
+            if (this.readonly)
+                return;
             this.validityState = null;
             this.validityMessage = null;
             this.value = this.initial['value'];
@@ -97,6 +103,8 @@ export class InputPassword {
         };
         this.handleKeyup = async (event) => {
             var _a, _b;
+            if (this.readonly)
+                return;
             if (event.code !== 'Enter')
                 return;
             this.validateFormElement(this.nativeElement);
@@ -112,6 +120,8 @@ export class InputPassword {
             }
         };
         this.handleBlur = () => {
+            if (this.readonly)
+                return;
             this.validateFormElement(this.nativeElement);
         };
     }
@@ -191,7 +201,7 @@ export class InputPassword {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed } = this;
+        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly } = this;
         const inputAttrs = {
             name,
             placeholder,
@@ -208,10 +218,11 @@ export class InputPassword {
             tooltipIcon,
             tooltipIconColor,
             fullWidth,
-            novalidate: true
+            novalidate: true,
+            readonly
         };
-        return (h(Host, { key: '8e6cba802dd16c4d3728ee18c4a99882413eb94d' }, h("r-input", Object.assign({ key: '8fe50776017dc37afe9cd06cb944fff2f17bcc22' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("slot", { key: 'f8a7ad986b5945549968db08f7b98f3f3512292d', name: "popover", slot: "popover" }), h("r-icon", { key: '3adae1ce4ac77ca8db37fbdb4cf9060a84f56a23', name: "padlock-closed", size: "s", slot: "leading" }), h("r-icon-button", { key: '928a08c5250fcf01884da4f295b6b85299d7a588', 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: 'fe5651e7dafc74e42f23b528510c3d18b37ac779', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'b5badae92e3eee6447a599128f71ce4d907f1425', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: 'a572ffb573f9d4ff7732c372077d1488a86fd4be' }, h("r-input", Object.assign({ key: '9296fe93c32f82c850c571dfc588d599d4fedfeb' }, 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: '4ed51719c83a3b4e90fd86d95969b982f3372d16', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: 'c00d7cd2254773750a7a4627c7600550590f0e03', name: "popover", slot: "popover" }), h("r-icon-button", { key: '7bf8aabd7b00a2a36038d1f6162f11114dfa72fa', 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: '654c4558871e740f13ae50351ff82e3befccc83d', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'e8b5e4a4a69ddf7074e88eb18c5e9ff725e3baa5', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     static get is() { return "r-input-password"; }
     static get encapsulation() { return "shadow"; }
@@ -538,6 +549,25 @@ export class InputPassword {
                 "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",

package/dist/collection/components/input-phone-number/input-phone-number.js

@@ -19,22 +19,31 @@ export class InputPhoneNumber {
          * */
         this.initial = {};
         this.handleOnInput = (event) => {
+            if (this.readonly)
+                return;
             this.phoneNumber = event.target.value;
             this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
             const { host, phoneNumber, countryCode, value } = this;
             this.rInput.emit({ element: host, value, countryCode, phoneNumber });
+            this.validateFormElement(this.nativeElement);
         };
         this.handleInputOnChange = (event) => {
+            if (this.readonly)
+                return;
             this.phoneNumber = event.target.value;
             this.handleValueChange();
         };
         this.handleValueChange = () => {
+            if (this.readonly)
+                return;
             this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
             const { host, phoneNumber, countryCode, value } = this;
             this.rChange.emit({ element: host, value, countryCode, phoneNumber });
             this.validateFormElement(this.nativeElement);
         };
         this.validateFormElement = (element) => {
+            if (this.readonly)
+                return;
             if (element === null)
                 return;
             if (this.isNoValidate)
@@ -83,6 +92,8 @@ export class InputPhoneNumber {
         };
         this.onResetForm = () => {
             var _a;
+            if (this.readonly)
+                return;
             this.validityState = null;
             this.validityMessage = null;
             this.phoneNumber = '';
@@ -121,12 +132,24 @@ export class InputPhoneNumber {
         this.validateFormElement(this.nativeElement);
     }
     handleDisabledChange() {
-        var _a;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', `${this.disabled || false}`);
+        this.setCountryCodeElementAttributes({
+            'disabled': `${!!this.disabled}`
+        });
     }
     handleRequiredChange() {
-        var _a;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('required', `${this.required || false}`);
+        this.setCountryCodeElementAttributes({
+            'required': `${!!this.required}`
+        });
+    }
+    handleReadonlyChange() {
+        this.setCountryCodeElementAttributes({
+            'readonly': `${!!this.readonly}`
+        });
+    }
+    handleLabelChange() {
+        this.setCountryCodeElementAttributes({
+            'label': this.countryCodeLabel
+        });
     }
     /** Identify wrapping form element */
     get parentFormEl() {
@@ -182,15 +205,16 @@ export class InputPhoneNumber {
         this.phoneNumber = value.replace(countryCode, '');
         (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setValue(countryCode);
     }
-    setCountryCodeElementAttributes() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('show-leading-icon', 'true');
-        (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute('leading-icon', 'globe');
-        (_c = this.countryCodeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('placeholder', '+00');
-        (_d = this.countryCodeElement) === null || _d === void 0 ? void 0 : _d.setAttribute('disabled', `${this.disabled || false}`);
-        (_e = this.countryCodeElement) === null || _e === void 0 ? void 0 : _e.setAttribute('internal', 'true');
-        (_f = this.countryCodeElement) === null || _f === void 0 ? void 0 : _f.setAttribute('required', `${this.required || false}`);
-        (_g = this.countryCodeElement) === null || _g === void 0 ? void 0 : _g.setAttribute('label', this.countryCodeLabel);
+    setCountryCodeElementAttributes(attributes) {
+        Object.entries(attributes || {}).forEach(([key, val]) => {
+            var _a, _b;
+            if (val === false || val === null || val === undefined) {
+                (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.removeAttribute(key);
+            }
+            else {
+                (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute(key, String(val));
+            }
+        });
     }
     getPhoneValidationResult(phoneNumber, countryCode = '') {
         return phone(countryCode + phoneNumber, { validateMobilePrefix: false });
@@ -213,7 +237,19 @@ export class InputPhoneNumber {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
         this.updateValues(this.value);
-        this.setCountryCodeElementAttributes();
+        const staticAttributes = {
+            'show-leading-icon': 'true',
+            'leading-icon': 'globe',
+            'placeholder': '+00',
+            'internal': 'true'
+        };
+        const dynamicAttributes = {
+            'disabled': `${!!this.disabled}`,
+            'required': `${!!this.required}`,
+            'readonly': `${!!this.readonly}`,
+            'label': this.countryCodeLabel
+        };
+        this.setCountryCodeElementAttributes(Object.assign(Object.assign({}, staticAttributes), dynamicAttributes));
     }
     componentDidLoad() {
         this.connectEventListeners();
@@ -239,10 +275,10 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: 'd1ddc6d8dec0b98c83c65d2a0e0ad7177d4bf5e4' }, h("div", { key: '5e87d5acdf57428188dafa9e1d13b68268db7854', class: "r-input-phone-number--label-container" }, h("label", { key: 'ba8ec0808fbfd2c59115d5765d4e3e74d5fbd907', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'b4102846d72fa6b9ac928d5a846163ad8f81cc2c' }, labelAttr), label)), h("slot", { key: 'debcf23c5add7c28c56b60d3f82c29ba32d85049', name: "popover" })), hint &&
-            h("r-hint", { key: '429ed5d551ac9cb028b18919e3f7d8d4155330fe', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'c269f63f96d619595ae676d77448410d71a4b356', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'eb5402152f90f5e97b68a04c511daa228e0d3c05' }), h("r-input", { key: '9aa1354f8a17087dff54ae394c8859b9a69e4b5a', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
-            h("r-icon", { key: '8a4a597a9177f115ccfab3a1a388d6ef7445d0fb', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '44646c7de24094438bcbb5288ce08378bc7ed473', type: "hidden" }, inputAttrs, { value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a30016c4a30ab4e13a34374973b0ff2ee7369dac', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasError && this.error, this.hasValidationError && this.validityMessage)));
+        return (h(Host, { key: '93e31af4d248db4fe90a84b897d96207dbf9b6e9' }, h("div", { key: 'fc909eb39efe18413838c9f051d7ad7d5aa461b3', class: "r-input-phone-number--label-container" }, h("label", { key: 'b849fc5188a03e52151006fd48338fe0a07dfd83', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: '6bab502ebce17055ef3e2862f9063bfd2d0d1291' }, labelAttr), label)), h("slot", { key: '014cbcd421f75299935cf430a8777ded1880134c', name: "popover" })), hint &&
+            h("r-hint", { key: '4f8e473e4c70ac62618f6d651dca1880aa755c3e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '7fa42ec6de7083cc8703f5bcbbfaabe283462d45', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '64b8a315acb0057e82d1c77dd3b35bc141378cc0' }), h("r-input", { key: '5fdaa9c0c5bb4913637b895f0979f377bac876bc', 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 &&
+            h("r-icon", { key: '6c25f0a2e473315279679c3e607691f8a3eca396', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '39cca18332d8e6473bef33db6e395a8aac36a954', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '8feb70b56f27287b06a3ba894a554d736d9e9b4b', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     static get is() { return "r-input-phone-number"; }
     static get encapsulation() { return "shadow"; }
@@ -514,6 +550,25 @@ export class InputPhoneNumber {
                 "setter": false,
                 "reflect": true
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",
@@ -843,6 +898,12 @@ export class InputPhoneNumber {
             }, {
                 "propName": "required",
                 "methodName": "handleRequiredChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleReadonlyChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
             }];
     }
 }

package/dist/collection/components/label/label.js

@@ -25,9 +25,9 @@ export class RLabel {
             size: 's',
             color: tooltipIconColor
         };
-        return (h(Host, { key: '1bcaecd6616128ccab32f8a1ff4f46f1072190ac' }, h("div", { key: 'ab619a29898eb4e7a49ac5dd07f2b1b98aac17a2', class: "r-label" }, h("span", { key: 'ac0e0ea909ef6da765676b6b30ecc65d39664bcf', class: "r-label--slot" }, h("slot", { key: 'cf6014703ae7afeed874e017cef48d99aa32eddb' }), fieldIndicator &&
-            h("span", { key: '11e2435c41fbe76ca0b64d9eacc59c10ff87233d', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            h("span", { key: 'c9ed9b4fe5f084e23d24a8687dcc186bd3380b05', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: '78f51c815bc28429edae7ad52f3150aafe3a5211' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'e890282aaf5b66d805ee6212cf8c69abae3cde7e' }, tooltipIconAttrs)))))));
+        return (h(Host, { key: '06097c8d9963d79b783b245a934832e3f8e7596b' }, h("div", { key: '2a3a8ddd22fddedb8e7a7472f81c05201ea26a77', class: "r-label" }, h("span", { key: '9d1814759bb2b3f8784a73aa75b215a19985f482', class: "r-label--slot" }, h("slot", { key: 'd472e83f02841c979bbfcc36c54068141de0d380' }), fieldIndicator &&
+            h("span", { key: 'f275ed855ebd8a684a35ce9b074b0e04471dcfe2', class: "r-label--marker" }, fieldIndicator)), tooltip &&
+            h("span", { key: 'aa336cbb979d0866e8f586c1596b9d9f38925023', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: '245cd576fadb1b31ca2041a9b3d9b5a9a63e381d' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'f83ce1d9d0ab51b3c5394866b01b1998559ddc68' }, tooltipIconAttrs)))))));
     }
     static get is() { return "r-label"; }
     static get encapsulation() { return "shadow"; }