@beeq/core 1.7.0 → 1.8.0-beta.0

package/dist/esm/bq-avatar.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, h, a as Host, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 

package/dist/esm/bq-badge.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, h, a as Host, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { g as getColorCSSVariable } from './cssVariables-5ffccc29.js';
 import { i as isNil } from './isNil-2290f64e.js';

package/dist/esm/bq-breadcrumb-item.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { i as isDefined } from './isDefined-91ae4cd3.js';
 import './isString-9820a2b7.js';

package/dist/esm/bq-breadcrumb.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { i as isHTMLElement } from './isHTMLElement-0271eefe.js';
 

package/dist/esm/bq-button_2.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-efc1c2ef.js';
 import { g as getBasePath } from './assetsPath-ae18c25e.js';
 import { i as isNil } from './isNil-2290f64e.js';
 import { i as isDefined } from './isDefined-91ae4cd3.js';
@@ -130,30 +130,34 @@ BqButton.style = BqButtonStyle0;
 /* -------------------------------------------------------------------------- */
 const requests = new Map();
 const fetchSvg = async (url, sanitize) => {
-    let req;
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-        const rsp = await fetch(url);
-        if (rsp.ok) {
-            return rsp.text().then((svgContent) => {
-                if (svgContent && sanitize !== false)
-                    svgContent = validateContent(svgContent);
-                iconContent.set(url, svgContent || '');
-            });
+    if (typeof fetch === 'undefined' || typeof document === 'undefined')
+        return;
+    if (requests.has(url))
+        return requests.get(url);
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            iconContent.set(url, '');
+            return;
         }
+        let svgContent = (await response.text()) || '';
+        if (svgContent && sanitize !== false)
+            svgContent = validateContent(svgContent);
+        iconContent.set(url, svgContent);
+    }
+    catch (error) {
+        console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);
         iconContent.set(url, '');
-        // cache for the same requests
-        requests.set(url, req);
-        return req;
     }
