npm - @beeq/core - Versions diffs - 1.12.4-beta.1 → 1.12.4 - Mend

@beeq/core 1.12.4-beta.1 → 1.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (425) hide show

package/dist/collection/components/notification/bq-notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-notification.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/notification/bq-notification.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EACL,QAAQ,EACR,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,EAEL,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,4BAA4B,GAAG,wBAAwB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAMH,MAAM,OAAO,cAAc;IACzB,iBAAiB;IACjB,uBAAuB;IAEf,mBAAmB,CAAkB;IACrC,QAAQ,CAAiB;IACzB,UAAU,CAAiB;IAC3B,gBAAgB,CAAiB;IAEzC,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAA6B;IAE1C,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAEzB,UAAU,GAAG,KAAK,CAAC;IACnB,SAAS,GAAG,KAAK,CAAC;IAClB,kBAAkB,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,4BAA4B,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAErH,sBAAsB;IACtB,2BAA2B;IAE3B,2FAA2F;IAClE,WAAW,CAAU;IAE9C,sDAAsD;IAC7B,MAAM,GAA8B,GAAG,CAAC;IAEjE,oFAAoF;IAC3D,YAAY,CAAU;IAE/C,oDAAoD;IAC3B,QAAQ,CAAU;IAE3C,8CAA8C;IACN,IAAI,CAAU;IAEtD,8HAA8H;IACrG,IAAI,GAAW,IAAI,CAAC;IAE7C,2BAA2B;IACF,IAAI,GAAsB,MAAM,CAAC;IAE1D,wBAAwB;IACxB,0BAA0B;IAG1B,aAAa;QACX,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACd,2FAA2F;QAC3F,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5C,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,CAAC;QAEnC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO;QAC7C,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAGD,eAAe;QACb,iBAAiB,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,oEAAoE;IAC3D,MAAM,CAAgB;IAE/B,mEAAmE;IAC1D,MAAM,CAAgB;IAE/B,2EAA2E;IAClE,WAAW,CAAgB;IAEpC,2EAA2E;IAClE,YAAY,CAAgB;IAErC,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAExB,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACrE,SAAS,EAAE,4BAA4B;aACxC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAGjB,sBAAsB;QACpB,IAAI,CAAC;YACH,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;YACpC,kBAAkB,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxC,mFAAmF;YACnF,IAAI,kBAAkB,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC7E,kBAAkB,CAAC,MAAM,EAAE,CAAC;YAC9B,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf;;;eAGG;YACH,IAAI,KAAK,YAAY,YAAY;gBAAE,OAAO;YAC1C,MAAM,KAAK,CAAC;QACd,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,6DAA6D;IAE7D,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAED,6DAA6D;IAE7D,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAED,8IAA8I;IAE9I,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAExB,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACpC,IAAI,kBAAkB,EAAE,aAAa,KAAK,IAAI,EAAE,CAAC;YAC/C,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;QAED,kBAAkB,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzC,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAElD,UAAU,GAAG,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC;YACzB,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEM,mBAAmB,GAAG,GAAG,EAAE;QACjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,IAAY,QAAQ;QAClB,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;QAEF,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC;IACtC,CAAC;IAED,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,kCAAkC,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAC/F,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,oEACU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAClC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACrC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK;YAEZ,4DACE,KAAK,EAAC,iBAAiB,2BACD,4CAA4C,+BACxC,4CAA4C,iCAC1C,4DAA4D,2BAClE,2CAA2C,+BACvC,6DAA6D,iCAC3D,4CAA4C,EACxE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;oBACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC;gBAC9B,CAAC;gBAGA,CAAC,IAAI,CAAC,YAAY,IAAI,CACrB,kEACE,UAAU,EAAC,MAAM,EACjB,MAAM,EAAC,GAAG,EACV,KAAK,EAAC,2CAA2C,EACjD,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC5B,QAAQ,QACR,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,OAAO;oBAEZ,6DAAM,IAAI,EAAC,WAAW;wBACpB,+EAAqB,MAAM,EAAC,IAAI,EAAC,GAAG,GAAG,CAClC,CACG,CACb;gBAED,4DACE,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI,CAAC,QAAQ;wBACxB,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,2EAA2E;wBACzG,mDAAmD,EAAE,IAAI;qBAC1D,EACD,IAAI,EAAC,cAAc;oBAEnB,6DAAM,IAAI,EAAC,MAAM;wBACf,gEAAS,WAAW,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAG,CAC9D,CACH;gBAEN,4DAAK,KAAK,EAAC,uEAAuE,EAAC,IAAI,EAAC,MAAM;oBAC5F,4DAAK,KAAK,EAAC,uDAAuD,EAAC,IAAI,EAAC,SAAS;wBAE/E,4DAAK,KAAK,EAAC,0CAA0C,EAAC,IAAI,EAAC,OAAO;4BAChE,8DAAQ,CACJ;wBAEN,4DACE,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EACtE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;gCACX,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;4BACtB,CAAC;4BAED,6DAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrD,CACF;oBAEN,4DACE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACtE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;4BACX,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;wBACxB,CAAC;wBAED,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n enter,\n hasSlotContent,\n isClient,\n leave,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { NOTIFICATION_TYPE } from './bq-notification.types';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/*\n The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n \n @example How to use it\n * ```html\n * <bq-notification border=\"s\" time=\"3000\" type=\"info\">\n * Title\n * <span slot=\"body\">\n * This is some description text text\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div class=\"flex gap-xs\" slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-notification>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/945cb6-notification\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} auto-dismiss - If true, the notification will automatically hide after the specified amount of time\n * @attr {string} border - The corder radius of the notification component\n * @attr {boolean} disable-close - If true, the close button at the top right of the notification won't be shown\n * @attr {boolean} hide-icon - If true, the notification icon won't be shown\n * @attr {boolean} open - If true, the notification will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`\n * @attr {string} type - Type of Notification\n \n @event bqAfterClose - Callback handler to be called after the notification has been closed\n * @event bqAfterOpen - Callback handler to be called after the notification has been opened\n * @event bqHide - Callback handler to be called when the notification is hidden\n * @event bqShow - Callback handler to be called when the notification is shown\n \n @slot - The notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n \n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-notification--background - The notification background color\n * @cssprop --bq-notification--box-shadow - The notification box shadow\n * @cssprop --bq-notification--border-color - The notification border color\n * @cssprop --bq-notification--border-radius - The notification border radius\n * @cssprop --bq-notification--border-style - The notification border style\n * @cssprop --bq-notification--border-width - The notification border width\n * @cssprop --bq-notification--content-footer-gap - The notification content and footer gap\n * @cssprop --bq-notification--title-body-gap - The notification title and body gap\n * @cssprop --bq-notification--icon-color-error - The notification icon color for error type\n * @cssprop --bq-notification--icon-color-info - The notification icon color for info type\n * @cssprop --bq-notification--icon-color-neutral - The notification icon color for neutral type\n * @cssprop --bq-notification--icon-color-success - The notification icon color for success type\n * @cssprop --bq-notification--icon-color-warning - The notification icon color for warning type\n * @cssprop --bq-notification--padding - The notification padding\n * @cssprop --bq-notification--min-width - The notification min width\n /\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal = isClient() ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the notification is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (!notificationPortal) {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.remove();\n }\n } catch (error) {\n /\n Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n /\n if (error instanceof DOMException) return;\n throw error;\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 /* Method to be called to hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n aria-hidden={!this.open ? 'true' : 'false'}\n class={{ 'is-hidden': !this.open }}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n style={style}\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n part=\"wrapper\"\n ref={(div) => {\n this.notificationElem = div;\n }}\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n appearance=\"text\"\n border=\"s\"\n class=\"absolute inset-ie-m [&::part(button)]:p-0\"\n label=\"Close\"\n onBqClick={() => this.hide()}\n onlyIcon\n part=\"btn-close\"\n size=\"small\"\n >\n <slot name=\"btn-close\">\n <bq-icon aria-hidden=\"true\" name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon exportparts=\"base,svg\" name={this.iconName} part=\"icon\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n part=\"body\"\n ref={(div) => {\n this.bodyElem = div;\n }}\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n part=\"footer\"\n ref={(div) => {\n this.footerElem = div;\n }}\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-notification.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/notification/bq-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n enter,\n hasSlotContent,\n isClient,\n leave,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { NOTIFICATION_TYPE } from './bq-notification.types';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/*\n The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n \n @example How to use it\n * ```html\n * <bq-notification border=\"s\" time=\"3000\" type=\"info\">\n * Title\n * <span slot=\"body\">\n * This is some description text text\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div class=\"flex gap-xs\" slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-notification>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/945cb6-notification\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} auto-dismiss - If true, the notification will automatically hide after the specified amount of time\n * @attr {string} border - The corder radius of the notification component\n * @attr {boolean} disable-close - If true, the close button at the top right of the notification won't be shown\n * @attr {boolean} hide-icon - If true, the notification icon won't be shown\n * @attr {boolean} open - If true, the notification will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`\n * @attr {string} type - Type of Notification\n \n @event bqAfterClose - Callback handler to be called after the notification has been closed\n * @event bqAfterOpen - Callback handler to be called after the notification has been opened\n * @event bqHide - Callback handler to be called when the notification is hidden\n * @event bqShow - Callback handler to be called when the notification is shown\n \n @slot - The notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n \n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-notification--background - The notification background color\n * @cssprop --bq-notification--box-shadow - The notification box shadow\n * @cssprop --bq-notification--border-color - The notification border color\n * @cssprop --bq-notification--border-radius - The notification border radius\n * @cssprop --bq-notification--border-style - The notification border style\n * @cssprop --bq-notification--border-width - The notification border width\n * @cssprop --bq-notification--content-footer-gap - The notification content and footer gap\n * @cssprop --bq-notification--title-body-gap - The notification title and body gap\n * @cssprop --bq-notification--icon-color-error - The notification icon color for error type\n * @cssprop --bq-notification--icon-color-info - The notification icon color for info type\n * @cssprop --bq-notification--icon-color-neutral - The notification icon color for neutral type\n * @cssprop --bq-notification--icon-color-success - The notification icon color for success type\n * @cssprop --bq-notification--icon-color-warning - The notification icon color for warning type\n * @cssprop --bq-notification--padding - The notification padding\n * @cssprop --bq-notification--min-width - The notification min width\n /\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal = isClient() ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the notification is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (!notificationPortal) {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.remove();\n }\n } catch (error) {\n /\n Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n /\n if (error instanceof DOMException) return;\n throw error;\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 /* Method to be called to hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n aria-hidden={!this.open ? 'true' : 'false'}\n class={{ 'is-hidden': !this.open }}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n style={style}\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n part=\"wrapper\"\n ref={(div) => {\n this.notificationElem = div;\n }}\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n appearance=\"text\"\n border=\"s\"\n class=\"absolute inset-ie-m [&::part(button)]:p-0\"\n label=\"Close\"\n onBqClick={() => this.hide()}\n onlyIcon\n part=\"btn-close\"\n size=\"small\"\n >\n <slot class=\"flex\" name=\"btn-close\">\n <bq-icon aria-hidden=\"true\" name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon exportparts=\"base,svg\" name={this.iconName} part=\"icon\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n part=\"body\"\n ref={(div) => {\n this.bodyElem = div;\n }}\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n part=\"footer\"\n ref={(div) => {\n this.footerElem = div;\n }}\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -153,8 +153,8 @@ export class BqRadioGroup {
     formResetCallback() {
         this.value = this.initialValue;
         this.internals.setFormValue(this.value ?? null);
-        this.updateFormValidity();
         this.updateCustomStates();
+        this.updateFormValidity();
     }
     // Listeners
     // ==============
@@ -241,18 +241,14 @@ export class BqRadioGroup {
             });
             return;
         }
-        // Find which radio should be focusable
-        let focusableRadio;
         // Priority 1: Currently checked radio
-        focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);
+        let 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);
+        if (!isNil(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);
-        }
+        focusableRadio ??= this.cachedRadioElements.find((radio) => !radio.disabled);
         // Apply tabIndex to all radios
         this.cachedRadioElements.forEach((radio) => {
             radio.tabIndex = radio === focusableRadio ? 0 : -1;
@@ -353,7 +349,7 @@ export class BqRadioGroup {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h(Host, { key: '324a831a19e6713db5b5f561d78571cb84e9b530', tabindex: this.tabIndex }, h("fieldset", { key: '41474f54b518587ecd897bbbddd8a96ba1e7ebed', "aria-controls": "bq-radiogroup", "aria-disabled": this.disabled, "aria-labelledby": "bq-radio-group__label", class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, disabled: this.disabled, part: "base" }, h("legend", { key: 'f5c8834333aa3174418298e7240f16d9d5e85c70', part: "label" }, h("slot", { key: '8180b8c2a610af608092a5a37b3bb5b59ef32b76', id: "bq-radiogroup__label", name: "label" })), h("div", { key: 'dbad104bf6d984de4f9057e2d588dc1899705116', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: '08ce09046a91f79a46e015bda8fc094291a66f4a', id: "bq-radiogroup", onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: 'd9824d933742f7b4f97ffb41ef218f8af10d8528', tabindex: this.tabIndex }, h("fieldset", { key: '3a2c8481f073e99f2776ec88b701a49a1b4d157e', "aria-controls": "bq-radiogroup", "aria-disabled": this.disabled, "aria-labelledby": "bq-radio-group__label", class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, disabled: this.disabled, part: "base" }, h("legend", { key: '228655d22bc983e0feeade0c2c673dc8d03be986', part: "label" }, h("slot", { key: 'edc973f89301ed2cf50e6958512de7a64746762d', id: "bq-radiogroup__label", name: "label" })), h("div", { key: '9246e7fcce1873436ec311e1b270d7dc46b518cc', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: '32ce950e249832c49ad05385dd2772938b577db9', id: "bq-radiogroup", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +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 type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n getNextElement,\n isDefined,\n isEventTargetChildOfElement,\n isNil,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\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 /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<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 = isDefined(this.focusedBqRadio);\n this.focusedBqRadio = event.detail;\n\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n // NOTE: if focusedBqRadio is nil that means the event occurred from this component\n if (isNil(this.focusedBqRadio)) return;\n\n event.stopPropagation();\n\n requestAnimationFrame(() => {\n if (this.focusedBqRadio !== event.detail) return;\n\n this.focusedBqRadio = null;\n this.bqBlur.emit(event.detail);\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 /\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) => {\n this.radioElementsSet.add(radio);\n });\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) => {\n radio.tabIndex = -1;\n });\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) => {\n this.internals?.states.add(state);\n });\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 aria-controls=\"bq-radiogroup\"\n aria-disabled={this.disabled}\n aria-labelledby=\"bq-radio-group__label\"\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n disabled={this.disabled}\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"]}
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 type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n getNextElement,\n isDefined,\n isEventTargetChildOfElement,\n isNil,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\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 /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<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.updateCustomStates();\n this.updateFormValidity();\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 = isDefined(this.focusedBqRadio);\n this.focusedBqRadio = event.detail;\n\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n // NOTE: if focusedBqRadio is nil that means the event occurred from this component\n if (isNil(this.focusedBqRadio)) return;\n\n event.stopPropagation();\n\n requestAnimationFrame(() => {\n if (this.focusedBqRadio !== event.detail) return;\n\n this.focusedBqRadio = null;\n this.bqBlur.emit(event.detail);\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 /\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) => {\n this.radioElementsSet.add(radio);\n });\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) => {\n radio.tabIndex = -1;\n });\n return;\n }\n\n // Priority 1: Currently checked radio\n let focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n // Priority 2: Radio matching current value\n if (!isNil(this.value)) {\n focusableRadio ??= this.cachedRadioElements.find((radio) => radio.value === this.value);\n }\n\n // Priority 3: First enabled radio (fallback)\n focusableRadio ??= this.cachedRadioElements.find((radio) => !radio.disabled);\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) => {\n this.internals?.states.add(state);\n });\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 aria-controls=\"bq-radiogroup\"\n aria-disabled={this.disabled}\n aria-labelledby=\"bq-radio-group__label\"\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n disabled={this.disabled}\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"]}

package/dist/collection/components/select/bq-select.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, stringToArra
  * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
  * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
  * @attr {string} form - The ID of the form that Select input field belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
  * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
  * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
  * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -158,6 +159,8 @@ export class BqSelect {
     distance = 8;
     /** The ID of the form that the Select input belongs to. */
     form;
