@beeq/core 1.10.0-beta.3 → 1.10.0-beta.4

package/dist/collection/components/radio-group/bq-radio-group.js

@@ -2,9 +2,15 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { RADIO_GROUP_ORIENTATION } from "./bq-radio-group.types";
-import { debounce, isHTMLElement, isNil, validatePropValue } from "../../shared/utils";
+import { debounce, getNextElement, isEventTargetChildOfElement, isNil, validatePropValue, } from "../../shared/utils";
+const KEY_MAP = {
+    ArrowDown: 'forward',
+    ArrowRight: 'forward',
+    ArrowUp: 'backward',
+    ArrowLeft: 'backward',
+};
 /**
  * The radio group is a user interface component that groups radio buttons to enable a single selection within the group.
  *
@@ -47,8 +53,11 @@ import { debounce, isHTMLElement, isNil, validatePropValue } from "../../shared/
 export class BqRadioGroup {
     // Own Properties
     // ====================
-    focusedBqRadio = null;
+    initialValue;
     debouncedBqChange;
+    focusedBqRadio = null;
+    radioElementsSet = new Set();
+    cachedRadioElements = [];
     // Reference to host HTML element
     // ===================================
     internals;
@@ -56,6 +65,8 @@ export class BqRadioGroup {
     // State() variables
     // Inlined decorator, alphabetical order
     // =======================================
+    checkedRadio;
+    tabIndex = '0';
     // Public Property API
     // ========================
     /** If true, all radio inputs in the group will display a background on hover */
@@ -78,33 +89,42 @@ export class BqRadioGroup {
     value;
     // Prop lifecycle events
     // =======================
+    handleDebounceTimeChange() {
+        const MIN_DEBOUNCE_TIME = 0;
+        const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);
+        if (normalizedDebounceTime !== this.debounceTime) {
+            this.debounceTime = normalizedDebounceTime;
+        }
+        this.debouncedBqChange?.cancel();
+        this.debouncedBqChange = debounce((event) => {
+            this.bqChange?.emit(event);
+        }, this.debounceTime);
+    }
+    handleDisabledChange() {
+        this.tabIndex = this.disabled ? '-1' : '0';
+        this.updateRadioTabIndexes();
+    }
     handleGroupProperties() {
-        if (!this.bqRadioElements)
-            return;
-        this.bqRadioElements.forEach((bqRadio) => {
-            bqRadio.backgroundOnHover = this.backgroundOnHover;
-            bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;
-            bqRadio.disabled = this.disabled;
-            bqRadio.name = this.name;
-            bqRadio.required = this.required;
-        });
+        this.updateRadioProperties();
     }
     checkPropValues() {
         validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');
     }
-    checkDebounceChange() {
-        if (this.debounceTime < 0) {
-            this.debounceTime = Math.max(0, this.debounceTime);
+    handleRequiredChange() {
+        this.updateFormValidity();
+    }
+    handleValueChange() {
+        this.updateRadioProperties();
+        this.updateFormValidity();
+        // Find and update the checked radio based on the new value
+        const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);
+        if (newCheckedRadio) {
+            this.checkedRadio = newCheckedRadio;
+            this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });
         }
-        if (this.debouncedBqChange) {
-            this.debouncedBqChange.cancel();
+        else {
+            this.checkedRadio = undefined;
         }
-        this.debouncedBqChange = debounce((event) => {
-            this.bqChange.emit(event);
-        }, this.debounceTime);
-    }
-    async handleRequiredChange() {
-        await this.updateFormValidity();
     }
     // Events section
     // Requires JSDocs for public API documentation
