@beeq/core 1.8.0-beta.0 → 1.8.0-beta.10

package/dist/collection/components/dropdown/bq-dropdown.js

@@ -12,26 +12,6 @@ let id = 0;
  */
 export class BqDropdown {
     constructor() {
-        // Own Properties
-        // ====================
-        this.dropdownPanelId = `bq-dropdown-panel-${++id}`;
-        // Public methods API
-        // These methods are exposed on the host element.
-        // Always use two lines.
-        // Public Methods must be async.
-        // Requires JSDocs for public API documentation.
-        // ===============================================
-        // Local methods
-        // Internal business logic.
-        // These methods cannot be called from the host element.
-        // =======================================================
-        this.togglePanel = () => {
-            var _a;
-            // Don't toggle the panel if the component is disabled or the trigger element is disabled
-            if (this.disabled || ((_a = this.triggerElem) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')))
-                return;
-            this.open = !this.open;
-        };
         this.disabled = false;
         this.distance = 4;
         this.keepOpenOnSelect = false;
@@ -42,18 +22,33 @@ export class BqDropdown {
         this.skidding = 0;
         this.strategy = 'fixed';
     }
+    // Own Properties
+    // ====================
+    dropdownPanelId = `bq-dropdown-panel-${++id}`;
+    triggerElem;
+    // Reference to host HTML element
+    // ===================================
+    el;
     // Prop lifecycle events
     // =======================
     onOpenChange() {
         this.bqOpen.emit({ open: this.open });
     }
     handleDisabledChange() {
-        var _a, _b;
         if (!this.triggerElem)
             return;
         // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling
-        this.disabled ? (_a = this.triggerElem) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true') : (_b = this.triggerElem) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
+        if (!this.disabled) {
+            this.triggerElem?.removeAttribute('disabled');
+            return;
+        }
+        this.triggerElem?.setAttribute('disabled', 'true');
     }
+    // Events section
+    // Requires JSDocs for public API documentation
+    // ==============================================
+    /** Callback handler to be called when the dropdown panel is opened or closed. */
+    bqOpen;
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
@@ -91,6 +86,22 @@ export class BqDropdown {
             return;
         this.open = false;
     }
+    // Public methods API
+    // These methods are exposed on the host element.
+    // Always use two lines.
+    // Public Methods must be async.
+    // Requires JSDocs for public API documentation.
+    // ===============================================
+    // Local methods
+    // Internal business logic.
+    // These methods cannot be called from the host element.
+    // =======================================================
+    togglePanel = () => {
+        // Don't toggle the panel if the component is disabled or the trigger element is disabled
+        if (this.disabled || this.triggerElem?.hasAttribute('disabled'))
+            return;
+        this.open = !this.open;
+    };
     // render() function
     // Always the last one in the class.
     // ===================================
@@ -98,7 +109,7 @@ export class BqDropdown {
         const style = {
             ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),
         };
-        return (h("div", { key: '50ad5de23a43cc4cf52b84109f4956c4a3b858bc', class: "bq-dropdown", part: "base" }, h("div", { key: '81787e14a6b5693e069ef554dfd4c0594a0a5a6d', class: "bq-dropdown__trigger block", "aria-controls": this.dropdownPanelId, "aria-haspopup": "true", onClick: this.togglePanel, part: "trigger" }, h("slot", { key: 'ed9b75fde64885b12aeb4e9f69bb2cc42cd5e52a', name: "trigger" })), h("bq-panel", { key: '2520cbe2913f90d966a45926489fe9dc86c70450', style: style, id: this.dropdownPanelId, class: "bq-dropdown__panel", distance: this.distance, placement: this.placement, open: this.open, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, role: "group", part: "dropdown", exportparts: "panel" }, h("slot", { key: 'dd36867f0d0bbabbd76e56ee081ca1a3c3fb88f3' }))));
+        return (h("div", { key: '2ac61eda06d45f2b8854b267644853bf4a51ef01', class: "bq-dropdown", part: "base" }, h("div", { key: '59edd47afa2965bb12cabcb06fdaf9de0b9b4b5f', class: "bq-dropdown__trigger block", "aria-controls": this.dropdownPanelId, "aria-haspopup": "true", onClick: this.togglePanel, part: "trigger" }, h("slot", { key: '6a17b3bf90a78c5098ebe90df4fe50d43b056e91', name: "trigger" })), h("bq-panel", { key: 'd90f69501154639e9aebc37dbecf2ddaf8b3dd7f', style: style, id: this.dropdownPanelId, class: "bq-dropdown__panel", distance: this.distance, placement: this.placement, open: this.open, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, role: "group", part: "dropdown", exportparts: "panel" }, h("slot", { key: '7f8f659817324022d6dc31726094a1c82e6cab91' }))));
     }
     static get is() { return "bq-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/bq-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-dropdown.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/bq-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { Placement } from '../../services/interfaces';\n\nlet id = 0;\n\n/**\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element\n * @part trigger - The `<div>` element that hosts the trigger element\n */\n@Component({\n  tag: 'bq-dropdown',\n  styleUrl: './scss/bq-dropdown.scss',\n  shadow: true,\n})\nexport class BqDropdown {\n  // Own Properties\n  // ====================\n\n  private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n  private triggerElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDropdownElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the dropdown panel will be visible and won't be shown. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** If true, the panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the dropdown panel */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  onOpenChange() {\n    this.bqOpen.emit({ open: this.open });\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.triggerElem) return;\n\n    // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n    this.disabled ? this.triggerElem?.setAttribute('disabled', 'true') : this.triggerElem?.removeAttribute('disabled');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the dropdown panel is opened or closed. */\n  @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n    this.handleDisabledChange();\n  }\n\n  // Listeners\n  // ==============\n\n  /** Listens for the 'click' event on the document object\n   * and closes the dropdown panel if the click is outside the component.\n   */\n  @Listen('click', { target: 'document', passive: true })\n  onClickOutside(event: MouseEvent) {\n    if (!this.open) return;\n\n    // Close when clicking outside of the close element\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Listens for the 'keyup' event on the window object\n   * and closes the dropdown panel if the 'Escape' key or 'Tab' key outside the component is pressed.\n   */\n  @Listen('keyup', { target: 'window', passive: true })\n  onEscape(event: KeyboardEvent) {\n    if (!this.open) return;\n\n    if (event.key === 'Escape' || (event.key === 'Tab' && !event.composedPath().includes(this.el))) {\n      this.open = false;\n    }\n  }\n\n  @Listen('bqSelect', { passive: true })\n  onItemSelect() {\n    if (this.keepOpenOnSelect) return;\n\n    this.open = false;\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 togglePanel = (): void => {\n    // Don't toggle the panel if the component is disabled or the trigger element is disabled\n    if (this.disabled || this.triggerElem?.hasAttribute('disabled')) return;\n\n    this.open = !this.open;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n    };\n\n    return (\n      <div class=\"bq-dropdown\" part=\"base\">\n        {/* TRIGGER CONTAINER */}\n        <div\n          class=\"bq-dropdown__trigger block\"\n          aria-controls={this.dropdownPanelId}\n          aria-haspopup=\"true\"\n          onClick={this.togglePanel}\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <bq-panel\n          style={style}\n          id={this.dropdownPanelId}\n          class=\"bq-dropdown__panel\"\n          distance={this.distance}\n          placement={this.placement}\n          open={this.open}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          role=\"group\"\n          part=\"dropdown\"\n          exportparts=\"panel\"\n        >\n          <slot />\n        </bq-panel>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-dropdown.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/bq-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { Placement } from '../../services/interfaces';\n\nlet id = 0;\n\n/**\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element\n * @part trigger - The `<div>` element that hosts the trigger element\n */\n@Component({\n  tag: 'bq-dropdown',\n  styleUrl: './scss/bq-dropdown.scss',\n  shadow: true,\n})\nexport class BqDropdown {\n  // Own Properties\n  // ====================\n\n  private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n  private triggerElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDropdownElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the dropdown panel will be visible and won't be shown. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** If true, the panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the dropdown panel */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  onOpenChange() {\n    this.bqOpen.emit({ open: this.open });\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.triggerElem) return;\n\n    // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n    if (!this.disabled) {\n      this.triggerElem?.removeAttribute('disabled');\n      return;\n    }\n    this.triggerElem?.setAttribute('disabled', 'true');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the dropdown panel is opened or closed. */\n  @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n    this.handleDisabledChange();\n  }\n\n  // Listeners\n  // ==============\n\n  /** Listens for the 'click' event on the document object\n   * and closes the dropdown panel if the click is outside the component.\n   */\n  @Listen('click', { target: 'document', passive: true })\n  onClickOutside(event: MouseEvent) {\n    if (!this.open) return;\n\n    // Close when clicking outside of the close element\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Listens for the 'keyup' event on the window object\n   * and closes the dropdown panel if the 'Escape' key or 'Tab' key outside the component is pressed.\n   */\n  @Listen('keyup', { target: 'window', passive: true })\n  onEscape(event: KeyboardEvent) {\n    if (!this.open) return;\n\n    if (event.key === 'Escape' || (event.key === 'Tab' && !event.composedPath().includes(this.el))) {\n      this.open = false;\n    }\n  }\n\n  @Listen('bqSelect', { passive: true })\n  onItemSelect() {\n    if (this.keepOpenOnSelect) return;\n\n    this.open = false;\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 togglePanel = (): void => {\n    // Don't toggle the panel if the component is disabled or the trigger element is disabled\n    if (this.disabled || this.triggerElem?.hasAttribute('disabled')) return;\n\n    this.open = !this.open;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n    };\n\n    return (\n      <div class=\"bq-dropdown\" part=\"base\">\n        {/* TRIGGER CONTAINER */}\n        <div\n          class=\"bq-dropdown__trigger block\"\n          aria-controls={this.dropdownPanelId}\n          aria-haspopup=\"true\"\n          onClick={this.togglePanel}\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <bq-panel\n          style={style}\n          id={this.dropdownPanelId}\n          class=\"bq-dropdown__panel\"\n          distance={this.distance}\n          placement={this.placement}\n          open={this.open}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          role=\"group\"\n          part=\"dropdown\"\n          exportparts=\"panel\"\n        >\n          <slot />\n        </bq-panel>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/empty-state/bq-empty-state.js

@@ -15,28 +15,17 @@ import { hasSlotContent, validatePropValue } from "../../shared/utils";
  */
 export class BqEmptyState {
     constructor() {
-        // Listeners
-        // ==============
-        // Public methods API
-        // These methods are exposed on the host element.
-        // Always use two lines.
-        // Public Methods must be async.
-        // Requires JSDocs for public API documentation.
-        // ===============================================
-        // Local methods
-        // Internal business logic.
-        // These methods cannot be called from the host element.
-        // =======================================================
-        this.handleContentSlotChange = () => {
-            this.hasBody = hasSlotContent(this.bodyElem, 'body');
-        };
-        this.handleFooterSlotChange = () => {
-            this.hasFooter = hasSlotContent(this.footerElem, 'footer');
-        };
         this.hasBody = false;
         this.hasFooter = false;
         this.size = 'medium';
     }
+    // Own Properties
+    // ====================
+    bodyElem;
+    footerElem;
+    // Reference to host HTML element
+    // ===================================
+    el;
     // Prop lifecycle events
     // =======================
     checkPropValues() {
@@ -51,6 +40,24 @@ export class BqEmptyState {
     componentWillLoad() {
         this.checkPropValues();
     }
+    // Listeners
+    // ==============
+    // Public methods API
+    // These methods are exposed on the host element.
+    // Always use two lines.
+    // Public Methods must be async.
+    // Requires JSDocs for public API documentation.
+    // ===============================================
+    // Local methods
+    // Internal business logic.
+    // These methods cannot be called from the host element.
+    // =======================================================
+    handleContentSlotChange = () => {
+        this.hasBody = hasSlotContent(this.bodyElem, 'body');
+    };
+    handleFooterSlotChange = () => {
+        this.hasFooter = hasSlotContent(this.footerElem, 'footer');
+    };
     get iconSize() {
         return SIZE_TO_VALUE_MAP[this.size] || SIZE_TO_VALUE_MAP.medium;
     }
@@ -58,11 +65,11 @@ export class BqEmptyState {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: 'b90615e659a6cac45327e8c696189bbd13c29507', class: "inline-flex flex-col items-center", part: "wrapper" }, h("div", { key: 'b6042b2a9882fa0c1d144c429f310f544603b765', class: {
+        return (h("div", { key: 'edbbd39b9a17ead9e468197c44baade22dc48e94', class: "inline-flex flex-col items-center", part: "wrapper" }, h("div", { key: 'a40b8a7186614deeb705a98ffd32a35e91d47684', class: {
                 'm-be-m': this.size === 'small',
                 'm-be-xl': this.size === 'medium',
                 'm-be-xxl': this.size === 'large',
-            }, part: "thumbnail" }, h("slot", { key: '0591ec8aeedbf24b9591c771439f7152b0ede783', name: "thumbnail" }, h("bq-icon", { key: 'fa71af7602f1711fb137082030af4196ca9be7da', size: this.iconSize, name: "database", part: "icon", exportparts: "base,svg" }))), h("div", { key: '0df3edf598038dadca2cf6e31629f5a7fbbcaefe', class: {
+            }, part: "thumbnail" }, h("slot", { key: '7fd61415c33d06a0e083dd9cfd71d2beb6fece94', name: "thumbnail" }, h("bq-icon", { key: '13f20586539db6b31b21361d749e3f87e58b9176', size: this.iconSize, name: "database", part: "icon", exportparts: "base,svg" }))), h("div", { key: '0b0cbf179c5f4c4b7199aaea8b64d57c1081f18d', class: {
                 'title-font font-bold leading-regular text-text-primary': true,
                 'text-m': this.size === 'small',
                 'text-l': this.size === 'medium',
@@ -70,7 +77,7 @@ export class BqEmptyState {
                 'm-be-xs': this.size === 'small' && this.hasBody,
                 'm-be-m': this.size === 'medium' && this.hasBody,
                 'm-be-l': this.size === 'large' && this.hasBody,
-            }, part: "title" }, h("slot", { key: 'c72a86306c641ddf07b9b43e2b4a387bcb274595' })), h("div", { key: 'bf5ea4bbde69a6e8ff1213844a479358f792f530', class: {
+            }, part: "title" }, h("slot", { key: '6b7573b0a9dd1643a70addac73e5a81c230a345b' })), h("div", { key: '43d6a20cb5dff348f89d8000a1429e43cc24660d', class: {
                 'font-normal leading-regular': true,
                 'text-s': this.size === 'small',
                 'text-m': this.size === 'medium',
@@ -78,7 +85,7 @@ export class BqEmptyState {
                 'm-be-m': this.size === 'small' && this.hasFooter,
                 'm-be-l': this.size === 'medium' && this.hasFooter,
                 'm-be-xl': this.size === 'large' && this.hasFooter,
-            }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '4dfcf2f72ad4cd972373ac9b0040b0a8685e6a70', name: "body", onSlotchange: this.handleContentSlotChange })), h("div", { key: '51b98d98e2d09ab0b14c8c63e0559eebd46844c2', class: { 'flex items-start gap-xs': true }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: 'd81630f3a9cf1a98f9adbfa759e4e02671961823', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '42a967e534f2806881bc1c27baad90f7d8174693', name: "body", onSlotchange: this.handleContentSlotChange })), h("div", { key: '4196f39c435a23d92494af48b7a7724b7354f7a2', class: { 'flex items-start gap-xs': true }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '93586a303fc4c43c06d32755a506c9fce16c98a4', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "bq-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty-state/bq-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-empty-state.js","sourceRoot":"","sources":["../../../../../../src/components/empty-state/bq-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { EMPTY_STATE_SIZE, SIZE_TO_VALUE_MAP, TEmptyStateSize } from './bq-empty-state.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part body - The container `<div>` that wraps the alert description content\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n * @part thumbnail - The container `<div>` that wraps the thumbnail element\n * @part title - The container `<div>` that wraps the empty state title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n\n@Component({\n  tag: 'bq-empty-state',\n  styleUrl: './scss/bq-empty-state.scss',\n  shadow: true,\n})\nexport class BqEmptyState {\n  // Own Properties\n  // ====================\n\n  private bodyElem: HTMLDivElement;\n  private footerElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqEmptyStateElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasBody = false;\n  @State() private hasFooter = false;\n\n  // Public Property API\n  // ========================\n\n  /** The size of the empty state component */\n  @Prop({ reflect: true, mutable: true }) size: TEmptyStateSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(EMPTY_STATE_SIZE, 'medium', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\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 handleContentSlotChange = () => {\n    this.hasBody = hasSlotContent(this.bodyElem, 'body');\n  };\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private get iconSize(): number {\n    return SIZE_TO_VALUE_MAP[this.size] || SIZE_TO_VALUE_MAP.medium;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"inline-flex flex-col items-center\" part=\"wrapper\">\n        <div\n          class={{\n            'm-be-m': this.size === 'small',\n            'm-be-xl': this.size === 'medium',\n            'm-be-xxl': this.size === 'large',\n          }}\n          part=\"thumbnail\"\n        >\n          <slot name=\"thumbnail\">\n            <bq-icon size={this.iconSize} name=\"database\" part=\"icon\" exportparts=\"base,svg\" />\n          </slot>\n        </div>\n        <div\n          class={{\n            'title-font font-bold leading-regular text-text-primary': true,\n            'text-m': this.size === 'small',\n            'text-l': this.size === 'medium',\n            'text-xxl2': this.size === 'large',\n            'm-be-xs': this.size === 'small' && this.hasBody,\n            'm-be-m': this.size === 'medium' && this.hasBody,\n            'm-be-l': this.size === 'large' && this.hasBody,\n          }}\n          part=\"title\"\n        >\n          <slot />\n        </div>\n        <div\n          class={{\n            'font-normal leading-regular': true,\n            'text-s': this.size === 'small',\n            'text-m': this.size === 'medium',\n            'text-l': this.size === 'large',\n            'm-be-m': this.size === 'small' && this.hasFooter,\n            'm-be-l': this.size === 'medium' && this.hasFooter,\n            'm-be-xl': this.size === 'large' && this.hasFooter,\n          }}\n          ref={(div) => (this.bodyElem = div)}\n          part=\"body\"\n        >\n          <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n        </div>\n        <div class={{ 'flex items-start gap-xs': true }} ref={(div) => (this.footerElem = div)} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-empty-state.js","sourceRoot":"","sources":["../../../../../../src/components/empty-state/bq-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { EMPTY_STATE_SIZE, SIZE_TO_VALUE_MAP, TEmptyStateSize } from './bq-empty-state.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part body - The container `<div>` that wraps the alert description content\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n * @part thumbnail - The container `<div>` that wraps the thumbnail element\n * @part title - The container `<div>` that wraps the empty state title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n\n@Component({\n  tag: 'bq-empty-state',\n  styleUrl: './scss/bq-empty-state.scss',\n  shadow: true,\n})\nexport class BqEmptyState {\n  // Own Properties\n  // ====================\n\n  private bodyElem: HTMLDivElement;\n  private footerElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqEmptyStateElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasBody = false;\n  @State() private hasFooter = false;\n\n  // Public Property API\n  // ========================\n\n  /** The size of the empty state component */\n  @Prop({ reflect: true, mutable: true }) size: TEmptyStateSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(EMPTY_STATE_SIZE, 'medium', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\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 handleContentSlotChange = () => {\n    this.hasBody = hasSlotContent(this.bodyElem, 'body');\n  };\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private get iconSize(): number {\n    return SIZE_TO_VALUE_MAP[this.size] || SIZE_TO_VALUE_MAP.medium;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"inline-flex flex-col items-center\" part=\"wrapper\">\n        <div\n          class={{\n            'm-be-m': this.size === 'small',\n            'm-be-xl': this.size === 'medium',\n            'm-be-xxl': this.size === 'large',\n          }}\n          part=\"thumbnail\"\n        >\n          <slot name=\"thumbnail\">\n            <bq-icon size={this.iconSize} name=\"database\" part=\"icon\" exportparts=\"base,svg\" />\n          </slot>\n        </div>\n        <div\n          class={{\n            'title-font font-bold leading-regular text-text-primary': true,\n            'text-m': this.size === 'small',\n            'text-l': this.size === 'medium',\n            'text-xxl2': this.size === 'large',\n            'm-be-xs': this.size === 'small' && this.hasBody,\n            'm-be-m': this.size === 'medium' && this.hasBody,\n            'm-be-l': this.size === 'large' && this.hasBody,\n          }}\n          part=\"title\"\n        >\n          <slot />\n        </div>\n        <div\n          class={{\n            'font-normal leading-regular': true,\n            'text-s': this.size === 'small',\n            'text-m': this.size === 'medium',\n            'text-l': this.size === 'large',\n            'm-be-m': this.size === 'small' && this.hasFooter,\n            'm-be-l': this.size === 'medium' && this.hasFooter,\n            'm-be-xl': this.size === 'large' && this.hasFooter,\n          }}\n          ref={(div) => (this.bodyElem = div)}\n          part=\"body\"\n        >\n          <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n        </div>\n        <div class={{ 'flex items-start gap-xs': true }} ref={(div) => (this.footerElem = div)} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon/bq-icon.js

@@ -13,35 +13,6 @@ import { getBasePath, getColorCSSVariable, isNil } from "../../shared/utils";
  */
 export class BqIcon {
     constructor() {
-        // Listeners
-        // ==============
-        // Public methods API
-        // These methods are exposed on the host element.
-        // Always use two lines.
-        // Public Methods must be async.
-        // Requires JSDocs for public API documentation.
-        // ===============================================
-        // Local methods
-        // Internal business logic.
-        // These methods cannot be called from the host element.
-        // =======================================================
-        this.getIconSource = (name) => {
-            if (!this.name && !this.src)
-                return;
-            // Return the src if it is set
-            if (this.src)
-                return this.src;
-            const SVG_EXTENSION = '.svg';
-            const iconFileName = `${name}${SVG_EXTENSION}`;
-            return getBasePath(iconFileName);
-        };
-        this.loadIcon = (name) => {
-            const url = this.getIconSource(name);
-            getSvgContent(url, true).then(() => {
-                this._svgContent = iconContent.get(url);
-                this.svgLoaded.emit(this._svgContent);
-            });
-        };
         this._svgContent = undefined;
         this.label = undefined;
         this.color = undefined;
@@ -76,25 +47,64 @@ export class BqIcon {
         const iconName = `${this.name}${weightSuffix}`;
         this.loadIcon(iconName);
     }
+    // Events section
+    // Requires JSDocs for public API documentation
+    // ==============================================
+    /** Callback handler to be called when the SVG has loaded */
+    svgLoaded;
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
     connectedCallback() {
-        this.handlePropsChange();
+        this.setupIconComponent();
+    }
+    componentWillLoad() {
+        this.setupIconComponent();
+    }
+    // Listeners
+    // ==============
+    // Public methods API
+    // These methods are exposed on the host element.
+    // Always use two lines.
+    // Public Methods must be async.
+    // Requires JSDocs for public API documentation.
+    // ===============================================
+    // Local methods
+    // Internal business logic.
+    // These methods cannot be called from the host element.
+    // =======================================================
+    setupIconComponent = () => {
+        this.loadIcon(this.name);
         // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed
         if (!isNil(this.weight))
             this.handleWeightChange();
-    }
+    };
+    getIconSource = (name) => {
+        if (!this.name && !this.src)
+            return;
+        // Return the src if it is set
+        if (this.src)
+            return this.src;
+        const SVG_EXTENSION = '.svg';
+        const iconFileName = `${name}${SVG_EXTENSION}`;
+        return getBasePath(iconFileName);
+    };
+    loadIcon = (name) => {
+        const url = this.getIconSource(name);
+        getSvgContent(url, true).then(() => {
+            this._svgContent = iconContent.get(url);
+            this.svgLoaded.emit(this._svgContent);
+        });
+    };
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        var _a;
         const styles = {
             ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),
             ...(this.size && { '--bq-icon--size': `${this.size}px` }),
         };
-        return (h(Host, { key: 'b9779cb2a449a9ed5e1b1527c032ac063eb2ddfa', style: styles }, h("div", { key: '523947c4b80904049f194e369f7edce91dca43de', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : `${this.name} icon`, class: "flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]", innerHTML: this._svgContent, part: "base", role: "img" })));
+        return (h(Host, { key: '69753077792209616891575d12aeeefbd767f29c', style: styles }, h("div", { key: 'b7df52fa6437e598b9a79e686c9b036cd3dbe864', "aria-label": this.label ?? `${this.name} icon`, class: "flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]", innerHTML: this._svgContent, part: "base", role: "img" })));
     }
     static get is() { return "bq-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -153,8 +163,8 @@ export class BqIcon {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/)"

package/dist/collection/components/icon/bq-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-icon.js","sourceRoot":"","sources":["../../../../../../src/components/icon/bq-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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-icon.js","sourceRoot":"","sources":["../../../../../../src/components/icon/bq-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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.setupIconComponent();\n  }\n\n  componentWillLoad() {\n    this.setupIconComponent();\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 setupIconComponent = () => {\n    this.loadIcon(this.name);\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\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"]}

package/dist/collection/components/icon/helper/request.js

@@ -7,9 +7,17 @@
 /* -------------------------------------------------------------------------- */
 import { isNil, isString } from "../../../shared/utils";
 const requests = new Map();
+export const iconContent = new Map();
+/**
+ * Fetches SVG content from a given URL and optionally sanitizes it.
+ * @param {string} url - The URL to fetch the SVG from.
+ * @param {boolean} sanitize - Whether to sanitize the SVG content.
+ * @returns {Promise<unknown>} - A promise that resolves to the SVG content.
+ */
 const fetchSvg = async (url, sanitize) => {
-    if (typeof fetch === 'undefined' || typeof document === 'undefined')
+    if (isNil(url) || typeof fetch === 'undefined' || typeof window === 'undefined') {
         return;
+    }
     if (requests.has(url))
         return requests.get(url);
     try {
@@ -18,70 +26,80 @@ const fetchSvg = async (url, sanitize) => {
             iconContent.set(url, '');
             return;
         }
-        let svgContent = (await response.text()) || '';
-        if (svgContent && sanitize !== false)
+        let svgContent = await response.text();
+        if (sanitize !== false) {
             svgContent = validateContent(svgContent);
+        }
         iconContent.set(url, svgContent);
+        return svgContent;
     }
     catch (error) {
         console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);
         iconContent.set(url, '');
     }
 };
-export const iconContent = new Map();
+/**
+ * Retrieves the SVG content for a given URL, fetching and caching it if necessary.
+ * @param {string} url - The URL to fetch the SVG from.
+ * @param {boolean} sanitize - Whether to sanitize the SVG content.
+ * @returns {Promise<unknown>} - A promise that resolves to the SVG content.
+ */
 export const getSvgContent = async (url, sanitize) => {
+    if (isNil(url))
+        return;
     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;
 };
+/**
+ * Validates and sanitizes the SVG content.
+ * @param {string} svgContent - The SVG content to validate.
+ * @returns {string} - The sanitized SVG content.
+ */
 export const validateContent = (svgContent) => {
+    if (typeof window === 'undefined' || isNil(svgContent))
+        return '';
     const svgTag = 'svg';
     const iconCssClass = 'bq-icon__svg';
     const div = document.createElement('div');
     div.innerHTML = svgContent;
-    for (let i = div.childNodes.length - 1; i >= 0; i--) {
-        if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {
-            div.removeChild(div.childNodes[i]);
-        }
-    }
-    // must only have 1 root element
-    const svgElm = div.firstElementChild;
-    if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {
-        // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class
-        const othersCssClasses = svgElm.getAttribute('class') || '';
-        svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());
-        // set the shadow DOM part for the SVG element
+    const svgElm = div.querySelector(svgTag);
+    if (svgElm) {
+        const existingClasses = svgElm.getAttribute('class') || '';
+        svgElm.setAttribute('class', `${existingClasses} ${iconCssClass}`.trim());
         svgElm.setAttribute('part', svgTag);
-        // remove height and width attribute, if for some reason they are still present in the SVG tag
         svgElm.removeAttribute('height');
         svgElm.removeAttribute('width');
-        // root element must be an svg
-        // lets double check we've got valid elements
-        // do not allow scripts
-        if (isValid(svgElm))
+        if (isValid(svgElm)) {
             return div.innerHTML;
+        }
     }
     return '';
 };
+/**
+ * Checks if an HTML element is valid (i.e., does not contain scripts or event handlers).
+ * @param {HTMLElement} elm - The element to check.
+ * @returns {boolean} - True if the element is valid, false otherwise.
+ */
 export const isValid = (elm) => {
-    if (elm.nodeType === Node.ELEMENT_NODE) {
-        if (elm.nodeName.toLowerCase() === 'script')
+    if (!elm)
+        return false;
+    if (elm.nodeType !== Node.ELEMENT_NODE)
+        return false;
+    if (elm.nodeName.toLowerCase() === 'script')
+        return false;
+    for (const attribute of Array.from(elm.attributes)) {
+        if (isString(attribute.value) && attribute.value.toLowerCase().startsWith('on')) {
             return false;
-        for (const attribute of Array.from(elm.attributes)) {
-            const value = attribute.value;
-            if (isString(value) && value.toLowerCase().startsWith('on')) {
-                return false;
-            }
-        }
-        for (const childNode of Array.from(elm.children)) {
-            if (!isValid(childNode))
-                return false;
         }
     }
+    for (const childNode of Array.from(elm.children)) {
+        if (!isValid(childNode))
+            return false;
+    }
     return true;
 };
 //# sourceMappingURL=request.js.map

package/dist/collection/components/icon/helper/request.js.map

@@ -1 +1 @@
-{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------- */\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"]}
+{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\nexport const iconContent = new Map<string, string>();\n\n/**\n * Fetches SVG content from a given URL and optionally sanitizes it.\n * @param {string} url - The URL to fetch the SVG from.\n * @param {boolean} sanitize - Whether to sanitize the SVG content.\n * @returns {Promise<unknown>} - A promise that resolves to the SVG content.\n */\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (isNil(url) || typeof fetch === 'undefined' || typeof window === 'undefined') {\n    return;\n  }\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 (sanitize !== false) {\n      svgContent = validateContent(svgContent);\n    }\n\n    iconContent.set(url, svgContent);\n    return svgContent;\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    iconContent.set(url, '');\n  }\n};\n\n/**\n * Retrieves the SVG content for a given URL, fetching and caching it if necessary.\n * @param {string} url - The URL to fetch the SVG from.\n * @param {boolean} sanitize - Whether to sanitize the SVG content.\n * @returns {Promise<unknown>} - A promise that resolves to the SVG content.\n */\nexport const getSvgContent = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (isNil(url)) return;\n\n  let req = requests.get(url);\n\n  if (isNil(req)) {\n    req = fetchSvg(url, sanitize);\n    requests.set(url, req);\n  }\n  return req;\n};\n\n/**\n * Validates and sanitizes the SVG content.\n * @param {string} svgContent - The SVG content to validate.\n * @returns {string} - The sanitized SVG content.\n */\nexport const validateContent = (svgContent: string): string => {\n  if (typeof window === 'undefined' || isNil(svgContent)) return '';\n\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  const svgElm = div.querySelector(svgTag);\n\n  if (svgElm) {\n    const existingClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${existingClasses} ${iconCssClass}`.trim());\n    svgElm.setAttribute('part', svgTag);\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    if (isValid(svgElm)) {\n      return div.innerHTML;\n    }\n  }\n\n  return '';\n};\n\n/**\n * Checks if an HTML element is valid (i.e., does not contain scripts or event handlers).\n * @param {HTMLElement} elm - The element to check.\n * @returns {boolean} - True if the element is valid, false otherwise.\n */\nexport const isValid = (elm: Element): boolean => {\n  if (!elm) return false;\n  if (elm.nodeType !== Node.ELEMENT_NODE) return false;\n  if (elm.nodeName.toLowerCase() === 'script') return false;\n\n  for (const attribute of Array.from(elm.attributes)) {\n    if (isString(attribute.value) && attribute.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"]}