+    /** The native form validation message (mandatory if `required` is set) */
+    formValidationMessage;
     /** If true, the Select panel will remain open after a selection is made. */
     keepOpenOnSelect = false;
     /** The Select input name. */
@@ -205,6 +208,7 @@ export class BqSelect {
             this.value = this.multiple ? [] : '';
             this.internals.setFormValue(undefined);
             this.syncItemsFromValue();
+            this.updateFormValidity();
             return;
         }
         // Handle multiple selection mode
@@ -212,12 +216,17 @@ export class BqSelect {
             this.value = stringToArray(this.value);
             this.internals.setFormValue(this.value.join(','));
             this.syncItemsFromValue();
+            this.updateFormValidity();
             return;
         }
         // Handle single selection mode
         this.value = String(this.value);
         this.internals.setFormValue(this.value);
         this.syncItemsFromValue();
+        this.updateFormValidity();
+    }
+    handleRequiredPropChange() {
+        this.updateFormValidity();
     }
     // Events section
     // Requires JSDocs for public API documentation
@@ -251,11 +260,12 @@ export class BqSelect {
     formAssociatedCallback() {
         this.internals.role = 'combobox';
         this.internals.ariaExpanded = this.open ? 'true' : 'false';
+        this.updateFormValidity();
     }
     async formResetCallback() {
         if (isNil(this.value))
             return;
-        this.internals.setValidity({});
+        this.updateFormValidity();
         this.clear();
     }
     // Listeners
@@ -537,6 +547,23 @@ export class BqSelect {
         }
         return '';
     };
