@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/collection/components/actions/bds-toggle/bds-toggle.js

@@ -0,0 +1,544 @@
+import { h, Host, Mixin, } from "@stencil/core";
+import { formAssociatedMixin } from "../../../mixins/index";
+import { createId, inheritAriaAttributes, setFormValue } from "../../../utils/index";
+import { TOGGLE_PLACEMENT } from "./types";
+/**
+ * Toggle/Switch component for boolean selection.
+ *
+ * @summary A toggle switch form control with label positioning support.
+ *
+ * @slot - Default slot for label content (used when `label` prop is not provided).
+ * @slot help-text - Slot for help text below the toggle (used when `helperText` prop is not provided).
+ *
+ * @property {string}  name        - Name of the form control, submitted as a key in the form data.
+ * @property {boolean} disabled    - Disables the control. Defaults to `false`.
+ * @property {boolean} required    - Marks the control as required for form submission. Defaults to `false`.
+ * @property {boolean} checked     - Whether the toggle is on. Defaults to `false`.
+ * @property {string}  placement   - Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `"left"`.
+ * @property {string}  label       - Label displayed next to the toggle. Defaults to `""`.
+ * @property {string}  helperText  - Help text displayed below the toggle. Defaults to `""`.
+ * @property {string}  value       - Value submitted with the form data when checked. Defaults to `"on"`.
+ *
+ * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+ * @fires bdsChange   - Emitted when the user toggles the switch. Payload: `IToggleEventChange`.
+ */
+export class BdsToggle extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this.inheritedAttributes = {};
+        /** Disables the control. Defaults to `false`. */
+        this.disabled = false;
+        /** Marks the control as required for form submission. Defaults to `false`. */
+        this.required = false;
+        /** Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop. */
+        this.info = '';
+        /** When `true`, applies the error visual state. */
+        this.error = false;
+        /** Message shown below the input when `error` is `true`. Replaces `helperText`. */
+        this.errorMessage = '';
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Whether the toggle is on. Defaults to `false`. */
+        this.checked = false;
+        /**
+         * Position of the label relative to the switch.
+         * Accepts `TOGGLE_PLACEMENT` values. Defaults to `TOGGLE_PLACEMENT.LEFT`.
+         */
+        this.placement = TOGGLE_PLACEMENT.LEFT;
+        /** Label displayed next to the toggle. Defaults to `""`. */
+        this.label = '';
+        /** Help text displayed below the toggle. Defaults to `""`. */
+        this.helperText = '';
+        /**
+         * Value submitted with the form data when checked.
+         * Behaves like the `value` attribute of a native `<input type="checkbox">`. Defaults to `"on"`.
+         */
+        this.value = 'on';
+        this._id = createId('bds-toggle');
+        // ---------------------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------------------
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** `true` when the last triggered validation run returned invalid. Drives the error visual state. */
+        this.validationError = false;
+        /** Error message from the last failed validator. Shown in the footer when `validationError` is `true`. */
+        this.validationMessage = '';
+        /** Local mirror of the `checked` prop, kept in sync via `@Watch` and `formStateRestoreCallback`. */
+        this.isChecked = false;
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        this.handleInvalid = (e) => {
+            e.preventDefault();
+            this.validate();
+        };
+        super();
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.isChecked = this.checked || false;
+        this.isDisabled = this.disabled || false;
+        this.inheritedAttributes = { ...inheritAriaAttributes(this.el) };
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    onCheckedChange(newValue) {
+        this.isChecked = newValue;
+        this.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+    }
+    formResetCallback() {
+        this.isChecked = false;
+        this.internals.setValidity({});
+        setFormValue(this.internals, null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.isChecked = state === this.value;
+        this.internals.setValidity({});
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    syncFormValue() {
+        setFormValue(this.internals, this.isChecked ? this.value : null);
+    }
+    validate() {
+        if (!this.isDisabled && this.required && !this.isChecked) {
+            const input = this.el.querySelector('input');
+            this.validationError = true;
+            this.validationMessage = 'This field is required';
+            this.internals.setValidity({ valueMissing: true }, this.validationMessage, input ?? this.el);
+        }
+        else {
+            this.validationError = false;
+            this.validationMessage = '';
+            this.internals.setValidity({});
+        }
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.isChecked = !this.isChecked;
+        this.syncFormValue();
+        this.validate();
+        this.valueChange.emit(this.isChecked);
+        this.bdsChange.emit({ checked: this.isChecked, value: this.value });
+    }
+    get containerClasses() {
+        return {
+            [`bds-toggle__container`]: true,
+            [`bds-toggle__container--inverse`]: this.placement === TOGGLE_PLACEMENT.RIGHT,
+            [`bds-toggle__container--checked`]: this.isChecked,
+            [`bds-toggle__container--disabled`]: this.isDisabled,
+        };
+    }
+    get canShowLabel() {
+        return this.label !== undefined && this.label.trim() !== '' && this.label !== undefined && this.label !== null;
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    render() {
+        const blockClass = 'bds-toggle';
+        const effectiveError = this.error || this.validationError;
+        const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
+        const helperContent = this.error && this.errorMessage !== ''
+            ? this.errorMessage
+            : this.validationError && this.validationMessage !== ''
+                ? this.validationMessage
+                : this.helperText;
+        return (h(Host, { key: 'b5d27825358eaadb5cbca86e48488350e6099d8f', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, h("div", { key: '9b7bb4c4551beb61ed72c9ee4a4d7ee14e746c4e', part: "container", class: this.containerClasses }, this.canShowLabel && (h("bds-typography", { key: 'a95e1b66d8452b983002348b9456aa0c3674b202', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), h("label", { key: '954125135521cd6e65c2e6c3dfa41216e6f52dd3', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, h("input", { key: 'c3e0ee266aba0bd6e8ca7fb2d3efaeb412161806', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), h("span", { key: '68912685234edb7c6ec972231c7f951531862f7c', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (h("bds-typography", { key: '3e5645d234edc1f3efe7805260def2c74bc7cd44', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
+    }
+    static get is() { return "bds-toggle"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['name']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control, submitted as a key in the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the control. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['required']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control as required for form submission. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['info']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['error']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, applies the error visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['errorMessage']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown below the input when `error` is `true`. Replaces `helperText`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['checked']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is on. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['placement']",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the label relative to the switch.\nAccepts `TOGGLE_PLACEMENT` values. Defaults to `TOGGLE_PLACEMENT.LEFT`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "TOGGLE_PLACEMENT.LEFT"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['label']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed next to the toggle. Defaults to `\"\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['helperText']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text displayed below the toggle. Defaults to `\"\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggle['value']",
+                    "resolved": "string",
+                    "references": {
+                        "IToggle": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/actions/bds-toggle/types/index.ts::IToggle",
+                            "referenceLocation": "IToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted with the form data when checked.\nBehaves like the `value` attribute of a native `<input type=\"checkbox\">`. Defaults to `\"on\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "validationError": {},
+            "validationMessage": {},
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes. Useful for 2-way binding / v-model. Payload: `boolean`."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the switch. Payload: `{ checked: boolean, value: string }`."
+                },
+                "complexType": {
+                    "original": "IToggleEventChange",
+                    "resolved": "IToggleEventChange",
+                    "references": {
+                        "IToggleEventChange": {
+                            "location": "import",
+                            "path": "./types/IEventChange",
+                            "id": "src/components/actions/bds-toggle/types/IEventChange.ts::IToggleEventChange",
+                            "referenceLocation": "IToggleEventChange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/actions/bds-toggle/types/IEventChange.js

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

package/dist/collection/components/actions/bds-toggle/types/IToggle.js

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

package/dist/collection/components/actions/bds-toggle/types/enum.js

@@ -0,0 +1,4 @@
+export const TOGGLE_PLACEMENT = {
+    LEFT: 'left',
+    RIGHT: 'right',
+};

package/dist/collection/components/actions/bds-toggle/types/index.js

@@ -0,0 +1,4 @@
+export * from './IToggle';
+export * from './types';
+export * from './enum';
+export * from './IEventChange';

package/dist/collection/components/actions/bds-toggle/types/types.js

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

package/dist/collection/components/feedback/bds-badge/bds-badge.css

@@ -0,0 +1,76 @@
+@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-badge {
+  color: var(--boreal-text-default-ink);
+  text-align: center;
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-xs);
+  font-style: normal;
+  font-weight: var(--boreal-typography-font-weight-regular);
+  line-height: var(--boreal-typography-line-height-xs);
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--boreal-spacing-ml);
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+  justify-content: center;
+  gap: var(--boreal-spacing-3xs);
+  border-radius: var(--boreal-radius-xs);
+}
+.bds-badge--default {
+  color: var(--boreal-text-default-ink);
+  background-color: var(--boreal-ui-base-light);
+}
+.bds-badge--default > [slot=icon] {
+  display: contents;
+  color: var(--boreal-icon-base);
+}
+.bds-badge--info {
+  color: var(--boreal-text-information-dark);
+  background-color: var(--boreal-ui-info-light);
+}
+.bds-badge--info > [slot=icon] {
+  display: contents;
+  color: var(--boreal-icon-info-dark);
+}
+.bds-badge--success {
+  color: var(--boreal-text-success-dark);
+  background-color: var(--boreal-ui-success-light);
+}
+.bds-badge--success > [slot=icon] {
+  display: contents;
+  color: var(--boreal-icon-success-dark);
+}
+.bds-badge--warning {
+  color: var(--boreal-text-warning-dark);
+  background-color: var(--boreal-ui-warning-light);
+}
+.bds-badge--warning > [slot=icon] {
+  display: contents;
+  color: var(--boreal-icon-warning-dark);
+}
+.bds-badge--danger {
+  color: var(--boreal-text-danger-dark);
+  background-color: var(--boreal-ui-danger-light);
+}
+.bds-badge--danger > [slot=icon] {
+  display: contents;
+  color: var(--boreal-icon-danger-dark);
+}
+.bds-badge--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}