@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

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

@@ -0,0 +1,648 @@
+import { Host, Mixin, h, } from "@stencil/core";
+import { formAssociatedMixin } from "../../../../mixins/form-associated.mixin";
+import { ORIENTATIONS } from "../../../../types/index";
+import { createId, validatePropValue, KEYBOARD } from "../../../../utils/index";
+const LEAF_TAGS = ['BDS-RADIO', 'BDS-RADIO-BUTTON', 'BDS-RADIO-CARD'];
+/**
+ * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
+ *
+ * @slot - Default slot for `bds-radio` child elements.
+ */
+export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this._id = createId('bds-radio-group');
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+        this.isInvalid = false;
+        /** Disables all child radios and prevents selection. Also mirrored to isDisabled @State for form-level disable support. */
+        this.disabled = false;
+        /** Shows error styling on the group helper text. Propagated to all child radios. */
+        this.error = false;
+        /** Error message rendered below the radio options when error is true. Replaces helperText. */
+        this.errorMessage = '';
+        /** Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state. */
+        this.helperText = '';
+        /** Tooltip text shown on the group label info icon. */
+        this.info = '';
+        /** Group label rendered above the radio options. */
+        this.label = '';
+        /** Layout direction of the radio options. */
+        this.orientation = 'vertical';
+        /** Marks the group as required for form submission. Triggers validity error when no radio is selected. */
+        this.required = false;
+        /** Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element. */
+        this.type = 'radio';
+        /** Currently selected radio value. Synced to children on change. */
+        this.value = '';
+        /** Hides the divider between radio buttons when type is 'radiobutton'. */
+        this.joined = false;
+        this.handleKeyDown = (event) => {
+            const target = event.target;
+            if (!LEAF_TAGS.includes(target.tagName))
+                return;
+            switch (event.key) {
+                case KEYBOARD.ArrowDown:
+                case KEYBOARD.ArrowRight:
+                    this.navigateTo(target, true);
+                    event.preventDefault();
+                    break;
+                case KEYBOARD.ArrowUp:
+                case KEYBOARD.ArrowLeft:
+                    this.navigateTo(target, false);
+                    event.preventDefault();
+                    break;
+            }
+        };
+        this.handleSlotChange = () => {
+            this.updateLayoutCount();
+        };
+        this._buttonCount = 0;
+        super();
+    }
+    onJoinedChange() {
+        this.insertDividers();
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(ORIENTATIONS), ORIENTATIONS.VERTICAL, this.el, 'orientation');
+        this.insertDividers();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+        this.radioElements.forEach(el => (el.disabled = next));
+    }
+    onErrorChange(val) {
+        this.radioElements.forEach(el => (el.error = val));
+    }
+    onValueChange(val) {
+        this.radioElements.forEach(el => {
+            el.checked = el.value === val;
+            el.setAttribute('aria-checked', String(el.value === val));
+        });
+        const checked = this.radioElements.find(el => el.checked);
+        this.updateTabIndexes(checked ?? null);
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.isDisabled = this.disabled;
+        if (this.value === '') {
+            const lastChecked = Array.from(this.el.querySelectorAll('bds-radio[checked], bds-radio-button[checked], bds-radio-card[checked]')).at(-1);
+            if (lastChecked !== undefined) {
+                this.value = lastChecked.getAttribute('value') ?? '';
+            }
+        }
+    }
+    componentDidLoad() {
+        const checkedChildren = this.radioElements.filter(el => el.checked);
+        if (checkedChildren.length > 1) {
+            checkedChildren.slice(0, -1).forEach(el => (el.checked = false));
+        }
+        this.onValueChange(this.value);
+        if (this.error)
+            this.radioElements.forEach(el => (el.error = true));
+        this.updateLayoutCount();
+        this.updateTabIndexes(this.radioElements.find(el => el.checked) ?? this.radioElements.find(el => !el.disabled) ?? null);
+        this.updateFormValidity();
+    }
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        this.value = '';
+        this.isInvalid = false;
+        this.radioElements.forEach(radio => {
+            radio.checked = false;
+            radio.setAttribute('aria-checked', 'false');
+            if (!this.error)
+                radio.error = false;
+        });
+        this.internals.setFormValue(null);
+        this.updateFormValidity();
+        const first = this.radioElements.find(el => !el.disabled);
+        this.updateTabIndexes(first ?? null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        const val = typeof state === 'string' ? state : '';
+        this.value = val;
+        this.internals.setFormValue(val !== '' ? val : null);
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+        this.radioElements.forEach(el => (el.disabled = disabled));
+    }
+    handleRadioChange(event) {
+        const target = event.target;
+        if (!LEAF_TAGS.includes(target.tagName))
+            return;
+        this.radioElements
+            .filter(el => el !== target)
+            .forEach(el => {
+            el.checked = false;
+            el.setAttribute('aria-checked', 'false');
+        });
+        this.value = event.detail.value;
+        this.internals.setFormValue(this.value);
+        this.updateTabIndexes(target);
+        this.updateFormValidity();
+        this.bdsChange.emit({ value: this.value });
+        this.valueChange.emit(this.value);
+    }
+    handleInvalid(event) {
+        if (this.errorMessage !== '') {
+            event.preventDefault();
+            this.isInvalid = true;
+            this.radioElements.forEach(el => (el.error = true));
+        }
+    }
+    /** Returns whether the group's current value satisfies the browser's built-in constraint validation. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    navigateTo(current, forward) {
+        const elements = this.radioElements.filter(el => !el.disabled);
+        if (elements.length === 0)
+            return;
+        const idx = elements.indexOf(current);
+        const newIndex = (elements.length + idx + (forward ? 1 : -1)) % elements.length;
+        const next = elements[newIndex];
+        next.checked = true;
+        next.setAttribute('aria-checked', 'true');
+        this.radioElements
+            .filter(el => el !== next)
+            .forEach(el => {
+            el.checked = false;
+            el.setAttribute('aria-checked', 'false');
+        });
+        this.value = next.value;
+        this.internals.setFormValue(this.value);
+        this.updateTabIndexes(next);
+        this.updateFormValidity();
+        this.bdsChange.emit({ value: this.value });
+        this.valueChange.emit(this.value);
+        next.focus();
+    }
+    insertDividers() {
+        this.el.querySelectorAll('bds-divider[data-injected]').forEach(d => d.remove());
+        if (this.type !== 'radiobutton' || this.joined)
+            return;
+        const dividerOrientation = this.orientation === ORIENTATIONS.HORIZONTAL ? ORIENTATIONS.VERTICAL : ORIENTATIONS.HORIZONTAL;
+        const buttons = this.radioElements.filter((el) => el.tagName === 'BDS-RADIO-BUTTON');
+        buttons.forEach((btn, i) => {
+            if (i === 0)
+                return;
+            const divider = document.createElement('bds-divider');
+            divider.setAttribute('orientation', dividerOrientation);
+            divider.setAttribute('data-injected', '');
+            btn.parentNode?.insertBefore(divider, btn);
+        });
+    }
+    get radioElements() {
+        return Array.from(this.el.querySelectorAll('bds-radio, bds-radio-button, bds-radio-card'));
+    }
+    syncFormValue() {
+        this.internals.setFormValue(this.value !== '' ? this.value : null);
+        this.updateFormValidity();
+    }
+    updateFormValidity() {
+        if (this.required && this.value === '') {
+            const anchor = this.radioElements.find(el => !el.disabled);
+            this.internals.setValidity({ valueMissing: true }, this.errorMessage !== '' ? this.errorMessage : 'Please select an option.', anchor);
+        }
+        else {
+            this.internals.setValidity({});
+            if (this.isInvalid) {
+                this.isInvalid = false;
+                if (!this.error)
+                    this.radioElements.forEach(el => (el.error = false));
+            }
+        }
+    }
+    updateLayoutCount() {
+        const count = this.radioElements.length;
+        this.el.style.setProperty('--layout-count', `${count}`);
+        if (count !== this._buttonCount) {
+            this._buttonCount = count;
+            this.insertDividers();
+        }
+    }
+    updateTabIndexes(active) {
+        this.radioElements.forEach(el => el.setAttribute('tabindex', '-1'));
+        if (active !== null)
+            active.setAttribute('tabindex', '0');
+    }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
+    }
+    get classMap() {
+        return {
+            'bds-radio-group': true,
+            'bds-radio-group--disabled': this.isDisabled,
+            'bds-radio-group--error': this.isError,
+            'bds-radio-group--required': this.required,
+        };
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        const helperId = `${this._id}-helper`;
+        const showError = this.isError;
+        const typographyState = this.isDisabled ? 'disabled' : showError ? 'error' : 'default';
+        const helperContent = showError && this.errorMessage !== '' ? this.errorMessage : this.helperText;
+        return (h(Host, { key: '983eacc6649cdca62de5a73780c3ca0eb8e26879', class: this.classMap, role: "radiogroup", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": helperContent !== '' ? helperId : undefined, "aria-invalid": showError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onKeyDown: this.handleKeyDown }, this.label && (h("bds-typography", { key: '80461fca6630261b13198a69185cf92dda18704f', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), h("div", { key: '6fda8a3d053c9b3998177d29b8dc593c1d21f5cf', class: "bds-radio-group__options" }, h("slot", { key: '5d8a8a9d040b862173ea8d43e34c260377114f58', onSlotchange: this.handleSlotChange })), helperContent && (h("bds-typography", { key: '31bd0d32d0e72e12be4ff04677ab99b3a7139fd0', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+    }
+    static get is() { return "bds-radio-group"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "State",
+                            "text": "for form-level disable support."
+                        }],
+                    "text": "Disables all child radios and prevents selection. Also mirrored to isDisabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows error styling on the group helper text. Propagated to all child radios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message rendered below the radio options when error is true. Replaces helperText."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text shown on the group label info icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group label rendered above the radio options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control; submitted as the field key in FormData."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "@/types",
+                            "id": "src/types/index.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the radio options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the group as required for form submission. Triggers validity error when no radio is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupType",
+                    "resolved": "\"radio\" | \"radiobutton\" | \"radiocard\"",
+                    "references": {
+                        "RadioGroupType": {
+                            "location": "import",
+                            "path": "./types/types",
+                            "id": "src/components/forms/bds-radio/bds-radio-group/types/types.ts::RadioGroupType",
+                            "referenceLocation": "RadioGroupType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'radio'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected radio value. Synced to children on change."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "joined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the divider between radio buttons when type is 'radiobutton'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "joined",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "isInvalid": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected radio changes. Payload includes the new value."
+                },
+                "complexType": {
+                    "original": "RadioGroupChangeDetail",
+                    "resolved": "RadioGroupChangeDetail",
+                    "references": {
+                        "RadioGroupChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IRadioGroup",
+                            "id": "src/components/forms/bds-radio/bds-radio-group/types/IRadioGroup.ts::RadioGroupChangeDetail",
+                            "referenceLocation": "RadioGroupChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected radio changes. Used for v-model two-way binding in Vue."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the group's current value satisfies the browser's built-in constraint validation.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports the group's validity state to the user, showing native validation UI if invalid.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "joined",
+                "methodName": "onJoinedChange"
+            }, {
+                "propName": "orientation",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "error",
+                "methodName": "onErrorChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bdsChange",
+                "method": "handleRadioChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/forms/bds-radio/bds-radio-group/types/IRadioGroup.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/forms/bds-radio/bds-radio-group/types/enum.js

@@ -0,0 +1,5 @@
+export const RADIO_GROUP_TYPES = {
+    RADIO: 'radio',
+    RADIO_BUTTON: 'radiobutton',
+    RADIO_CARD: 'radiocard',
+};

package/dist/collection/components/forms/bds-radio/bds-radio-group/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/forms/bds-select/bds-select.css

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+bds-select {
+  position: relative;
+  display: flex;
+}
+bds-select .bds-list-menu {
+  --bds-list-menu-max-width: 100%;
+}