+    updateFormValidity = () => {
+        const { formValidationMessage, internals, required, value } = this;
+        // Clear the validity state
+        internals?.states.clear();
+        const isEmpty = this.multiple
+            ? !Array.isArray(value) || value.length === 0
+            : !isDefined(value) || String(value).trim() === '';
+        if (required && isEmpty) {
+            // Set validity state to invalid
+            internals?.states.add('invalid');
+            internals?.setValidity({ valueMissing: true }, formValidationMessage || 'Please select an option', this.inputElem);
+            return;
+        }
+        // Set validity state to valid if textarea has value or is not required
+        internals?.states.add('valid');
+        internals?.setValidity({});
+    };
     get options() {
         return Array.from(this.el.querySelectorAll('bq-option'));
     }
@@ -575,29 +602,29 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '7fce1b5a16a7e5b25cce5624c60c09187f380f2c', class: "bq-select", part: "base" }, h("label", { key: '5785e81858a0493c5cfc2e80ebcd19d96ff50d22', "aria-label": this.name || this.fallbackInputId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, id: labelId, part: "label", ref: (labelElem) => {
+        return (h("div", { key: '3ac6927fd004b8de97f4b66f0fcb83151d04755c', class: "bq-select", part: "base" }, h("label", { key: '5f0d3b9899c3c17ce58a4cff93ba377993ff4f72', "aria-label": this.name || this.fallbackInputId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, id: labelId, part: "label", ref: (labelElem) => {
                 this.labelElem = labelElem;
-            } }, h("slot", { key: 'bb7730c735f53312411f9d873483cb876835da0f', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '8064982e9df5815d0213d6129212bc1e7472fdf9', class: "bq-select__dropdown w-full", disabled: this.disabled, disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy }, h("div", { key: '014b00e22b0870ae1fc70fdd712e75890741212f', class: {
+            } }, h("slot", { key: 'c7262cb63edc2a85de1bd119b9acab5f22038cb7', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '3c8b5050c2c5d59236a5c2e9c663f11fde6d22eb', class: "bq-select__dropdown w-full", disabled: this.disabled, disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy }, h("div", { key: 'f4affd0bc3129ebd50d6812b71aab734ad08dc14', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '9258ab50855df0a94eaa470d55371cf5a3197ac9', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+            }, part: "control", slot: "trigger" }, h("span", { key: '228c2739b4e2ba0d1fa09360e1c45a2594e3af1c', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
                 this.prefixElem = spanElem;
-            } }, h("slot", { key: '1cf1940473621784792bf8d0e77391233ec99aee', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'a91471faea3a207758de88e98081e159848c573f', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'db8bbcc8837bb9c3949130a8ca9a09a1377abf55', class: "bq-select__tags", part: "tags" }, h("slot", { key: '6a9d99f481a7b0a7e3df77ff01bbc515135c0bfb', name: "tags" }, this.displayTags))), h("input", { key: 'bf4b0b97f3b5adf3f7116a04efcdf66701b72e0a', "aria-controls": `bq-options-${this.name}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", autoCapitalize: "off", autoComplete: "off", class: "bq-select__control--input is-full flex-grow", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeydown, part: "input", placeholder: this.displayPlaceholder, readOnly: this.readonly, ref: (inputElem) => {
+            } }, h("slot", { key: '98a207db3b4e9fbb2aee9545d40b56ae3e3a2124', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'ee7ff8f24c599b9954f0ca664f7169262ee75636', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'a9f016739ad1cad0e468954932bddaa00c222160', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'faae09dca15fa1fbec43e6cbde5ecb7241fb82c0', name: "tags" }, this.displayTags))), h("input", { key: 'f5d11d101de3bab402f41253bd0bcbeb7f40c417', "aria-controls": `bq-options-${this.name}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", autoCapitalize: "off", autoComplete: "off", class: "bq-select__control--input is-full flex-grow", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeydown, part: "input", placeholder: this.displayPlaceholder, readOnly: this.readonly, ref: (inputElem) => {
                 this.inputElem = inputElem;
             }, required: this.required, role: "combobox",
             // Events
             spellcheck: false, type: "text", value: this.displayValue })), this.hasClearIcon && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: '8a74e1c5d96622392a828ce6336152e84b2d427d', appearance: "text", border: "s", class: "bq-select__control--clear ms-[--bq-select--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small", tabIndex: -1 }, h("slot", { key: '0d3b64bba90b0d28fbf1fd1ef3f91b07cce7c542', name: "clear-icon" }, h("bq-icon", { key: 'e081ee013781bed15d22d1d3c999314eb1fc76af', "aria-hidden": "true", class: "flex", name: "x-circle" })))), h("span", { key: 'd6ee0750683f57c4843b66c0f57fa4f8fe593233', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, part: "suffix", ref: (spanElem) => {
+        h("bq-button", { key: '1bae439a9b9f3ba28393cf3c7a6fa7dde1bfdd4d', appearance: "text", border: "s", class: "bq-select__control--clear ms-[--bq-select--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small", tabIndex: -1 }, h("slot", { key: '52147b8bbb070b92acfe631114e6c074ed04b3c1', name: "clear-icon" }, h("bq-icon", { key: 'fc1f97a1f710654113431fd816229e4421f04f72', "aria-hidden": "true", class: "flex", name: "x-circle" })))), h("span", { key: 'd6499acc2ff3c1d977d9048c62e961e90a894164', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, part: "suffix", ref: (spanElem) => {
                 this.suffixElem = spanElem;
-            } }, h("slot", { key: '60bbf927836994e487ec5615ac37b46309a7f0d2', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'f92b77a0d9833e0ad31d7a9adbd8b0ce76f069b7', class: "flex", name: "caret-down" })))), h("bq-option-list", { key: '0b4fa059ac5d9a296358bffb05cd61a08bbb41f6', "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, role: "listbox" }, h("slot", { key: '9a42fd00864ff85ea0b9298b60d0f4cbdb9be43e' }))), h("div", { key: 'f09628183dc0f4e35caae1551d3de266a96ccc64', class: {
+            } }, h("slot", { key: 'b8da8cd1692533d5cb89507849b7b8ef11086287', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '14e08948bbcac9b5ce4657fb900737c255e83415', class: "flex", name: "caret-down" })))), h("bq-option-list", { key: 'c8636fcfd3537b92bfa0ae4c2afff3da2207ac49', "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, role: "listbox" }, h("slot", { key: 'fb79a3d78b80e1e46fbd686262f5b5ac32f14e69' }))), h("div", { key: 'c5a85030b5239bfef0997a893472bbe713d2a434', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
             }, part: "helper-text", ref: (divElem) => {
                 this.helperTextElem = divElem;
-            } }, h("slot", { key: '0ab5418216b6b41c64b7019a6ff4f6ab8bc751c4', name: "helper-text", onSlotchange: this.handleSlotChange }))));
+            } }, h("slot", { key: '7e779ebbb1ac575e253003e26d54c9eb402357fb', name: "helper-text", onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }
@@ -773,6 +800,25 @@ export class BqSelect {
                 "reflect": true,
                 "attribute": "form"
             },
+            "formValidationMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The native form validation message (mandatory if `required` is set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-validation-message"
+            },
             "keepOpenOnSelect": {
                 "type": "boolean",
                 "mutable": false,
@@ -1074,7 +1120,7 @@ export class BqSelect {
                     "references": {
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     }
@@ -1241,7 +1287,7 @@ export class BqSelect {
                         },
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     },
@@ -1268,6 +1314,9 @@ export class BqSelect {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredPropChange"
             }];
     }
     static get listeners() {