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

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

@@ -0,0 +1,307 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Radio card component is a selectable card-based radio option.
+ * It presents a mutually exclusive choice with optional descriptive text and icon,
+ * designed for integration with bds-radio-group for orchestration.
+ * Can also be used standalone with the `name`, `value`, and `checked` props.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ * @slot description - Optional descriptive text rendered below the label.
+ *
+ * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+ */
+export class BdsRadioCard {
+    constructor() {
+        /**
+         * Value submitted with the form when this radio is selected.
+         */
+        this.value = 'on';
+        /**
+         * Tooltip content attached to the radio card content. If empty, the info icon will not be rendered.
+         */
+        this.info = '';
+        /**
+         * Name attribute stamped by the parent bds-radio-group. Set directly when used standalone.
+         */
+        this.name = '';
+        /**
+         * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+         */
+        this.label = '';
+        /**
+         * Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone.
+         */
+        this.checked = false;
+        /**
+         * Disables the radio card, preventing it from being selected and interacted with.
+         */
+        this.disabled = false;
+        /**
+         * Whether the radio card is in an error state.
+         */
+        this.error = false;
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.el.classList.add('bds-radio-card--transition');
+        });
+    }
+    get isError() {
+        return this.error && !this.disabled;
+    }
+    get hostClasses() {
+        return {
+            'bds-radio-card': true,
+            'bds-radio-card--disabled': this.disabled,
+            'bds-radio-card--checked': this.checked,
+            'bds-radio-card--error': this.isError,
+        };
+    }
+    render() {
+        return (h(Host, { key: '731577746499239383ad4ee961cc947398e11dcb', class: this.hostClasses, role: "radio", "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.isError ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'd35243914c0364136c0a316a444fd09a511072e6', class: "bds-radio-card__container" }, h("input", { key: 'd3a05c87dd20bd81799b2f9239deae2489664f39', class: "bds-radio-card__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '5fe503bdaf293f0385314b9bdda22118bba66b5d', class: "bds-radio-card__button" }, h("span", { key: 'cfbfee8d72258a6e5e462499737d20f21ac25cdb', class: "bds-radio-card__dot" })), h("div", { key: '988d2d636e09b2683a7cb475eaaf95295dc49966', class: "bds-radio-card__content" }, h("div", { key: '618afb1a448ee6b2ce1d2affc525dc00ea2974e4', class: "bds-radio-card__header" }, h("div", { key: 'bf34a2ed964c1a30d1c306ad6d3bc059de8cd4d3', class: "bds-radio-card__icon" }, h("slot", { key: 'd4429397ec53ee30ff38144297987aa606a883c8', name: "icon" })), h("div", { key: 'c34ec3aa8d7ba68b46394ea041d90a2805d0d00f', class: "bds-radio-card__title" }, this.label || h("slot", { key: 'd55874f8542acafdc6164b8012057e039ebfc0eb' }))), h("bds-typography", { key: '569dfe9079fc9b7f5cba562cd0d7d68ba738f713', variant: "helper" }, h("slot", { key: 'bc0e69fba40b230195be2f93f35fee162cc629ce', name: "description" })))), this.info && (h("span", { key: 'c90eab4eead6352f51bb6036cdff56d4241d1dda', class: "bds-radio-card__info-icon", "aria-label": this.info }, h("em", { key: '850a2ae5521eb2d8e3c01a5bd1ad19d3bb87e73c', class: "bds-icon-info-circle" }, h("bds-tooltip", { key: '188e3c5950d7a68b3e068bf6361e07850fdc907d' }, this.info))))));
+    }
+    static get is() { return "bds-radio-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-radio-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-radio-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['value']",
+                    "resolved": "string",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted with the form when this radio is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['info']",
+                    "resolved": "string",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip content attached to the radio card content. If empty, the info icon will not be rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['name']",
+                    "resolved": "string",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute stamped by the parent bds-radio-group. Set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['label']",
+                    "resolved": "string",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed next to the radio indicator. Falls back to the default slot when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "IRadioCard['checked']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio card, preventing it from being selected and interacted with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IRadioCard['error']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IRadioCard": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "referenceLocation": "IRadioCard"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio card is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection."
+                },
+                "complexType": {
+                    "original": "RadioCardChangeDetail",
+                    "resolved": "RadioCardChangeDetail",
+                    "references": {
+                        "RadioCardChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::RadioCardChangeDetail",
+                            "referenceLocation": "RadioCardChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

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

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

@@ -0,0 +1,55 @@
+@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-radio-group {
+  /**
+   * @prop --layout-count: Defines the number of columns for horizontal orientation. Default is 1.
+   */
+  --bds-divider-gap: var(--boreal-spacing-3xs);
+  display: flex;
+  flex-direction: column;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-radio-group__options {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--boreal-spacing-xs);
+}
+.bds-radio-group[orientation=horizontal] .bds-radio-group__options {
+  grid-template-columns: repeat(var(--layout-count, 1), auto);
+  justify-content: start;
+}
+.bds-radio-group[type=radiobutton] .bds-radio-group__options {
+  display: inline-flex;
+  gap: 0;
+  padding: var(--boreal-spacing-3xs);
+  border: 1px solid var(--boreal-stroke-default-light);
+  background-color: var(--boreal-ui-inverse);
+  border-radius: var(--boreal-radius-xs);
+  overflow: hidden;
+}
+.bds-radio-group[type=radiobutton][orientation=vertical] .bds-radio-group__options {
+  flex-direction: column;
+}
+.bds-radio-group[type=radiobutton].bds-radio-group--error .bds-radio-group__options {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-radio-group[type=radiobutton].bds-radio-group--error bds-radio-button.bds-radio-button--error {
+  color: var(--boreal-stroke-danger-base);
+}
+.bds-radio-group[type=radiobutton].bds-radio-group--error bds-divider[data-injected] {
+  --bds-divider-color: var(--boreal-stroke-danger-base);
+}