@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/radio-button/radio-button.css

@@ -0,0 +1,126 @@
+:host {
+  display: inline-flex;
+  outline: none;
+  position: relative;
+  pointer-events: auto;
+  border: 0.0625rem solid transparent;
+  cursor: pointer;
+  min-width: 17.5rem;
+}
+:host slot {
+  display: contents;
+}
+
+:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))) {
+  --r-radio-button--cursor: pointer;
+  --r-radio-button--box--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))) {
+  --r-radio-button--box--border-color: var(--r-border-regular, #282828);
+  --r-radio-button--box--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
+}
+
+:host(:focus-within),
+:host(.focused) {
+  --r-radio-button--box--box-shadow: 0 0 0 4px var(--r-border-focused-outlined, #fff);
+  --r-radio-button--box--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-radio-button--box--outline-offset: 1px;
+}
+
+:host([checked]:not([checked=false])),
+:host([checked]:not([checked=false]):hover) {
+  cursor: default;
+  --r-radio-button--box--border-color: var(--r-border-regular, #282828);
+  --r-radio-button--box--background-color: var(--r-background-interactive-softest, #fff);
+  --r-radio-button--marker--transform: scale(1);
+}
+
+:host([invalid]:not([invalid=false])),
+:host([invalid]:not([invalid=false])[checked]:not([checked=false])) {
+  --r-radio-button--box--border-color: var(--r-status-error-regular, #b00c15);
+  --r-radio-button--box--background-color: var(--r-status-error-soft, #fef6f6);
+}
+
+:host([disabled]:not([disabled=false])) {
+  --r-radio-button--box--opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.r-radio-button {
+  display: var(--r-radio-button--display, flex);
+  flex: var(--r-radio-button--flex, 1);
+  gap: var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));
+  position: var(--r-radio-button--position, relative);
+  min-height: var(--r-radio-button--min-height, 24px);
+  user-select: var(--r-radio-button--user-select, none);
+  box-sizing: var(--r-radio-button--box-sizing, border-box);
+  font-family: var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));
+  font-size: var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));
+  line-height: var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));
+  text-align: var(--r-radio-button--text-align, left);
+  color: var(--r-radio-button--color, var(--r-text-regular, #282828));
+  opacity: var(--r-radio-button--opacity, 1);
+  box-shadow: var(--r-radio-button--box-shadow, none);
+  outline: var(--r-radio-button--outline, none);
+  cursor: var(--r-radio-button--cursor, inherit);
+  padding: var(--r-radio-button--padding, var(--r-spacing-100, 1rem));
+  margin: var(--r-radio-button--margin, 0);
+  background-color: var(--r-radio-button--background-color, transparent);
+  border-color: var(--r-radio-button--border-color, transparent);
+  border-width: var(--r-radio-button--border-width, 0);
+  border-style: var(--r-radio-button--border-style, solid);
+}
+.r-radio-button--input {
+  position: var(--r-radio-button--input--position, absolute);
+  z-index: var(--r-radio-button--input--z-index, -1);
+  opacity: var(--r-radio-button--input--opacity, 0);
+}
+.r-radio-button--box {
+  position: var(--r-radio-button--box--position, relative);
+  display: var(--r-radio-button--box--display, block);
+  top: var(--r-radio-button--box--top, 0);
+  left: var(--r-radio-button--box--left, 0);
+  width: var(--r-radio-button--box--width, 1.5rem);
+  height: var(--r-radio-button--box--height, 1.5rem);
+  background-color: var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));
+  border-width: var(--r-radio-button--box--border-width, 0.0625rem);
+  border-style: var(--r-radio-button--box--border-style, solid);
+  border-color: var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));
+  border-radius: var(--r-radio-button--box--border-radius, 50%);
+  box-sizing: var(--r-radio-button--box--box-sizing, border-box);
+  box-shadow: var(--r-radio-button--box--box-shadow, none);
+  outline: var(--r-radio-button--box--outline, none);
+  outline-offset: var(--r-radio-button--box--outline-offset, 0);
+  cursor: var(--r-radio-button--box--cursor, inherit);
+  opacity: var(--r-radio-button--box--opacity, 1);
+}
+.r-radio-button--box::before {
+  content: var(--r-radio-button--marker--content, "");
+  display: var(--r-radio-button--marker--display, block);
+  width: var(--r-radio-button--marker--width, 0.75rem);
+  height: var(--r-radio-button--marker--height, 0.75rem);
+  position: var(--r-radio-button--marker--position, absolute);
+  top: var(--r-radio-button--marker--top, calc(50% - 0.375rem));
+  left: var(--r-radio-button--marker--left, calc(50% - 0.375rem));
+  border-radius: var(--r-radio-button--marker--border-radius, 50%);
+  background-color: var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));
+  transition: var(--r-radio-button--marker--transition, 0.1s all);
+  transform: var(--r-radio-button--marker--transform, scale(0));
+  transform-origin: var(--r-radio-button--marker--transform-origin, center);
+}
+.r-radio-button--text {
+  flex: var(--r-radio-button--text--flex, 1);
+  display: var(--r-radio-button--text--display, flex);
+  flex-direction: var(--r-radio-button--text--flex-direction, column);
+  gap: var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));
+  font-weight: var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600));
+}
+.r-radio-button--leading {
+  min-height: var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));
+  min-width: var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));
+  color: var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));
+  display: var(--r-radio-button--leading--display, flex);
+  justify-content: var(--r-radio-button--leading--justify-content, center);
+  align-items: var(--r-radio-button--leading--align-items, start);
+}

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