-    iconContent.set(url, '');
-    return Promise.resolve();
 };
 const iconContent = new Map();
 const getSvgContent = async (url, sanitize) => {
-    // see if we already have a request for this SVG file
-    const req = await requests.get(url);
-    if (!req)
-        return fetchSvg(url, sanitize);
+    let req = requests.get(url);
+    // NOTE: if the request does not exists we will cache it
+    if (isNil(req)) {
+        req = fetchSvg(url, sanitize);
+        requests.set(url, req);
+    }
     return req;
 };
 const validateContent = (svgContent) => {

package/dist/esm/bq-button_2.entry.js.map

@@ -1 +1 @@
-{"file":"bq-button.bq-icon.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-button.variables';\n\n@layer components {\n  // Common button base style\n  .bq-button {\n    @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n    @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n    @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n    // `DISABLED` state\n    @apply disabled:cursor-not-allowed disabled:opacity-60;\n    // `FOCUS` state\n    @apply focus-visible:focus;\n  }\n}\n\n:host {\n  @apply relative inline-block cursor-pointer is-auto;\n}\n\n:host([block]),\n.block {\n  @apply is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Appearance                                 */\n/* -------------------------------------------------------------------------- */\n\n.bq-button--primary {\n  @apply bg-ui-brand text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-brand;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-brand active:enabled:hover:bg-active-ui-brand;\n}\n\n.bq-button--primary.ghost {\n  @apply border-m border-solid border-stroke-brand bg-transparent text-text-brand;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-primary active:enabled:hover:bg-active-ui-primary;\n}\n\n.bq-button--primary.danger {\n  @apply bg-ui-danger text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-danger;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-danger active:enabled:hover:bg-active-ui-danger;\n}\n\n.bq-button--secondary {\n  @apply bg-ui-secondary text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--secondary.ghost {\n  @apply border-m border-solid border-stroke-tertiary bg-transparent text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--link {\n  @apply bg-transparent text-text-brand no-underline;\n  // Primary `HOVER` state\n  @apply [&:not(.disabled)]:hover:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply [&:not(.disabled)]:active:bg-active-ui-secondary [&:not(.disabled)]:active:hover:bg-active-ui-secondary;\n  // HTML `<a>` elements does not have a `disabled` state so we need to handle it manually\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-button--text {\n  @apply bg-transparent text-text-primary;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Size                                    */\n/* -------------------------------------------------------------------------- */\n\n.small {\n  @apply text-[length:--bq-button--small-font-size] bs-[--bq-button--small-height] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n}\n\n.medium {\n  @apply text-[length:--bq-button--medium-font-size] bs-[--bq-button--medium-height] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n}\n\n.large {\n  @apply text-[length:--bq-button--large-font-size] bs-[--bq-button--large-height] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__label ::slotted(bq-icon) {\n  @apply flex;\n}\n\n.content-left {\n  @apply justify-start;\n}\n\n.content-right {\n  @apply justify-end;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Prefix and Suffix slots                          */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__prefix,\n.bq-button__suffix {\n  @apply pointer-events-none flex shrink-0 grow-0 basis-auto items-center;\n}\n\n.bq-button.has-prefix .bq-button__label {\n  @apply ps-xs2;\n}\n\n.bq-button.has-suffix .bq-button__label {\n  @apply pe-xs2;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                   Loading                                  */\n/* -------------------------------------------------------------------------- */\n\n.bq-button.loading {\n  @apply relative cursor-wait;\n}\n\n.bq-button.loading .bq-button__prefix,\n.bq-button.loading .bq-button__label,\n.bq-button.loading .bq-button__suffix {\n  @apply invisible;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Spinner icon                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__loader {\n  @include animation-spin;\n  @apply absolute;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  BUTTON_APPEARANCE,\n  BUTTON_SIZE,\n  BUTTON_TYPE,\n  BUTTON_VARIANT,\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  shadow: true,\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent: 'left' | 'center' | 'right' = 'center';\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\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 handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    if (this.disabled || this.loading) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const wrapperForm = this.el.closest('form');\n      if (!isNil(wrapperForm)) {\n        const btn = document.createElement('button');\n        btn.type = this.type;\n        btn.hidden = true;\n        wrapperForm.append(btn);\n\n        btn.click();\n        btn.remove();\n      }\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n          tabIndex={this.disabled ? -1 : 0}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n        >\n          <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && (\n            <bq-icon\n              class=\"bq-button__loader\"\n              name=\"spinner-gap\"\n              role=\"img\"\n              title={`${this.appearance} button loader`}\n            />\n          )}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  let req: Promise<unknown>;\n\n  if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n    const rsp = await fetch(url);\n    if (rsp.ok) {\n      return rsp.text().then((svgContent) => {\n        if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n        iconContent.set(url, svgContent || '');\n      });\n    }\n    iconContent.set(url, '');\n    // cache for the same requests\n    requests.set(url, req);\n    return req;\n  }\n\n  iconContent.set(url, '');\n  return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  // see if we already have a request for this SVG file\n  const req = await requests.get(url);\n  if (!req) return fetchSvg(url, sanitize);\n\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handlePropsChange();\n\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\n  }\n\n  // Listeners\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 getIconSource = (name: string) => {\n    if (!this.name && !this.src) return;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = (name: string) => {\n    const url = this.getIconSource(name);\n    getSvgContent(url, true).then(() => {\n      this._svgContent = iconContent.get(url);\n      this.svgLoaded.emit(this._svgContent);\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n      ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={this.label ?? `${this.name} icon`}\n          class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-button.bq-icon.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-button.variables';\n\n@layer components {\n  // Common button base style\n  .bq-button {\n    @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n    @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n    @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n    // `DISABLED` state\n    @apply disabled:cursor-not-allowed disabled:opacity-60;\n    // `FOCUS` state\n    @apply focus-visible:focus;\n  }\n}\n\n:host {\n  @apply relative inline-block cursor-pointer is-auto;\n}\n\n:host([block]),\n.block {\n  @apply is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Appearance                                 */\n/* -------------------------------------------------------------------------- */\n\n.bq-button--primary {\n  @apply bg-ui-brand text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-brand;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-brand active:enabled:hover:bg-active-ui-brand;\n}\n\n.bq-button--primary.ghost {\n  @apply border-m border-solid border-stroke-brand bg-transparent text-text-brand;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-primary active:enabled:hover:bg-active-ui-primary;\n}\n\n.bq-button--primary.danger {\n  @apply bg-ui-danger text-text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-danger;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-danger active:enabled:hover:bg-active-ui-danger;\n}\n\n.bq-button--secondary {\n  @apply bg-ui-secondary text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--secondary.ghost {\n  @apply border-m border-solid border-stroke-tertiary bg-transparent text-text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--link {\n  @apply bg-transparent text-text-brand no-underline;\n  // Primary `HOVER` state\n  @apply [&:not(.disabled)]:hover:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply [&:not(.disabled)]:active:bg-active-ui-secondary [&:not(.disabled)]:active:hover:bg-active-ui-secondary;\n  // HTML `<a>` elements does not have a `disabled` state so we need to handle it manually\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-button--text {\n  @apply bg-transparent text-text-primary;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Size                                    */\n/* -------------------------------------------------------------------------- */\n\n.small {\n  @apply text-[length:--bq-button--small-font-size] bs-[--bq-button--small-height] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n}\n\n.medium {\n  @apply text-[length:--bq-button--medium-font-size] bs-[--bq-button--medium-height] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n}\n\n.large {\n  @apply text-[length:--bq-button--large-font-size] bs-[--bq-button--large-height] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__label ::slotted(bq-icon) {\n  @apply flex;\n}\n\n.content-left {\n  @apply justify-start;\n}\n\n.content-right {\n  @apply justify-end;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Prefix and Suffix slots                          */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__prefix,\n.bq-button__suffix {\n  @apply pointer-events-none flex shrink-0 grow-0 basis-auto items-center;\n}\n\n.bq-button.has-prefix .bq-button__label {\n  @apply ps-xs2;\n}\n\n.bq-button.has-suffix .bq-button__label {\n  @apply pe-xs2;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                   Loading                                  */\n/* -------------------------------------------------------------------------- */\n\n.bq-button.loading {\n  @apply relative cursor-wait;\n}\n\n.bq-button.loading .bq-button__prefix,\n.bq-button.loading .bq-button__label,\n.bq-button.loading .bq-button__suffix {\n  @apply invisible;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Spinner icon                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__loader {\n  @include animation-spin;\n  @apply absolute;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  BUTTON_APPEARANCE,\n  BUTTON_SIZE,\n  BUTTON_TYPE,\n  BUTTON_VARIANT,\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  shadow: true,\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent: 'left' | 'center' | 'right' = 'center';\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\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 handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    if (this.disabled || this.loading) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const wrapperForm = this.el.closest('form');\n      if (!isNil(wrapperForm)) {\n        const btn = document.createElement('button');\n        btn.type = this.type;\n        btn.hidden = true;\n        wrapperForm.append(btn);\n\n        btn.click();\n        btn.remove();\n      }\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n          tabIndex={this.disabled ? -1 : 0}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n        >\n          <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && (\n            <bq-icon\n              class=\"bq-button__loader\"\n              name=\"spinner-gap\"\n              role=\"img\"\n              title={`${this.appearance} button loader`}\n            />\n          )}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (typeof fetch === 'undefined' || typeof document === 'undefined') return;\n\n  if (requests.has(url)) return requests.get(url);\n\n  try {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n      iconContent.set(url, '');\n      return;\n    }\n\n    let svgContent = (await response.text()) || '';\n\n    if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n    iconContent.set(url, svgContent);\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    iconContent.set(url, '');\n  }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  let req = requests.get(url);\n\n  // NOTE: if the request does not exists we will cache it\n  if (isNil(req)) {\n    req = fetchSvg(url, sanitize);\n    requests.set(url, req);\n  }\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handlePropsChange();\n\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\n  }\n\n  // Listeners\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 getIconSource = (name: string) => {\n    if (!this.name && !this.src) return;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = (name: string) => {\n    const url = this.getIconSource(name);\n    getSvgContent(url, true).then(() => {\n      this._svgContent = iconContent.get(url);\n      this.svgLoaded.emit(this._svgContent);\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n      ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={this.label ?? `${this.name} icon`}\n          class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/bq-card.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, h, a as Host, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 

package/dist/esm/bq-checkbox.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { i as isNil } from './isNil-2290f64e.js';
 
@@ -15,14 +15,48 @@ const BqCheckbox = class {
         this.bqChange = createEvent(this, "bqChange", 7);
         this.bqFocus = createEvent(this, "bqFocus", 7);
         this.bqBlur = createEvent(this, "bqBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         // Local methods
         // Internal business logic.
         // These methods cannot be called from the host element.
         // =======================================================
+        this.setFormValue = (checked) => {
+            var _a;
+            const value = checked ? 'on' : undefined;
+            // Set form value based on the checked state
+            // Here we also pass the state of the checkbox (2nd argument) as the state of the form control
+            // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
+            (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue(value, `${this.checked}`);
+        };
+        this.updateFormValidity = () => {
+            const { formValidationMessage, internals, required, checked, inputElem } = this;
+            // Clear the validity state
+            internals === null || internals === void 0 ? void 0 : internals.states.clear();
+            if (!(required && !checked)) {
+                // If the checkbox is not required or is checked, set the validity state to valid
+                internals === null || internals === void 0 ? void 0 : internals.states.add('valid');
+                internals === null || internals === void 0 ? void 0 : internals.setValidity({});
+                return;
+            }
+            // Set validity state based on the required property and checked state
+            internals === null || internals === void 0 ? void 0 : internals.states.add('invalid');
+            internals === null || internals === void 0 ? void 0 : internals.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
+        };
+        this.clearSelection = () => {
+            this.checked = false;
+            this.indeterminate = false;
+        };
         this.handleChange = () => {
             this.checked = !this.checked;
-            this.inputElem.setAttribute('checked', `${this.checked}`);
             this.indeterminate = false;
+            this.setFormValue(this.checked);
+            this.updateFormValidity();
         };
         this.handleOnFocus = () => {
             this.bqFocus.emit(this.el);
@@ -32,6 +66,7 @@ const BqCheckbox = class {
         };
         this.backgroundOnHover = false;
         this.formId = undefined;
+        this.formValidationMessage = undefined;
         this.checked = undefined;
         this.disabled = false;
         this.indeterminate = false;
@@ -49,6 +84,9 @@ const BqCheckbox = class {
             this.checked = false;
         }
     }
+    handleRequiredPropChange() {
+        this.updateFormValidity();
+    }
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
@@ -68,6 +106,16 @@ const BqCheckbox = class {
             this.prevCheckedValue = this.checked;
         }
     }
+    formAssociatedCallback() {
+        this.setFormValue(this.checked);
+        this.updateFormValidity();
+    }
+    formResetCallback() {
+        this.clearSelection();
+        // Reset the form value and validity state
+        this.internals.setFormValue(undefined);
+        this.internals.setValidity({});
+    }
     // Listeners
     // ==============
     // Public methods API
@@ -104,17 +152,20 @@ const BqCheckbox = class {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("label", { key: 'a1fa04a8a459e8ff2e2f73a7dcd47215cb808fd0', class: {
+        return (h("label", { key: 'e6bb6212976b93cead36d9da9577db36fa579eaa', class: {
                 'bq-checkbox group': true,
                 'is-checked': this.checked,
                 'is-indeterminate': this.indeterminate,
                 'is-disabled !cursor-not-allowed': this.disabled,
                 'has-background': this.backgroundOnHover,
-            }, part: "base" }, h("div", { key: '3e90eccdac91551db8e0798babef34d49c2c6b00', class: "bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: 'eaefd92c6db39e1b74556535fcc1fc2452a5df6b', type: "checkbox", class: "bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0", name: !isNil(this.name) ? this.name : undefined, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, form: this.formId, required: this.required, value: this.value, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', ref: (input) => (this.inputElem = input), onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", tabindex: "0" }), h("span", { key: '3d21bea7a404bac70a20cd3bf6729d6aea094686', class: "bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]", part: "checkbox" }, this.checked && (h("svg", { key: 'b0d8ea3ea24453c00bff0432a7a82222ea912801', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256" }, h("path", { key: '48cb59488df40745bd570575c2542f85180c8287', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: '165364e3420ca8fd2f22de8dfc9a3bc2590f36e0', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M216 72 104 184l-56-56" }))), !this.checked && this.indeterminate && (h("svg", { key: '6821f426e65a1cec7513b924237cda8d31d5eb5f', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256", fill: "currentColor" }, h("path", { key: 'd71bec5753657abbc3a8b8e2e7212f0c1d722dde', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'faf4f513df4a4dc90217ed8b9d6ac6475baacc24', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M40 128h176" }))))), h("span", { key: 'b1f14614e8b7bca40e2bed62f5672f7120014dcf', class: "bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: '88b21b5a845dfe46257ec3b49165ea576294aeab' }))));
+            }, part: "base" }, h("div", { key: 'c2e56cc75482987cc146b55213d6581d8a9bc9dd', class: "bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: '2252aee452f3ec15b097094269066c3b847d9e7f', type: "checkbox", class: "bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0", name: !isNil(this.name) ? this.name : undefined, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, form: this.formId, required: this.required, value: this.value, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', ref: (input) => (this.inputElem = input), onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", tabindex: "0" }), h("span", { key: 'c295d1f278a674249965a75aa8379db8bff2c643', class: "bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]", part: "checkbox" }, this.checked && (h("svg", { key: '7b86e5820621490e649f37b0cf1817402569b2cd', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256" }, h("path", { key: '792ecc3bd0b3ae960fe258ef5027e82db5f7c18a', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'c93e306430a64c6b5b9da8c4402444f238044aaa', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M216 72 104 184l-56-56" }))), !this.checked && this.indeterminate && (h("svg", { key: 'f2c213be85763b7978eb5990da2b7cf8dd89bffb', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256", fill: "currentColor" }, h("path", { key: '2859d0589e8247d07c62077649373bc7937e2f51', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'a8e16888f8c013a949a9677f289bbf4f6252a78c', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M40 128h176" }))))), h("span", { key: 'a86de7c5dc4ac8a6b983ff93c2d79b11ce7ed550', class: "bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: '0e8c6f2424164dcf7e2188cabbd82a3282e194ea' }))));
     }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "indeterminate": ["handleIndeterminatePropChange"]
+        "indeterminate": ["handleIndeterminatePropChange"],
+        "required": ["handleRequiredPropChange"]
     }; }
 };
 BqCheckbox.style = BqCheckboxStyle0;

package/dist/esm/bq-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"bq-checkbox.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/checkbox/scss/bq-checkbox.scss?tag=bq-checkbox&encapsulation=shadow","../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Checkbox styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-checkbox.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-checkbox {\n  @apply box-border inline-flex cursor-pointer select-none rounded-s transition-colors duration-300 ease-in-out p-b-xs p-i-xs;\n\n  // Default hover state\n  &:not(.is-checked),\n  &:not(.is-indeterminate) {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply border-hover-icon-brand;\n    }\n  }\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  // Checked/Indeterminate hover state\n  &.is-checked,\n  &.is-indeterminate {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply bg-hover-ui-brand border-hover-icon-brand;\n    }\n  }\n}\n\n.bq-checkbox__input {\n  // Checkbox square icon has `FOCUS`\n  &:focus-visible {\n    ~ .bq-checkbox__checkbox {\n      @apply focus border-stroke-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE`\n  &:checked,\n  &:indeterminate {\n    ~ .bq-checkbox__checkbox {\n      @apply border-stroke-brand bg-ui-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE` and `DISABLED`\n  &:checked:disabled,\n  &:indeterminate:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n\n  &:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n}\n\n// Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)\n.bq-checkbox__checkbox {\n  @apply rounded-[--bq-checkbox--border-radius] border-[length:--bq-checkbox--border-width] border-solid border-icon-primary;\n}\n\n.bq-checkbox__checkbox,\n.bq-checkbox__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  shadow: true,\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = 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  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  // Listeners\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.inputElem.setAttribute('checked', `${this.checked}`);\n    this.indeterminate = false;\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0\"\n            name={!isNil(this.name) ? this.name : undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            form={this.formId}\n            required={this.required}\n            value={this.value}\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            ref={(input: HTMLInputElement) => (this.inputElem = input)}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            tabindex=\"0\"\n          />\n          <span\n            class=\"bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M216 72 104 184l-56-56\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M40 128h176\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-checkbox.entry.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,i9vBAAi9vB,CAAC;AACx+vB,yBAAe,aAAa;;MCkBf,UAAU;;;;;;;;;;;;;;;;;QA0Jb,iBAAY,GAAG,CAAC,OAAgB;;YACtC,MAAM,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;;;;YAIzC,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;SACxD,CAAC;QAEM,uBAAkB,GAAG;YAC3B,MAAM,EAAE,qBAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;;YAEhF,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC,EAAE;;gBAE3B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBAC/B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO;aACR;;YAGD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACjC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC;SAClF,CAAC;QAEM,mBAAc,GAAG;YACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B,CAAC;QAEM,iBAAY,GAAG;YACrB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,CAAC;QAEM,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC5B,CAAC;QAEM,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC3B,CAAC;iCAjL4C,KAAK;;;;wBAYd,KAAK;6BAGe,KAAK;;;;;;;IAe9D,6BAA6B;QAC3B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAClD,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAGD,wBAAwB;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;;;;IAmBD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;KACtC;IAED,kBAAkB;;;;;;QAMhB,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;gBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;aAC/C;YACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;SACtC;KACF;IAED,sBAAsB;QACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;;QAEtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KAChC;;;;;;;;;;;;;IAiBD,MAAM,MAAM;;QACV,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;KACzB;;;;;IAOD,MAAM,MAAM;;QACV,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;KACzB;;;;;IAOD,MAAM,KAAK;;QACT,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;KACxB;;;;IAyDD,MAAM;QACJ,QACE,8DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,YAAY,EAAE,IAAI,CAAC,OAAO;gBAC1B,kBAAkB,EAAE,IAAI,CAAC,aAAa;gBACtC,iCAAiC,EAAE,IAAI,CAAC,QAAQ;gBAChD,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;aACzC,EACD,IAAI,EAAC,MAAM,IAEX,4DACE,KAAK,EAAC,6IAA6I,EACnJ,IAAI,EAAC,SAAS,IAEd,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,mFAAmF,EACzF,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,mBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,GAAG,EAAE,CAAC,KAAuB,MAAM,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC1D,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,GACZ,EACF,6DACE,KAAK,EAAC,6GAA6G,EACnH,IAAI,EAAC,UAAU,IAMd,IAAI,CAAC,OAAO,KACX,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,6CAA6C,EACnD,OAAO,EAAC,aAAa,IAErB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG,EACxC,6DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,EACjB,CAAC,EAAC,wBAAwB,GAC1B,CACE,CACP,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAClC,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,6CAA6C,EACnD,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc,IAEnB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG,EACxC,6DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,EACjB,CAAC,EAAC,aAAa,GACf,CACE,CACP,CACI,CACH,EACN,6DACE,KAAK,EAAC,6KAA6K,EACnL,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACH,CACD,EACR;KACH;;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/checkbox/scss/bq-checkbox.scss?tag=bq-checkbox&encapsulation=shadow","../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Checkbox styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-checkbox.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-checkbox {\n  @apply box-border inline-flex cursor-pointer select-none rounded-s transition-colors duration-300 ease-in-out p-b-xs p-i-xs;\n\n  // Default hover state\n  &:not(.is-checked),\n  &:not(.is-indeterminate) {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply border-hover-icon-brand;\n    }\n  }\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  // Checked/Indeterminate hover state\n  &.is-checked,\n  &.is-indeterminate {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply bg-hover-ui-brand border-hover-icon-brand;\n    }\n  }\n}\n\n.bq-checkbox__input {\n  // Checkbox square icon has `FOCUS`\n  &:focus-visible {\n    ~ .bq-checkbox__checkbox {\n      @apply focus border-stroke-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE`\n  &:checked,\n  &:indeterminate {\n    ~ .bq-checkbox__checkbox {\n      @apply border-stroke-brand bg-ui-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE` and `DISABLED`\n  &:checked:disabled,\n  &:indeterminate:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n\n  &:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n}\n\n// Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)\n.bq-checkbox__checkbox {\n  @apply rounded-[--bq-checkbox--border-radius] border-[length:--bq-checkbox--border-width] border-solid border-icon-primary;\n}\n\n.bq-checkbox__checkbox,\n.bq-checkbox__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = 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  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.clearSelection();\n    // Reset the form value and validity state\n    this.internals.setFormValue(undefined);\n    this.internals.setValidity({});\n  }\n\n  // Listeners\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\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    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private clearSelection = () => {\n    this.checked = false;\n    this.indeterminate = false;\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0\"\n            name={!isNil(this.name) ? this.name : undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            form={this.formId}\n            required={this.required}\n            value={this.value}\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            ref={(input: HTMLInputElement) => (this.inputElem = input)}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            tabindex=\"0\"\n          />\n          <span\n            class=\"bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M216 72 104 184l-56-56\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M40 128h176\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/bq-date-picker.entry.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7eed7a88.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-efc1c2ef.js';
 import './assetsPath-ae18c25e.js';
 import { i as isEventTargetChildOfElement } from './event-9ce1db79.js';
 import { i as isDefined } from './isDefined-91ae4cd3.js';