@@ -115,68 +135,65 @@ export class BqRadioGroup {
     // Ordered by their natural call order
     // =====================================
     componentWillLoad() {
-        this.checkPropValues();
-        this.checkDebounceChange();
-        this.internals.setFormValue(this.value);
+        this.initialValue = this.value;
+        this.handleDebounceTimeChange();
+        this.internals.setFormValue(this.value ?? null);
+        this.updateCustomStates();
+        this.updateFormValidity();
     }
-    componentDidLoad() {
-        this.handleGroupProperties();
+    disconnectedCallback() {
+        this.debouncedBqChange?.cancel();
     }
-    async formAssociatedCallback() {
-        this.internals.setFormValue(this.value);
-        await this.updateFormValidity();
+    formAssociatedCallback() {
+        this.internals.setFormValue(this.value ?? null);
+        this.updateFormValidity();
     }
     formResetCallback() {
-        this.value = null;
-        this.internals.setFormValue(this.value);
+        this.value = this.initialValue;
+        this.internals.setFormValue(this.value ?? null);
+        this.updateFormValidity();
+        this.updateCustomStates();
     }
     // Listeners
     // ==============
-    onMouseDown(event) {
-        if (!isNil(this.focusedBqRadio) && isHTMLElement(event.target, 'bq-radio') && this.el.contains(event.target)) {
-            this.focusedBqRadio = event.target;
-        }
-    }
-    onBqClick(event) {
-        if (isNil(this.focusedBqRadio)) {
-            this.focusedBqRadio = event.detail;
-        }
-        if (event.detail.value === this.value)
+    async onBqClick(event) {
+        if (!isEventTargetChildOfElement(event, this.el))
             return;
-        const target = event.detail;
-        this.bqRadioElements.forEach((bqRadioElement) => (bqRadioElement.checked = bqRadioElement === target));
-        this.setCheckedRadioItem(event.detail);
+        const { target, value } = event.detail;
+        if (value === this.value)
+            return;
+        requestAnimationFrame(() => {
+            if (event.defaultPrevented)
+                return;
+            this.updateRadioSelection(target);
+        });
     }
     onBqKeyDown(event) {
-        const { target } = event;
-        if (!isHTMLElement(target, 'bq-radio'))
+        if (!isEventTargetChildOfElement(event, this.el))
             return;
-        switch (event.detail.key) {
-            case 'ArrowDown':
-            case 'ArrowRight': {
-                this.focusRadioInputSibling(target, true);
-                break;
-            }
-            case 'ArrowUp':
-            case 'ArrowLeft': {
-                this.focusRadioInputSibling(target, false);
-                break;
-            }
-            default:
-        }
+        const direction = KEY_MAP[event.detail.key];
+        if (!direction)
+            return;
+        this.focusRadioInputSibling(event.detail.target, direction);
     }
     onBqFocus(event) {
-        if (event.detail !== this.focusedBqRadio)
+        if (!isEventTargetChildOfElement(event, this.el))
             return;
-        event.stopPropagation();
+        const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;
+        if (shouldStopPropagation) {
+            event.stopPropagation();
+        }
+        this.focusedBqRadio = event.detail;
     }
     onBqBlur(event) {
-        if (!isNil(this.focusedBqRadio) && event.detail !== this.focusedBqRadio) {
+        if (!isEventTargetChildOfElement(event, this.el))
+            return;
+        const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;
+        if (shouldStopPropagation) {
             event.stopPropagation();
+            return;
         }
-        else {
-            this.focusedBqRadio = null;
-        }
+        this.focusedBqRadio = null;
     }
     // Public methods API
     // These methods are exposed on the host element.
@@ -188,55 +205,143 @@ export class BqRadioGroup {
     // Internal business logic.
     // These methods cannot be called from the host element.
     // =======================================================
-    focusRadioInputSibling = (currentTarget, next) => {
-        this.bqRadioElements.forEach((bqRadioElement, index, elements) => {
-            if (bqRadioElement === currentTarget) {
-                const target = this.getNextRadioElement(elements, index, next);
-                currentTarget.checked = false;
-                target.vFocus();
-                this.setCheckedRadioItem(target);
-            }
+    /**
+     * Initializes the radio elements set by querying the host element for `ds-radio` elements.
+     * This is done to avoid re-querying the host element for radio elements on every change.
+     */
+    initializeRadioElements = () => {
+        this.radioElementsSet.clear();
+        this.el.querySelectorAll('bq-radio').forEach((radio) => this.radioElementsSet.add(radio));
+        // Caching the radio elements in an array for faster access and iteration
+        this.cachedRadioElements = Array.from(this.radioElementsSet);
+        // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0
+        this.tabIndex = this.cachedRadioElements.length === 0 || this.disabled ? '-1' : '0';
+        // Set initial tabIndex for all radios
+        this.updateRadioTabIndexes();
+    };
+    /**
+     * Sets tabIndex for all radio elements based on current state
+     * Handles all scenarios: disabled state, checked radio, value matching, fallback to first
+     */
+    updateRadioTabIndexes = () => {
+        if (this.cachedRadioElements.length === 0)
+            return;
+        // If disabled, all radios get tabIndex -1
+        if (this.disabled) {
+            this.cachedRadioElements.forEach((radio) => (radio.tabIndex = -1));
+            return;
+        }
+        // Find which radio should be focusable
+        let focusableRadio;
+        // Priority 1: Currently checked radio
+        focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);
+        // Priority 2: Radio matching current value
+        if (!focusableRadio && this.value) {
+            focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);
+        }
+        // Priority 3: First enabled radio (fallback)
+        if (!focusableRadio) {
+            focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);
+        }
+        // Apply tabIndex to all radios
+        this.cachedRadioElements.forEach((radio) => {
+            radio.tabIndex = radio === focusableRadio ? 0 : -1;
         });
     };
-    setCheckedRadioItem = (target) => {
-        const { value } = target;
+    /**
+     * Updates the radio selection and focus.
+     * @param target - The radio element to update.
+     */
+    updateRadioSelection = (target) => {
+        // Only uncheck the previously checked radio if it's different
+        if (this.checkedRadio && this.checkedRadio !== target) {
+            this.checkedRadio.checked = false;
+            this.checkedRadio.tabIndex = -1;
+        }
         target.checked = true;
-        this.value = value;
-        this.focusedBqRadio = target;
-        this.internals.setFormValue(value);
-        this.debouncedBqChange({ value, target });
+        target.tabIndex = 0;
+        target.vFocus();
+        this.checkedRadio = target;
+        this.value = target.value;
+        this.internals?.setFormValue(this.value ?? null);
+        this.updateRadioTabIndexes();
     };
-    getNextRadioElement = (elements, index, forward = true) => {
-        let element = null;
-        let elementIndex = index;
-        do {
-            elementIndex = (elements.length + (elementIndex + (forward ? 1 : -1))) % elements.length;
-            element = elements[elementIndex];
-        } while (element.disabled);
-        return element;
+    /**
+     * Synchronizes properties of child radio elements with the group's state.
+     */
+    updateRadioProperties = () => {
+        if (this.cachedRadioElements.length === 0)
+            return;
+        const { backgroundOnHover, disabled, name, required, value } = this;
+        for (const radio of this.cachedRadioElements) {
+            radio.backgroundOnHover = backgroundOnHover;
+            radio.checked = value === radio.value;
+            // This will allows us to force all radio elements to be disabled
+            // while keeping the disabled state of the radio element if it was set individually by the user
+            radio.forceDisabled = disabled;
+            radio.name = name;
+            radio.required = required;
+        }
+    };
+    /**
+     * Focuses the next/previous radio element in the group based on the current target.
+     * Handles circular navigation and skips disabled elements.
+     * @param currentTarget - The currently focused radio element
+     * @param direction - The navigation direction ('forward' | 'backward')
+     */
+    focusRadioInputSibling = (currentTarget, direction) => {
+        // If there is none or only one radio element, there will be no sibling to focus
+        if (this.cachedRadioElements.length <= 1)
+            return;
+        const currentIndex = this.cachedRadioElements.indexOf(currentTarget);
+        // If the index of the radio element target is not found, it means that it's not part of the group
+        if (currentIndex === -1)
+            return;
+        const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);
+        this.updateRadioSelection(nextElement);
     };
     updateFormValidity = async () => {
         const { internals, required, requiredValidationMessage, value } = this;
         // Clear the validity state
         internals?.states.clear();
         if (!required || (required && !isNil(value))) {
-            // If the checkbox is not required or is checked, set the validity state to valid
+            // If the radio group is not required or has a value, set the validity state to valid
             internals?.states.add('valid');
             internals?.setValidity({});
             return;
         }
-        // If the checkbox is required and not checked, set the validity state to invalid
+        const firstRadio = this.cachedRadioElements[0];
+        if (!firstRadio)
+            return;
+        // If the radio group is required and has no value, set the validity state to invalid
         internals?.states.add('invalid');
-        internals?.setValidity({ valueMissing: true }, requiredValidationMessage, await this.bqRadioElements[0].getNativeInput());
+        // We need to pass the native input element to the setValidity method as anchor element
+        internals?.setValidity({ valueMissing: true }, requiredValidationMessage ?? 'Please select an option', await firstRadio.getNativeInput());
+    };
+    /**
+     * Updates the custom states based on the component properties.
+     * The custom states can be used to style the component based on the component properties.
+     * The custom states are `disabled`, based on the component properties.
+     */
+    updateCustomStates = () => {
+        const states = new Set();
+        if (this.disabled)
+            states.add('disabled');
+        if (this.orientation)
+            states.add(this.orientation);
+        // Update states
+        this.internals?.states.clear();
+        states.forEach((state) => this.internals?.states.add(state));
+    };
+    handleSlotChange = () => {
+        this.initializeRadioElements();
+        this.updateRadioProperties();
     };
-    get bqRadioElements() {
-        return Array.from(this.el.querySelectorAll('bq-radio'));
-    }
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("fieldset", { key: 'f6802fdedbf33e5863a68e159d1add1dfc3df7a8', class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, "aria-labelledby": "bq-radio-group__label", "aria-controls": "bq-radiogroup", role: "radiogroup", part: "base" }, h("legend", { key: '379b6151d63422ed543b7c520ff035f6ae4154a0', part: "label" }, h("slot", { key: '622478a3c8c4acb4d656aef8bedbc7961e5aa6e1', id: "bq-radiogroup__label", name: "label" })), h("div", { key: 'e993a782177088dafd25b49a693e6dcf8255b2c2', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: 'cf52a7bdd57bc4e6204ec4355a2c335bd6a4b7e4', id: "bq-radiogroup" }))));
+        return (h(Host, { key: '0f3d7f7b43b4d98eaee94ffa79ad0e23c0f80cd9', tabindex: this.tabIndex }, h("fieldset", { key: 'e48c6c15370dd881ed26b7df9e578350f3a42e34', class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, "aria-controls": "bq-radiogroup", "aria-labelledby": "bq-radio-group__label", "aria-disabled": this.disabled, "aria-required": this.required, disabled: this.disabled, role: "radiogroup", part: "base" }, h("legend", { key: '56faba3e726d627fe1b76f96d2eb0dc352c72165', part: "label" }, h("slot", { key: '87ae7a460396a150e136123be5b895f2e50b229e', id: "bq-radiogroup__label", name: "label" })), h("div", { key: '6aad53784020d3e1a4fe1a22d4e53812f6311058', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: '9753cae782f6e3e4a2a419d31d786b7d838336bd', id: "bq-radiogroup", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -264,7 +369,7 @@ export class BqRadioGroup {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If true, all radio inputs in the group will display a background on hover"
@@ -304,7 +409,7 @@ export class BqRadioGroup {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If true radio inputs are disabled"
@@ -324,7 +429,7 @@ export class BqRadioGroup {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If true displays fieldset"
@@ -369,7 +474,7 @@ export class BqRadioGroup {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The display orientation of the radio inputs"
@@ -389,7 +494,7 @@ export class BqRadioGroup {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If true, the radio group is required"
@@ -439,6 +544,12 @@ export class BqRadioGroup {
             }
         };
     }
+    static get states() {
+        return {
+            "checkedRadio": {},
+            "tabIndex": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bqChange",
@@ -465,6 +576,12 @@ export class BqRadioGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "debounceTime",
+                "methodName": "handleDebounceTimeChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
                 "propName": "backgroundOnHover",
                 "methodName": "handleGroupProperties"
             }, {
@@ -476,35 +593,23 @@ export class BqRadioGroup {
             }, {
                 "propName": "required",
                 "methodName": "handleGroupProperties"
-            }, {
-                "propName": "value",
-                "methodName": "handleGroupProperties"
             }, {
                 "propName": "orientation",
                 "methodName": "checkPropValues"
-            }, {
-                "propName": "debounceTime",
-                "methodName": "checkDebounceChange"
             }, {
                 "propName": "required",
                 "methodName": "handleRequiredChange"
             }, {
                 "propName": "value",
-                "methodName": "handleRequiredChange"
+                "methodName": "handleValueChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "mousedown",
-                "method": "onMouseDown",
-                "target": "body",
-                "capture": false,
-                "passive": true
-            }, {
                 "name": "bqClick",
                 "method": "onBqClick",
                 "target": undefined,
-                "capture": false,
+                "capture": true,
                 "passive": false
             }, {
                 "name": "bqKeyDown",

package/dist/collection/components/radio-group/bq-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-radio-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { debounce, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\n\n/**\n * The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n *\n * @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n *   <span slot=\"label\">radio group</span>\n *   <bq-radio value=\"option1\">Radio option 1</bq-radio>\n *   <bq-radio value=\"option2\">Radio option 2</bq-radio>\n *   <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n *\n * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" | \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the radio state changes\n *\n * @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n *\n * @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n */\n@Component({\n  tag: 'bq-radio-group',\n  styleUrl: './scss/bq-radio-group.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqRadioGroup {\n  // Own Properties\n  // ====================\n\n  private focusedBqRadio: HTMLBqRadioElement | null = null;\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqRadioGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, all radio inputs in the group will display a background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true radio inputs are disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** If true displays fieldset */\n  @Prop({ reflect: true }) fieldset? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The display orientation of the radio inputs */\n  @Prop({ reflect: true, mutable: true }) orientation?: TRadioGroupOrientation = 'vertical';\n\n  /** If true, the radio group is required */\n  @Prop({ reflect: true }) required? = false;\n\n  /** The native form validation message when the radio group is required */\n  @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n  /** A string representing the value of the radio. */\n  @Prop({ reflect: true, mutable: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('backgroundOnHover')\n  @Watch('disabled')\n  @Watch('name')\n  @Watch('required')\n  @Watch('value')\n  handleGroupProperties() {\n    if (!this.bqRadioElements) return;\n\n    this.bqRadioElements.forEach((bqRadio) => {\n      bqRadio.backgroundOnHover = this.backgroundOnHover;\n      bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;\n      bqRadio.disabled = this.disabled;\n      bqRadio.name = this.name;\n      bqRadio.required = this.required;\n    });\n  }\n\n  @Watch('orientation')\n  checkPropValues() {\n    validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n  }\n\n  @Watch('debounceTime')\n  checkDebounceChange() {\n    if (this.debounceTime < 0) {\n      this.debounceTime = Math.max(0, this.debounceTime);\n    }\n\n    if (this.debouncedBqChange) {\n      this.debouncedBqChange.cancel();\n    }\n\n    this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n      this.bqChange.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('required')\n  @Watch('value')\n  async handleRequiredChange() {\n    await this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the radio state changes */\n  @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.checkDebounceChange();\n    this.internals.setFormValue(this.value);\n  }\n\n  componentDidLoad() {\n    this.handleGroupProperties();\n  }\n\n  async formAssociatedCallback() {\n    this.internals.setFormValue(this.value);\n    await this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.value = null;\n    this.internals.setFormValue(this.value);\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('mousedown', { target: 'body', passive: true })\n  onMouseDown(event: MouseEvent) {\n    if (!isNil(this.focusedBqRadio) && isHTMLElement(event.target, 'bq-radio') && this.el.contains(event.target)) {\n      this.focusedBqRadio = event.target;\n    }\n  }\n\n  @Listen('bqClick')\n  onBqClick(event: CustomEvent<HTMLBqRadioElement>) {\n    if (isNil(this.focusedBqRadio)) {\n      this.focusedBqRadio = event.detail;\n    }\n\n    if (event.detail.value === this.value) return;\n\n    const target = event.detail;\n    this.bqRadioElements.forEach((bqRadioElement) => (bqRadioElement.checked = bqRadioElement === target));\n    this.setCheckedRadioItem(event.detail);\n  }\n\n  @Listen('bqKeyDown')\n  onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n    const { target } = event;\n\n    if (!isHTMLElement(target, 'bq-radio')) return;\n\n    switch (event.detail.key) {\n      case 'ArrowDown':\n      case 'ArrowRight': {\n        this.focusRadioInputSibling(target, true);\n        break;\n      }\n\n      case 'ArrowUp':\n      case 'ArrowLeft': {\n        this.focusRadioInputSibling(target, false);\n        break;\n      }\n\n      default:\n    }\n  }\n\n  @Listen('bqFocus', { capture: true })\n  onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n    if (event.detail !== this.focusedBqRadio) return;\n\n    event.stopPropagation();\n  }\n\n  @Listen('bqBlur', { capture: true })\n  onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n    if (!isNil(this.focusedBqRadio) && event.detail !== this.focusedBqRadio) {\n      event.stopPropagation();\n    } else {\n      this.focusedBqRadio = null;\n    }\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, next: boolean): void => {\n    this.bqRadioElements.forEach((bqRadioElement, index, elements) => {\n      if (bqRadioElement === currentTarget) {\n        const target = this.getNextRadioElement(elements, index, next);\n\n        currentTarget.checked = false;\n\n        target.vFocus();\n        this.setCheckedRadioItem(target);\n      }\n    });\n  };\n\n  private setCheckedRadioItem = (target: HTMLBqRadioElement): void => {\n    const { value } = target;\n    target.checked = true;\n    this.value = value;\n    this.focusedBqRadio = target;\n    this.internals.setFormValue(value);\n    this.debouncedBqChange({ value, target });\n  };\n\n  private getNextRadioElement = (elements: HTMLBqRadioElement[], index: number, forward = true): HTMLBqRadioElement => {\n    let element = null;\n    let elementIndex = index;\n\n    do {\n      elementIndex = (elements.length + (elementIndex + (forward ? 1 : -1))) % elements.length;\n      element = elements[elementIndex];\n    } while (element.disabled);\n\n    return element;\n  };\n\n  private updateFormValidity = async (): Promise<void> => {\n    const { internals, required, requiredValidationMessage, value } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!required || (required && !isNil(value))) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // If the checkbox is required and not checked, set the validity state to invalid\n    internals?.states.add('invalid');\n    internals?.setValidity(\n      { valueMissing: true },\n      requiredValidationMessage,\n      await this.bqRadioElements[0].getNativeInput(),\n    );\n  };\n\n  private get bqRadioElements(): HTMLBqRadioElement[] {\n    return Array.from(this.el.querySelectorAll('bq-radio'));\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <fieldset\n        class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n        aria-labelledby=\"bq-radio-group__label\"\n        aria-controls=\"bq-radiogroup\"\n        role=\"radiogroup\"\n        part=\"base\"\n      >\n        <legend part=\"label\">\n          <slot id=\"bq-radiogroup__label\" name=\"label\" />\n        </legend>\n        <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n          <slot id=\"bq-radiogroup\" />\n        </div>\n      </fieldset>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-radio-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport {\n  debounce,\n  getNextElement,\n  isEventTargetChildOfElement,\n  isNil,\n  TDebounce,\n  validatePropValue,\n} from '../../shared/utils';\n\nconst KEY_MAP = {\n  ArrowDown: 'forward',\n  ArrowRight: 'forward',\n  ArrowUp: 'backward',\n  ArrowLeft: 'backward',\n} as const;\n\ntype Direction = (typeof KEY_MAP)[keyof typeof KEY_MAP];\n\n/**\n * The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n *\n * @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n *   <span slot=\"label\">radio group</span>\n *   <bq-radio value=\"option1\">Radio option 1</bq-radio>\n *   <bq-radio value=\"option2\">Radio option 2</bq-radio>\n *   <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n *\n * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" | \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the radio state changes\n *\n * @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n *\n * @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n */\n@Component({\n  tag: 'bq-radio-group',\n  styleUrl: './scss/bq-radio-group.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqRadioGroup {\n  // Own Properties\n  // ====================\n\n  private initialValue?: string;\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n  private focusedBqRadio: HTMLBqRadioElement | null = null;\n  private readonly radioElementsSet = new Set<HTMLBqRadioElement>();\n  private cachedRadioElements: HTMLBqRadioElement[] = [];\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqRadioGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() checkedRadio?: HTMLBqRadioElement;\n  @State() tabIndex: '0' | '-1' = '0';\n\n  // Public Property API\n  // ========================\n\n  /** If true, all radio inputs in the group will display a background on hover */\n  @Prop({ reflect: true }) backgroundOnHover = false;\n\n  /** A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true radio inputs are disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If true displays fieldset */\n  @Prop({ reflect: true }) fieldset = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The display orientation of the radio inputs */\n  @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n  /** If true, the radio group is required */\n  @Prop({ reflect: true }) required = false;\n\n  /** The native form validation message when the radio group is required */\n  @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n  /** A string representing the value of the radio. */\n  @Prop({ reflect: true, mutable: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  handleDebounceTimeChange() {\n    const MIN_DEBOUNCE_TIME = 0;\n    const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);\n\n    if (normalizedDebounceTime !== this.debounceTime) {\n      this.debounceTime = normalizedDebounceTime;\n    }\n\n    this.debouncedBqChange?.cancel();\n    this.debouncedBqChange = debounce((event: { value: string; target: HTMLBqRadioElement }): void => {\n      this.bqChange?.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    this.tabIndex = this.disabled ? '-1' : '0';\n    this.updateRadioTabIndexes();\n  }\n\n  @Watch('backgroundOnHover')\n  @Watch('disabled')\n  @Watch('name')\n  @Watch('required')\n  handleGroupProperties() {\n    this.updateRadioProperties();\n  }\n\n  @Watch('orientation')\n  checkPropValues() {\n    validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n  }\n\n  @Watch('required')\n  handleRequiredChange() {\n    this.updateFormValidity();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateRadioProperties();\n    this.updateFormValidity();\n\n    // Find and update the checked radio based on the new value\n    const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n    if (newCheckedRadio) {\n      this.checkedRadio = newCheckedRadio;\n      this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });\n    } else {\n      this.checkedRadio = undefined;\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the radio state changes */\n  @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.handleDebounceTimeChange();\n    this.internals.setFormValue(this.value ?? null);\n\n    this.updateCustomStates();\n    this.updateFormValidity();\n  }\n\n  disconnectedCallback() {\n    this.debouncedBqChange?.cancel();\n  }\n\n  formAssociatedCallback() {\n    this.internals.setFormValue(this.value ?? null);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.internals.setFormValue(this.value ?? null);\n    this.updateFormValidity();\n    this.updateCustomStates();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { capture: true })\n  async onBqClick(event: CustomEvent<{ value: string; target: HTMLBqRadioElement }>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const { target, value } = event.detail;\n    if (value === this.value) return;\n\n    requestAnimationFrame(() => {\n      if (event.defaultPrevented) return;\n      this.updateRadioSelection(target);\n    });\n  }\n\n  @Listen('bqKeyDown')\n  onBqKeyDown(event: CustomEvent<{ key: string; target: HTMLBqRadioElement }>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const direction: Direction | undefined = KEY_MAP[event.detail.key];\n    if (!direction) return;\n\n    this.focusRadioInputSibling(event.detail.target, direction);\n  }\n\n  @Listen('bqFocus', { capture: true })\n  onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;\n    if (shouldStopPropagation) {\n      event.stopPropagation();\n    }\n\n    this.focusedBqRadio = event.detail;\n  }\n\n  @Listen('bqBlur', { capture: true })\n  onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;\n    if (shouldStopPropagation) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.focusedBqRadio = null;\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  /**\n   * Initializes the radio elements set by querying the host element for `ds-radio` elements.\n   * This is done to avoid re-querying the host element for radio elements on every change.\n   */\n  private initializeRadioElements = (): void => {\n    this.radioElementsSet.clear();\n    this.el.querySelectorAll('bq-radio').forEach((radio) => this.radioElementsSet.add(radio));\n    // Caching the radio elements in an array for faster access and iteration\n    this.cachedRadioElements = Array.from(this.radioElementsSet);\n    // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0\n    this.tabIndex = this.cachedRadioElements.length === 0 || this.disabled ? '-1' : '0';\n    // Set initial tabIndex for all radios\n    this.updateRadioTabIndexes();\n  };\n\n  /**\n   * Sets tabIndex for all radio elements based on current state\n   * Handles all scenarios: disabled state, checked radio, value matching, fallback to first\n   */\n  private updateRadioTabIndexes = (): void => {\n    if (this.cachedRadioElements.length === 0) return;\n\n    // If disabled, all radios get tabIndex -1\n    if (this.disabled) {\n      this.cachedRadioElements.forEach((radio) => (radio.tabIndex = -1));\n      return;\n    }\n\n    // Find which radio should be focusable\n    let focusableRadio: HTMLBqRadioElement | undefined;\n\n    // Priority 1: Currently checked radio\n    focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n    // Priority 2: Radio matching current value\n    if (!focusableRadio && this.value) {\n      focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n    }\n\n    // Priority 3: First enabled radio (fallback)\n    if (!focusableRadio) {\n      focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);\n    }\n\n    // Apply tabIndex to all radios\n    this.cachedRadioElements.forEach((radio) => {\n      radio.tabIndex = radio === focusableRadio ? 0 : -1;\n    });\n  };\n\n  /**\n   * Updates the radio selection and focus.\n   * @param target - The radio element to update.\n   */\n  private updateRadioSelection = (target: HTMLBqRadioElement): void => {\n    // Only uncheck the previously checked radio if it's different\n    if (this.checkedRadio && this.checkedRadio !== target) {\n      this.checkedRadio.checked = false;\n      this.checkedRadio.tabIndex = -1;\n    }\n\n    target.checked = true;\n    target.tabIndex = 0;\n    target.vFocus();\n\n    this.checkedRadio = target;\n    this.value = target.value;\n    this.internals?.setFormValue(this.value ?? null);\n\n    this.updateRadioTabIndexes();\n  };\n\n  /**\n   * Synchronizes properties of child radio elements with the group's state.\n   */\n  private updateRadioProperties = (): void => {\n    if (this.cachedRadioElements.length === 0) return;\n\n    const { backgroundOnHover, disabled, name, required, value } = this;\n\n    for (const radio of this.cachedRadioElements) {\n      radio.backgroundOnHover = backgroundOnHover;\n      radio.checked = value === radio.value;\n      // This will allows us to force all radio elements to be disabled\n      // while keeping the disabled state of the radio element if it was set individually by the user\n      radio.forceDisabled = disabled;\n      radio.name = name;\n      radio.required = required;\n    }\n  };\n\n  /**\n   * Focuses the next/previous radio element in the group based on the current target.\n   * Handles circular navigation and skips disabled elements.\n   * @param currentTarget - The currently focused radio element\n   * @param direction - The navigation direction ('forward' | 'backward')\n   */\n  private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, direction: Direction): void => {\n    // If there is none or only one radio element, there will be no sibling to focus\n    if (this.cachedRadioElements.length <= 1) return;\n\n    const currentIndex = this.cachedRadioElements.indexOf(currentTarget);\n    // If the index of the radio element target is not found, it means that it's not part of the group\n    if (currentIndex === -1) return;\n\n    const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);\n    this.updateRadioSelection(nextElement);\n  };\n\n  private updateFormValidity = async (): Promise<void> => {\n    const { internals, required, requiredValidationMessage, value } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!required || (required && !isNil(value))) {\n      // If the radio group is not required or has a value, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    const firstRadio = this.cachedRadioElements[0];\n    if (!firstRadio) return;\n    // If the radio group is required and has no value, set the validity state to invalid\n    internals?.states.add('invalid');\n    // We need to pass the native input element to the setValidity method as anchor element\n    internals?.setValidity(\n      { valueMissing: true },\n      requiredValidationMessage ?? 'Please select an option',\n      await firstRadio.getNativeInput(),\n    );\n  };\n\n  /**\n   * Updates the custom states based on the component properties.\n   * The custom states can be used to style the component based on the component properties.\n   * The custom states are `disabled`, based on the component properties.\n   */\n  private updateCustomStates = (): void => {\n    const states = new Set<string>();\n\n    if (this.disabled) states.add('disabled');\n    if (this.orientation) states.add(this.orientation);\n\n    // Update states\n    this.internals?.states.clear();\n    states.forEach((state) => this.internals?.states.add(state));\n  };\n\n  private handleSlotChange = (): void => {\n    this.initializeRadioElements();\n    this.updateRadioProperties();\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host tabindex={this.tabIndex}>\n        <fieldset\n          class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n          aria-controls=\"bq-radiogroup\"\n          aria-labelledby=\"bq-radio-group__label\"\n          aria-disabled={this.disabled}\n          aria-required={this.required}\n          disabled={this.disabled}\n          role=\"radiogroup\"\n          part=\"base\"\n        >\n          <legend part=\"label\">\n            <slot id=\"bq-radiogroup__label\" name=\"label\" />\n          </legend>\n          <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n            <slot id=\"bq-radiogroup\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}