@@ -0,0 +1,559 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export class RadioButton {
+    constructor() {
+        /** Value of element data within a form */
+        this.value = this.slotTextValue;
+        /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+        this.autofocus = false;
+        /** Unique id */
+        this.uniqueId = `r-radio-button-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onClick = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+            this.radioButtonClick.emit(event);
+        };
+        this.onKeydown = (event) => {
+            if (this.disabled)
+                return;
+            this.radioButtonKeydown.emit(event);
+        };
+        this.onFocus = () => {
+            this.host.classList.add('focused');
+        };
+        this.onBlur = () => {
+            this.host.classList.remove('focused');
+        };
+        this.applyAutofocus = () => {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        };
+    }
+    /** Sets focus on the radio button element */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /** Blurs the radio button element */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** Selects the radio button element */
+    async select() {
+        var _a, _b, _c;
+        if (this.checked)
+            return;
+        if (this.disabled)
+            return;
+        (_a = this.radioElements) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+            radio.checked = false;
+            radio.shadowRoot.querySelector('.r-radio-button--input').setAttribute('tabindex', '-1');
+        });
+        this.checked = true;
+        (_b = this.nativeEl) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        (_c = this.nativeEl) === null || _c === void 0 ? void 0 : _c.focus();
+        const { host, value, checked } = this;
+        this.rChange.emit({ element: host, value, checked });
+    }
+    /** Reference to the radio button elements */
+    get radioElements() {
+        if (this.groupEl) {
+            // Use :scope > to only select direct children, excluding nested radio-group buttons
+            return this.groupEl.querySelectorAll(`:scope > r-radio-button`);
+        }
+        if (this.parentFormEl) {
+            return this.parentFormEl.querySelectorAll(`r-radio-button[name=${this.name}]`);
+        }
+        return document.querySelectorAll(`r-radio-button[name=${this.name}]`);
+    }
+    /** Get the text content of the slot */
+    get slotTextValue() {
+        return this.host.textContent || null;
+    }
+    /** Identify wrapping radio group element */
+    get groupEl() {
+        return this.host.closest('r-radio-group') || null;
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || null;
+    }
+    /** Check if the radio button is leading */
+    get isLeading() {
+        return this.icon !== undefined || this.host.querySelector('[slot="leading"]') !== null || this.host.querySelector('r-radio-button-leading') !== null;
+    }
+    /** Check if the radio button is trailing */
+    get isTrailing() {
+        return this.host.querySelector('[slot="trailing"]') !== null || this.host.querySelector('r-radio-button-trailing') !== null;
+    }
+    get shouldAutofocus() {
+        return this.autofocus && (!this.groupEl || !this.groupEl.autofocus);
+    }
+    componentWillLoad() {
+        if (!this.initialState)
+            this.initialState = this.checked;
+        if (this.groupEl && !this.name) {
+            this.name = this.groupEl.name;
+        }
+    }
+    componentDidLoad() {
+        if (this.shouldAutofocus)
+            this.applyAutofocus();
+    }
+    render() {
+        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error, autofocus } = this;
+        const inputAttrs = {
+            type: 'radio',
+            tabindex: '-1',
+            name,
+            value,
+            disabled,
+            checked,
+            required,
+            autofocus
+        };
+        return (h(Host, { key: 'ce9e98b6480c18675ac0dac4b118e574872f9af7' }, h("label", { key: 'adb23e0f9092e7c5bc2c0c70df71fa255f8a441b', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: 'cdd35d3caebb8e7eb8162dcc97c73f85067a55bb' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: '89e258e8d5b41a51ff48ad26f1e83bcdb447089a', class: "r-radio-button--box" }), this.isLeading &&
+            h("div", { key: '14e5cbd3fb54b86761f68f53f64081be3021bf9d', class: "r-radio-button--leading" }, h("slot", { key: '8350ee29002de443338179d8e926356fa080cb97', name: "leading" }, this.icon && h("r-icon", { key: 'ba1ad94e6eabd2aa113e46ddc4f5f7cdc8e39635', name: this.icon, size: "m" }))), h("div", { key: '75c735e748dc36c3c785cb048f920060f31c7c9a', class: "r-radio-button--text" }, h("slot", { key: 'b2f39d35860d6ed36bf1913836af065ed093a9b4', name: "title" }, h("div", { key: '4f6fdd992b61a01c13810fbee76f66d514f8e8e2', style: { display: 'contents' } }, h("slot", { key: 'b0d6d3eb4b9687751822fd6e026cc5eec2fe3d6b' }))), h("slot", { key: '66f2d4a0262d494b4c5c700e48abb7210e5fc8df', name: "description" }, this.description)), this.isTrailing &&
+            h("div", { key: '64bb5efd43a7e52461dff3e3416c968bbe44d1a4', class: "r-radio-button--trailing" }, h("slot", { key: '20798c2198cc1360f6b04fa0a94984bb697eda6c', name: "trailing" }))), invalid && error &&
+            h("r-hint", { key: '06bd4aa937a926612c428e9f9cfcde98e60c6ca7', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            h("r-hint", { key: '5031e00344241c184fb8ef2aa8275274415b8a3e', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+    }
+    static get is() { return "r-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of element (data) within a form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of element data within a form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "this.slotTextValue"
+            },
+            "novalidate": {
+                "type": "boolean",
+                "attribute": "novalidate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if element must be ignored during validation of the form elements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply validation error visual style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if an element shall be validated"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevents user interaction and applies disabled style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "autofocus": {
+                "type": "boolean",
+                "attribute": "autofocus",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the radio is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "hint": {
+                "type": "string",
+                "attribute": "hint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint, visually presented under the radio button,\ngiving additional context to the user"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional directions for radio-button"
+                },
+                "getter": false,
+                "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": [],
+                    "text": "Icon name from the set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rChange` event on the `<r-radio-button>` when status changes"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRRadioButtonElement,\n    value: any,\n    checked: boolean\n  }",
+                    "resolved": "{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }",
+                    "references": {
+                        "HTMLRRadioButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLRRadioButtonElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rReset",
+                "name": "rReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rReset` event on the `<r-radio-button>` onReset changes its status"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRRadioButtonElement,\n    value: any,\n    checked: boolean\n  }",
+                    "resolved": "{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }",
+                    "references": {
+                        "HTMLRRadioButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLRRadioButtonElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "radioButtonClick",
+                "name": "radioButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `radioButtonClick` event on the `<r-radio-button>` on click event"
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "radioButtonKeydown",
+                "name": "radioButtonKeydown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rChange` event on the `<r-radio-button>` when on keydown event"
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "radioButtonDeselect",
+                "name": "radioButtonDeselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `radioButtonDeselect` event on the `<r-radio-button>` when on deselect event"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRRadioButtonElement,\n    value: any,\n    checked: boolean\n  }",
+                    "resolved": "{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }",
+                    "references": {
+                        "HTMLRRadioButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLRRadioButtonElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the radio button element",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Blurs the radio button element",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects the radio button element",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}