@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,126 +0,0 @@
-: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

@@ -1,559 +0,0 @@
-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: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
-            h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
-            h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
-            h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', 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"; }
-}