@riverty/web-components 5.7.0 → 5.8.0

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

@@ -50,7 +50,9 @@ export class InputPhoneNumber {
                 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;
@@ -61,22 +63,25 @@ export class InputPhoneNumber {
         };
         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)
@@ -118,6 +123,14 @@ export class InputPhoneNumber {
         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);
@@ -275,10 +288,10 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '87f5720347e3627524f95f7110088b8eddef7f8f' }, h("div", { key: '091e2048f011ff4167b35434567149de061954bd', class: "r-input-phone-number--label-container" }, h("label", { key: '80994d1cfd1b6f2228fb231f64894e660bdb1a1c', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: '36fa07371ee2c9d37645060a29f2d6f4ffe66342' }, labelAttr), label)), h("slot", { key: '76034d24a4208a46ee92185221256b9b5e87f971', name: "popover" })), hint &&
-            h("r-hint", { key: '574a0ec6541310640594eed29e0c301f5f9a01f7', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '63f37ce77a8e247091e0e6bf55632a834e19992d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '36f3e834567d3ce77b6d89ae3e835eee630675b7' }), 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 &&
-            h("r-icon", { key: '4559b1d4c55e35b2ef9560554a62d4742bca875e', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'c68a9255419c41e8b9fc02127d5f3b68cd14f40b', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), 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 (h(Host, { key: '4551070926e1974ddf3fcb8cc435570ddde50276' }, h("div", { key: 'a076fb01b4e0563ec2d30a5680a6ccd48b2f6895', class: "r-input-phone-number--label-container" }, h("label", { key: 'a8ad943efeca2ac3b5a63857ea0a52b19c32f09c', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'ac0d2a1c12cb85ec03e6596b9bb2e28328026eac' }, labelAttr), label)), h("slot", { key: 'cadd98a33c32bfb60be0a3448772eac483630bdf', name: "popover" })), hint &&
+            h("r-hint", { key: '23874cabee60dc0a5e620066eed92de809cac1eb', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '800b3a389ce815c5e137077dd5766177c317a05d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '6106007980212ef05cd11304da2a4d0cc28ddf4f' }), h("r-input", { key: 'd65b4d9ca8761c7e6dd08359ff02f3c88c57aa66', 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: '09c721cb014d6d7ece724bcf7de9ec5928624dac', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'e2eef2512f9125f0dd3d1b09120cbb77955350bd', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a12e9640bcf2df7b754de4e54b111e4ead2d023e', "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"; }
@@ -851,6 +864,26 @@ export class InputPhoneNumber {
                     "tags": []
                 }
             },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the input phone number without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the input phone number is valid."
+                        }]
+                }
+            },
             "reportValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/pagination/pagination.css

@@ -90,29 +90,6 @@
 .r-pagination--header label {
   font-size: var(--r-pagination--font-size);
 }
-.r-pagination--item {
-  --r-button--display: flex;
-  --r-button--width: var(--r-pagination--button--width);
-  --r-button--height: var(--r-pagination--button--height);
-  --r-button--color: var(--r-pagination--button--color);
-  --r-button--background-color: var(--r-pagination--button--background-color);
-  --r-button--border-width: var(--r-pagination--button--border-width);
-  --r-button--padding: var(--r-pagination--button--padding);
-  --r-button--icon--width: auto;
-  --r-button--icon--height: auto;
-  align-items: var(--r-pagination--item--align-items);
-  background-color: var(--r-pagination--item--background-color);
-  color: var(--r-pagination--item--color);
-  display: var(--r-pagination--item--display);
-  font-family: var(--r-pagination--item--font-family);
-  height: var(--r-pagination--item--height);
-  justify-content: var(--r-pagination--item--justify-content);
-  margin-left: var(--r-pagination--item--margin-left);
-  margin-right: var(--r-pagination--item--margin-right);
-  opacity: var(--r-pagination--item--opacity);
-  width: var(--r-pagination--item--width);
-  z-index: var(--r-pagination--item--z-index);
-}
 .r-pagination--item:hover {
   --r-pagination--item--background-color: var(--r-background-interactive-hovered);
 }
@@ -155,3 +132,26 @@
 .r-pagination--item.number {
   --r-button--font-size: 0.813rem;
 }
+.r-pagination--item {
+  --r-button--display: flex;
+  --r-button--width: var(--r-pagination--button--width);
+  --r-button--height: var(--r-pagination--button--height);
+  --r-button--color: var(--r-pagination--button--color);
+  --r-button--background-color: var(--r-pagination--button--background-color);
+  --r-button--border-width: var(--r-pagination--button--border-width);
+  --r-button--padding: var(--r-pagination--button--padding);
+  --r-button--icon--width: auto;
+  --r-button--icon--height: auto;
+  align-items: var(--r-pagination--item--align-items);
+  background-color: var(--r-pagination--item--background-color);
+  color: var(--r-pagination--item--color);
+  display: var(--r-pagination--item--display);
+  font-family: var(--r-pagination--item--font-family);
+  height: var(--r-pagination--item--height);
+  justify-content: var(--r-pagination--item--justify-content);
+  margin-left: var(--r-pagination--item--margin-left);
+  margin-right: var(--r-pagination--item--margin-right);
+  opacity: var(--r-pagination--item--opacity);
+  width: var(--r-pagination--item--width);
+  z-index: var(--r-pagination--item--z-index);
+}

package/dist/collection/components/popover/popover.css

@@ -6,6 +6,11 @@
   font-weight: var(--r-font-weight-regular, 400);
   font-size: var(--r-font-size-400, 1rem);
   text-align: left;
+}
+:host slot {
+  display: contents;
+}
+:host {
   --board--shift: 1rem;
   --board--min-width: 304px;
   --board--max-width: 504px;
@@ -14,9 +19,6 @@
   --pointer--height: 0.5rem;
   --pointer--spacer: 0.25rem;
 }
-:host slot {
-  display: contents;
-}
 
 :host([size=s]) {
   --r-popover--board--max-width: 375px;
@@ -187,6 +189,12 @@
   right: var(--r-popover--dismiss--right, 20px);
   color: var(--r-text-inverse);
 }
+.r-popover--dismiss:hover {
+  --r-icon-button--background-color: var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04));
+}
+.r-popover--dismiss:active {
+  --r-icon-button--background-color: var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12));
+}
 .r-popover--trigger {
   border: var(--r-popover--trigger--border, none);
   background: var(--r-popover--trigger--background, none);

package/dist/collection/components/popover-action/popover-action.css

@@ -4,20 +4,18 @@
 
 ::slotted(r-button) {
   --r-button--color: var(--r-text-regular);
-  --r-button--border-color: rgba(0,0,0,0);
+  --r-button--border-width: 0;
   --r-button--background-color: rgba(0,0,0,0);
   --r-button--slot--position: relative;
   --r-button--slot--text-decoration: underline;
-  --r-button--padding: 12px 0.125rem 19px 0.125rem;
-  --r-button--slot--text-underline-offset: 12px;
+  --r-button--padding: 10px 2px 18px 2px;
+  --r-button--slot--text-underline-offset: 9px;
 }
 
 ::slotted(r-button:hover:not([disabled]):not([disabled=false])) {
-  --r-button--border-color: var(--r-border-soft);
   --r-button--background-color: var(--r-background-interactive-hovered);
 }
 
 ::slotted(r-button:active:not([disabled]):not([disabled=false])) {
   --r-button--background-color: var(--r-background-interactive-pressed);
-  --r-button--border-color: var(--r-border-soft);
 }

package/dist/collection/components/radio-group/radio-group.js

@@ -20,18 +20,21 @@ export class RadioGroup {
         /** Unique id */
         this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.getValidityStateData = element => {
+            let validityState = '';
+            let validityMessage = '';
             if (element === null)
-                return;
+                return { validityState, 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 = null) => {
             if (element === null)
@@ -40,7 +43,9 @@ export class RadioGroup {
                 return;
             if (this.error)
                 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;
@@ -197,14 +202,13 @@ export class RadioGroup {
         this.value = null;
     }
     /**
-     * Validates the radio group and returns a boolean indicating its validity.
-     *
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the radio group is valid.
      */
     async checkValidity() {
         const element = this.nativeSelectedEl || this.nativeFirstEl || null;
-        this.getValidityStateData(element);
-        return this.validityState === 'valid';
+        const { validityState } = this.getValidityStateData(element);
+        return validityState === 'valid';
     }
     /**
      * Validates the radio group and displays the validity state.
@@ -329,12 +333,12 @@ export class RadioGroup {
             'tooltip-icon': tooltipIcon,
             'tooltip-icon-color': tooltipIconColor
         };
-        return (h(Host, { key: '0a209644dc2a122c793a38e1f624eccf3ca0b884' }, h("div", { key: 'b4d8dbe5fb3d1e11d87a7902addcc801852e3554', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            h("div", { key: 'c77bc88a07ddad6f45671c869b99b3fa5c4d0e2a', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: '1dbfc739da13dbae04481912203a53837941b8e0', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: '2f1b6a50b2f7d7b1becef2cc95a4d7f6a26d970d', name: "popover" })), hint &&
-            h("r-hint", { key: 'c3c4310d3550d17d34ee26fa308cb3957a19dfd3', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '891beaea14680a2d629fa59f4597a968b8c2b695', class: "r-radio-group--content" }, h("slot", { key: '1d107723f7c363564e488309fdcb586ff43046ff' }))), invalid && error &&
-            h("r-hint", { key: 'de64c7c8a42136b7ac3ca93536a7654dc1d274fa', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: 'c40eba0d5b6c47276ca91ca1631948d11f950c86', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
-            h("r-hint", { key: '0b13cc722509fe66231f18bd2783b29b798882ef', role: "alert", variant: "success" }, this.validMessage)));
+        return (h(Host, { key: '5bf5f0493d2329b07d82e332153e467239ddff0f' }, h("div", { key: '06f96cb1868f7cbb635137ca68eda6a326b969c3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
+            h("div", { key: '4dca24e0cb903a2e74e55ee743ed595608af0bf4', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: 'cba1398032eae164db0a00808a06116affa671ec', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: 'c0180f3c6c99fed7d524719aff8eb8e64236cc3c', name: "popover" })), hint &&
+            h("r-hint", { key: '3ae1c84630975059aa1532b4b72957967e398949', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '2c18a09474189e6f2719db7c6ee5fb51c460e52f', class: "r-radio-group--content" }, h("slot", { key: '1c79f92cc0cd2095cfe51ee5fc108b6a004c4e4e' }))), invalid && error &&
+            h("r-hint", { key: '86aa0f4d1400e401cc7f71259511f118a3f68ef7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
+            h("r-hint", { key: 'aa06f829a6566becdf4a1f86e26e5161526756fb', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
+            h("r-hint", { key: '11500e705487028e4312679a6757dc48d861ebba', role: "alert", variant: "success" }, this.validMessage)));
     }
     static get is() { return "r-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -901,7 +905,7 @@ export class RadioGroup {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Validates the radio group and returns a boolean indicating its validity.",
+                    "text": "Validates the radio group without triggering UI and returns a boolean indicating its validity.",
                     "tags": [{
                             "name": "returns",
                             "text": "A boolean indicating whether the radio group is valid."