@beeq/core 1.8.0-beta.1 → 1.8.0-beta.2

package/dist/beeq/{p-0979fdfd.entry.js → p-9aa18e2f.entry.js}

@@ -4,7 +4,7 @@
  */
 import { r, c as a, h as e, g as b } from "./p-0c42c08a.js";
 
-import "./p-bef53750.js";
+import "./p-e5afdf8c.js";
 
 import { c as t } from "./p-1f3a4359.js";
 
@@ -36,7 +36,12 @@ const d = class {
     // Internal business logic.
     // These methods cannot be called from the host element.
     // =======================================================
-        this.runUpdates = () => {
+        this.init = () => {
+      this.handleGapChange(this.gap);
+      this.setState(this.value);
+      this.handleStepPropChange();
+    };
+    this.runUpdates = () => {
       this.updateProgressTrack();
       this.syncInputsValue();
       this.setThumbPosition();
@@ -228,9 +233,10 @@ const d = class {
   // Ordered by their natural call order
   // =====================================
   connectedCallback() {
-    this.handleGapChange(this.gap);
-    this.setState(this.value);
-    this.handleStepPropChange();
+    this.init();
+  }
+  componentWillLoad() {
+    this.init();
   }
   componentDidLoad() {
     this.runUpdates();
@@ -253,7 +259,7 @@ const d = class {
   // ===================================
   render() {
     return e("div", {
-      key: "e5cc501e43ecb6b226dfc155a8cdd2695d321e82",
+      key: "7e5e51fd0071e51d0044aad5806ca6f0830effd6",
       "aria-disabled": this.disabled ? "true" : "false",
       class: {
         "flex is-full": true,
@@ -261,16 +267,16 @@ const d = class {
       },
       part: "base"
     }, this.renderLabel(this.minValue, "start", "me-xs text-end"), e("div", {
-      key: "8981fe81b253e935b9768b10bc4a7b1e8094be61",
+      key: "a634215936756adc80b3b1334be46e043d56e0e5",
       class: "relative is-full",
       part: "container"
     }, e("span", {
-      key: "bda764fef71c4fa0fa8ef5b2ae2eac7abb5010ea",
+      key: "84706af7ff86d2f7552671716e202c5c1cf2726a",
       class: "absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]",
       ref: r => this.trackElem = r,
       part: "track-area"
     }), e("span", {
-      key: "fb6871c348b5b41b29f9be40cd5c449a405e281c",
+      key: "be9989047cee5228530fe55522341adc818bac2e",
       class: "absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]",
       ref: r => this.progressElem = r,
       part: "progress-area"
@@ -294,4 +300,4 @@ const d = class {
 d.style = q;
 
 export { d as bq_slider };
-//# sourceMappingURL=p-0979fdfd.entry.js.map
+//# sourceMappingURL=p-9aa18e2f.entry.js.map

package/dist/beeq/p-9aa18e2f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","this","init","handleGapChange","gap","setState","value","handleStepPropChange","runUpdates","updateProgressTrack","syncInputsValue","setThumbPosition","newValue","isRangeType","stringToObject","minValue","clamp","min","max","maxValue","enableTooltip","minThumbPosition","maxThumbPosition","thumbPosition","_a","inputMinElem","setAttribute","toString","_b","inputMaxElem","isString","JSON","parse","handleInputChange","type","event","target","parseFloat","Math","reflectedValue","calculatePercent","totalRange","Number","progressElem","left","width","style","insetInlineStart","inlineSize","calculateThumbPosition","trackAreaWidth","trackElem","getBoundingClientRect","inputThumbSize","parseInt","getComputedStyle","el","getPropertyValue","totalWidth","undefined","emitBqChange","debounceBqChange","cancel","debounce","bqChange","emit","debounceTime","handleBlur","bqBlur","handleFocus","bqFocus","handleMouseDown","handleTooltipVisibility","handleMouseUp","action","tooltipAlwaysVisible","tooltipElem","minTooltipElem","maxTooltipElem","classList","renderLabel","position","css","h","class","hidden","enableValueIndicator","part","toFixed","decimalCount","renderInput","refCallback","zIndexValue","zIndex","disabled","step","ref","onInput","ev","onBlur","onFocus","onMouseDown","onMouseUp","renderTooltip","isTooltipAlwaysVisible","exportparts","alwaysVisible","distance","fontVariant","slot","handleValuePropChange","round","isNil","connectedCallback","componentWillLoad","componentDidLoad","componentDidUpdate","split","replace","length","render","key","elem","input"],"sources":["../../packages/beeq/src/components/slider/scss/bq-slider.scss?tag=bq-slider&encapsulation=shadow","../../packages/beeq/src/components/slider/bq-slider.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                               Slider styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-slider.variables';\n\n@layer components {\n  .thumb {\n    @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-stroke-brand bg-ui-primary;\n    @apply transition-[background-color,border-color,box-shadow] duration-300;\n  }\n\n  .thumb-focus {\n    @apply focus;\n  }\n\n  .thumb-hover {\n    @apply border-hover-stroke-brand;\n  }\n\n  .thumb-active {\n    @apply cursor-grabbing bg-active-ui-brand border-active-stroke-brand;\n  }\n}\n\n:host {\n  @apply block is-full;\n}\n\n/* ---------------------- Webkit (Chrome, Safari, Edge) --------------------- */\n\ninput[type='range']::-webkit-slider-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-webkit-slider-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-webkit-slider-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-webkit-slider-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-webkit-slider-thumb {\n  @apply cursor-not-allowed;\n}\n\n/* ---------------------------- Mozilla (Firefox) --------------------------- */\n\ninput[type='range']::-moz-range-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-moz-range-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-moz-range-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-moz-range-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-moz-range-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-moz-range-thumb {\n  @apply cursor-not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n */\n@Component({\n  tag: 'bq-slider',\n  styleUrl: './scss/bq-slider.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSlider {\n  // Own Properties\n  // ====================\n\n  private inputMinElem: HTMLInputElement;\n  private inputMaxElem: HTMLInputElement;\n  private minTooltipElem: HTMLBqTooltipElement;\n  private maxTooltipElem: HTMLBqTooltipElement;\n  private progressElem: HTMLSpanElement;\n  private trackElem: HTMLSpanElement;\n  private debounceBqChange: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSliderElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  /**\n   * The `minValue` state is the only value when the slider type is `single`\n   * and the minimum value when the slider type is `range`.\n   */\n  @State() minValue: number;\n  /** The `maxValue` state is only used when the slider type is `range`. */\n  @State() maxValue: number;\n  /** It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) */\n  @State() minThumbPosition: number;\n  /** It hold the left position of the Thumb for the maximum value (if the slider type is `range`) */\n  @State() maxThumbPosition: number;\n\n  // Public Property API\n  // ========================\n\n  /** The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. */\n  @Prop({ reflect: true }) debounceTime = 0;\n\n  /** If `true` the slider is disabled. */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** If `true` it will show the value label on a side of the slider track area */\n  @Prop({ reflect: true }) enableValueIndicator? = false;\n\n  /** A number representing the amount to remain between the minimum and maximum values (only for range type). */\n  @Prop({ reflect: true, mutable: true }) gap = 0;\n\n  /** A number representing the max value of the slider. */\n  @Prop({ reflect: true }) max = 100;\n\n  /** A number representing the min value of the slider. */\n  @Prop({ reflect: true }) min = 0;\n\n  /**\n   * A number representing the step of the slider.\n   * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n   */\n  @Prop({ reflect: true }) step = 1;\n\n  /** It defines the type of slider to display  */\n  @Prop({ reflect: true }) type: TSliderType = 'single';\n\n  /**\n   * The value of the slider.\n   * - If the slider type is `single`, the value is a number.\n   * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n   */\n  @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n  /** If `true`, a tooltip will be shown displaying the progress value */\n  @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n  /**\n   * If `true`, a tooltip will always display the progress value.\n   * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n   */\n  @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValuePropChange(newValue: TSliderValue) {\n    this.setState(newValue);\n    this.emitBqChange();\n  }\n\n  @Watch('step')\n  handleStepPropChange() {\n    this.minValue = Math.round(this.minValue / this.step) * this.step;\n    this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n  }\n\n  @Watch('gap')\n  handleGapChange(newValue: number) {\n    if (!this.isRangeType) return;\n    // Use the this.value prop value when the component is initialized\n    // Otherwise, use the current this.min and this.max state values\n    const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n    // If the gap is less than the min or greater than the max, set it to 0\n    this.gap = newValue < value[0] || newValue > value[1] ? 0 : newValue;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when change the value on range inputs */\n  @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n  /** Handler to be called when the slider loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n  /** Handler to be called when the slider gets focused */\n  @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.init();\n  }\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.runUpdates();\n  }\n\n  componentDidUpdate() {\n    this.runUpdates();\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 init = () => {\n    this.handleGapChange(this.gap);\n    this.setState(this.value);\n    this.handleStepPropChange();\n  };\n\n  private runUpdates = () => {\n    this.updateProgressTrack();\n    this.syncInputsValue();\n    this.setThumbPosition();\n  };\n\n  private setState = (newValue: TSliderValue) => {\n    const isRangeType = this.isRangeType;\n    const value = this.stringToObject(newValue);\n\n    this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;\n    this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;\n  };\n\n  private setThumbPosition = () => {\n    if (!this.enableTooltip) return;\n\n    // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n    ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n  };\n\n  private syncInputsValue = () => {\n    this.inputMinElem?.setAttribute('value', this.minValue.toString());\n    this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n  };\n\n  private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n  private handleInputChange = (type: 'min' | 'max', event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n\n    if (type === 'min') {\n      this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n    } else if (type === 'max') {\n      this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n    }\n\n    // Update the input value to reflect the clamped value\n    const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n    target.value = reflectedValue;\n    target.setAttribute('value', reflectedValue);\n\n    // Sync the prop value.\n    // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n    this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n  };\n\n  private calculatePercent = (value: number) => {\n    const totalRange = Number(this.max) - Number(this.min);\n    return (value / totalRange) * 100;\n  };\n\n  private updateProgressTrack = () => {\n    if (!this.progressElem) return;\n\n    // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n    // For non-range type, left starts from 0 and width is the `min` value.\n    const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n    const width = this.isRangeType\n      ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n      : this.calculatePercent(this.minValue);\n\n    this.progressElem.style.insetInlineStart = `${left}%`;\n    this.progressElem.style.inlineSize = `${width}%`;\n  };\n\n  private calculateThumbPosition = (value: number): number => {\n    if (!this.progressElem) return;\n\n    // Get the width of the track area and the size of the input range thumb\n    const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n    // We need to also add 4px to the thumb size,\n    // this is because the thumb is 2px border (`border-m`)\n    const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n    const totalWidth = trackAreaWidth - inputThumbSize;\n\n    return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n  };\n\n  private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n    const minThumbPosition = this.calculateThumbPosition(this.minValue);\n    const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n    return { minThumbPosition, maxThumbPosition };\n  };\n\n  private emitBqChange = () => {\n    this.debounceBqChange?.cancel();\n\n    const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n    this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n    this.debounceBqChange();\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 handleMouseDown = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'remove');\n  };\n\n  private handleMouseUp = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'add');\n  };\n\n  private handleTooltipVisibility = (event: MouseEvent, action: 'add' | 'remove') => {\n    if (!this.enableTooltip || this.tooltipAlwaysVisible) return;\n\n    const target = event.target as HTMLElement;\n    const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n    tooltipElem.classList[action]('hidden');\n  };\n\n  private get decimalCount(): number {\n    // Return the length of the decimal part of the step value.\n    return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n  }\n\n  private get isRangeType() {\n    return this.type === 'range';\n  }\n\n  private get isTooltipAlwaysVisible(): boolean {\n    return this.tooltipAlwaysVisible && this.enableTooltip;\n  }\n\n  private renderLabel = (value: number, position: 'start' | 'end', css?: string) => {\n    return (\n      <span\n        class={{\n          [`${css} box-content block text-s font-medium leading-regular text-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n            true,\n          hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator || !this.isRangeType,\n        }}\n        part={`label-${position}`}\n      >\n        {value.toFixed(this.decimalCount)}\n      </span>\n    );\n  };\n\n  private renderInput = (type: 'max' | 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n    // Determine the zIndex value based on the type and the current min and max values.\n    const zIndexValue = (type: 'min' | 'max'): string => {\n      const zIndex = {\n        min: this.minValue === this.min && this.maxValue === this.minValue,\n        max: this.maxValue === this.max && this.minValue === this.maxValue,\n      };\n\n      // If the value of both thumbs is the same as the min or max value, set the zIndex to -1\n      return zIndex[type] ? '-1' : '0';\n    };\n\n    return (\n      <input\n        type=\"range\"\n        class={{\n          'absolute start-0 -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none is-full inset-bs-[50%] disabled:cursor-not-allowed':\n            true,\n          'pointer-events-none': this.isRangeType,\n        }}\n        style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}\n        disabled={this.disabled}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        ref={refCallback}\n        onInput={(ev) => this.handleInputChange(type, ev)}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        onMouseUp={this.handleMouseUp}\n        value={value}\n        part={`input-${type}`}\n      />\n    );\n  };\n\n  private renderTooltip = (\n    value: number,\n    thumbPosition: number,\n    refCallback: (elem: HTMLBqTooltipElement) => void,\n  ): HTMLBqTooltipElement => (\n    <bq-tooltip\n      class={{\n        'absolute [&::part(panel)]:absolute': true,\n        hidden: !this.isTooltipAlwaysVisible,\n      }}\n      exportparts=\"base,trigger,panel\"\n      alwaysVisible={true}\n      distance={this.enableValueIndicator ? 6 : 16}\n      style={{ insetInlineStart: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n      ref={refCallback}\n    >\n      <div class=\"absolute bs-1 is-1\" slot=\"trigger\" />\n      {value.toFixed(this.decimalCount)}\n    </bq-tooltip>\n  );\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class={{ 'flex is-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n        part=\"base\"\n      >\n        {/* LABEL (start) */}\n        {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n        {/* SLIDER */}\n        <div class=\"relative is-full\" part=\"container\">\n          {/* TRACK AREA */}\n          <span\n            class=\"absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]\"\n            ref={(elem) => (this.trackElem = elem)}\n            part=\"track-area\"\n          />\n          {/* PROGRESS AREA */}\n          <span\n            class=\"absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]\"\n            ref={(elem) => (this.progressElem = elem)}\n            part=\"progress-area\"\n          />\n          {/* TOOLTIP on top of the value or min value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n          {/* INPUT (Min), used on single type */}\n          {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n          {/* TOOLTIP on top of the max value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.isRangeType &&\n            this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n          {/* INPUT (Max) */}\n          {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n        </div>\n        {/* LABEL (end) */}\n        {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-f77d9b8b.entry.js → p-ae94b9f8.entry.js}

@@ -4,7 +4,7 @@
  */
 import { r as a, c as r, h as e } from "./p-0c42c08a.js";
 
-import "./p-bef53750.js";
+import "./p-e5afdf8c.js";
 
 import { i as b } from "./p-57621be1.js";
 
@@ -98,36 +98,36 @@ const t = class {
   // ===================================
   render() {
     return e("aside", {
-      key: "dc6873b0f0b1cd4f9bd34cd3ef1c9793466718b5",
+      key: "34947507bce3f0007ef2ae705aa8b7ce15ced1b3",
       class: {
         "bq-side-menu overflow-y-auto": true,
         "is-collapsed": this.collapse
       },
       part: "base"
     }, e("div", {
-      key: "e013d866c5f77ae85fa8352fc8d941162a86f696",
+      key: "81acff060ead1fb865d4bde821a5e43152bc12c5",
       class: {
         "bq-side-menu--logo": true,
         "is-collapsed": this.collapse
       },
       part: "logo"
     }, e("slot", {
-      key: "0bd06f2bce069fc5e7a44ed2eab782421014aca7",
+      key: "eeec8c95239bcd5d54f3a2497124d558eb28d785",
       name: "logo"
     })), e("nav", {
-      key: "113aacf9d263a4c9accc77e6f2f678c700e93ecf",
+      key: "9f8a29a942d106ed8849f536b4559dc38c9b168b",
       class: "bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2",
       ref: a => this.menuElem = a,
       role: "menu",
       part: "nav"
     }, e("slot", {
-      key: "718d2fdc561579658540069e42aa2593abfebfd5"
+      key: "97a50103ce752d6694d523221ec3c97847677fb9"
     })), e("div", {
-      key: "521a498fb692a1a76a25e695d137ba60a2a001de",
+      key: "6ec4cb1403792641a8ade51625b50226be3e0e2d",
       class: "bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]",
       part: "footer"
     }, e("slot", {
-      key: "b05370458fbd16ee29c85fc08ebd92c137f85fda",
+      key: "9a87bcfb8ea06c8f158313a39271e9ae1836b301",
       name: "footer"
     })));
   }
@@ -141,4 +141,4 @@ const t = class {
 t.style = q;
 
 export { t as bq_side_menu };
-//# sourceMappingURL=p-f77d9b8b.entry.js.map
+//# sourceMappingURL=p-ae94b9f8.entry.js.map

package/dist/beeq/{p-9990889d.entry.js → p-b38e8c5a.entry.js}

@@ -4,7 +4,7 @@
  */
 import { r as a, c as r, h as b, a as e, g as t } from "./p-0c42c08a.js";
 
-import "./p-bef53750.js";
+import "./p-e5afdf8c.js";
 
 import { d as n } from "./p-951ba558.js";
 
@@ -20,9 +20,7 @@ const s = '::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blu
 
 const d = s;
 
-const c = Object.assign(document.createElement("div"), {
-  className: "bq-toast-portal"
-});
+const c = "bq-toast-portal";
 
 const l = class {
   constructor(b) {
@@ -45,6 +43,7 @@ const l = class {
         this.open = false;
       }
     };
+    this.toastPortal = document.querySelector(`.${c}`);
     this.border = "s";
     this.type = "info";
     this.placement = "bottom-center";
@@ -57,8 +56,9 @@ const l = class {
   checkPropValues() {
     q(o, "default", this.el, "type");
     q(i, "bottom-center", this.el, "placement");
-    c.classList.remove(...i);
-    c.classList.add(this.placement);
+    const {toastPortal: a} = this;
+    a === null || a === void 0 ? void 0 : a.classList.remove(...i);
+    a === null || a === void 0 ? void 0 : a.classList.add(this.placement);
   }
   handleTimeChange() {
     var a;
@@ -78,6 +78,14 @@ const l = class {
   // Component lifecycle events
   // Ordered by their natural call order
   // =====================================
+  connectedCallback() {
+    const {toastPortal: a} = this;
+    if (!a) {
+      this.toastPortal = Object.assign(document.createElement("div"), {
+        className: c
+      });
+    }
+  }
   componentWillLoad() {
     this.checkPropValues();
     this.handleTimeChange();
@@ -91,10 +99,11 @@ const l = class {
   // ==============
   onNotificationHide() {
     try {
-      c.removeChild(this.el);
+      const {toastPortal: a} = this;
+      a === null || a === void 0 ? void 0 : a.removeChild(this.el);
       // Remove the toast portal from the DOM when there are no more toasts
-            if (c.querySelector("bq-toast") === null) {
-        c.remove();
+            if ((a === null || a === void 0 ? void 0 : a.querySelector(this.el.tagName.toLowerCase())) === null) {
+        a === null || a === void 0 ? void 0 : a.remove();
       }
     } catch (a) {
       /**
@@ -119,46 +128,24 @@ const l = class {
     this.handleHide();
   }
   /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */  async toast() {
-    if (c.parentElement === null) {
-      document.body.append(c);
+    const {toastPortal: a} = this;
+    if ((a === null || a === void 0 ? void 0 : a.parentElement) === null) {
+      document.body.append(a);
     }
-    c.appendChild(this.el);
+    a === null || a === void 0 ? void 0 : a.appendChild(this.el);
     requestAnimationFrame((() => {
       this.show();
     }));
   }
   get iconName() {
-    switch (this.type) {
-     case "success":
-      {
-        return "check-circle";
-      }
-
-     case "error":
-      {
-        return "x-circle";
-      }
-
-     case "loading":
-      {
-        return "spinner-gap";
-      }
-
-     case "alert":
-      {
-        return "warning";
-      }
-
-     case "info":
-      {
-        return "info";
-      }
-
-     default:
-      {
-        return "info";
-      }
-    }
+    const a = {
+      success: "check-circle-bold",
+      error: "x-circle-bold",
+      loading: "spinner-gap-bold",
+      alert: "warning-bold",
+      info: "info-bold"
+    };
+    return a[this.type] || "info-bold";
   }
   // render() function
   // Always the last one in the class.
@@ -170,7 +157,7 @@ const l = class {
       }
     };
     return b(e, {
-      key: "92cf08f0abf78c45ef326b73cb9547b6495e5f13",
+      key: "89c7766c5f8a30e2df213e42659c4bfdc6e30b68",
       style: a,
       class: {
         "is-hidden": !this.open
@@ -179,28 +166,27 @@ const l = class {
       hidden: !this.open ? "true" : "false",
       role: "status"
     }, b("output", {
-      key: "2aa93a90403a531eab822d41b45d38a157edd93d",
+      key: "b56f1a9423dda8c16fd62a5d607612bcbb7e6c1f",
       class: "bq-toast",
       part: "wrapper"
     }, b("div", {
-      key: "5c4a26b54f98fc5e1c5aa264ff6ccece8ac8a946",
+      key: "adc4ca518a189af534edfe79db684ffbc7829f87",
       class: {
         [`bq-toast--icon ${this.type}`]: true,
         "!hidden": this.hideIcon
       },
       part: "icon"
     }, b("slot", {
-      key: "d8c5f572a283a7c5cd4189d1170002fc483ba2b8",
+      key: "7e18865dd12b3a6f7b79ed5be1ec15a8727e1580",
       name: "icon"
     }, b("bq-icon", {
-      key: "d6d833b966813cc6a535b092e0dba10683496cc7",
+      key: "ca4f5c984b2f571f0f5adcf2470f221c259ad439",
       name: this.iconName,
       size: "24",
-      weight: "bold",
       slot: "icon",
       exportparts: "base,svg"
     }))), b("slot", {
-      key: "dd723087ce352e091544775c2c5953293090b0fb"
+      key: "ea40eaab5a7093813360530af7efca1e79d46e37"
     })));
   }
   get el() {
@@ -219,4 +205,4 @@ const l = class {
 l.style = d;
 
 export { l as bq_toast };
-//# sourceMappingURL=p-9990889d.entry.js.map
+//# sourceMappingURL=p-b38e8c5a.entry.js.map

package/dist/beeq/p-b38e8c5a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TOAST_TYPE","TOAST_PLACEMENT","bqToastCss","BqToastStyle0","TOAST_PORTAL_SELECTOR","BqToast","this","handleShow","ev","bqShow","emit","el","defaultPrevented","open","handleHide","bqHide","document","querySelector","checkPropValues","validatePropValue","toastPortal","classList","remove","add","placement","handleTimeChange","_a","autoDismissDebounce","cancel","time","Math","max","debounce","hide","handleOpenChange","_b","call","connectedCallback","Object","assign","createElement","className","componentWillLoad","disconnectedCallback","onNotificationHide","removeChild","tagName","toLowerCase","error","DOMException","show","toast","parentElement","body","append","appendChild","requestAnimationFrame","iconName","typeMap","success","loading","alert","info","type","render","style","border","h","Host","key","class","hidden","role","part","hideIcon","name","size","slot","exportparts"],"sources":["../../packages/beeq/src/components/toast/bq-toast.types.ts","../../packages/beeq/src/components/toast/scss/bq-toast.scss?tag=bq-toast&encapsulation=shadow","../../packages/beeq/src/components/toast/bq-toast.tsx"],"sourcesContent":["export const TOAST_TYPE = ['info', 'success', 'alert', 'error', 'loading', 'custom'] as const;\nexport type TToastType = (typeof TOAST_TYPE)[number];\n\nexport const TOAST_PLACEMENT = [\n  'top-center',\n  'top-right',\n  'bottom-right',\n  'bottom-center',\n  'bottom-left',\n  'top-left',\n] as const;\nexport type TToastPlacement = (typeof TOAST_PLACEMENT)[number];\n\nexport const TOAST_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TToastBorderRadius = (typeof TOAST_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Toast styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-toast.variables';\n\n:host {\n  @apply inline-block;\n}\n\n:host(.is-hidden) {\n  @apply hidden;\n}\n\n.bq-toast {\n  @include animation-slide-in;\n  @apply flex items-center gap-[--bq-toast--gap] p-b-[--bq-toast--padding-y] p-i-[--bq-toast--padding-x];\n  @apply rounded-[--bq-toast--border-radius] bg-[--bq-toast--background] shadow-[shadow:--bq-toast--box-shadow];\n  @apply border-[length:--bq-toast--border-width] border-[color:--bq-toast--border-color];\n\n  border-style: var(--bq-toast--border-style);\n}\n\n.bq-toast--icon {\n  @apply flex;\n\n  &.info {\n    @apply text-[--bq-toast--icon-color-info];\n  }\n\n  &.success {\n    @apply text-[--bq-toast--icon-color-success];\n  }\n\n  &.alert {\n    @apply text-[--bq-toast--icon-color-alert];\n  }\n\n  &.error {\n    @apply text-[--bq-toast--icon-color-error];\n  }\n\n  &.loading {\n    @include animation-spin;\n    @apply text-[--bq-toast--icon-color-loading];\n  }\n\n  &.custom {\n    @apply text-[--bq-toast--icon-color-custom];\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TOAST_PLACEMENT, TOAST_TYPE, TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';\nimport { debounce, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst TOAST_PORTAL_SELECTOR = 'bq-toast-portal';\n\n/**\n * @part wrapper - The component's internal wrapper inside the shadow DOM.\n * @part icon-info - The `<div>` container that holds the icon component.\n * @part base - The `<div>` container of the internal bq-icon component.\n * @part svg - The `<svg>` element of the internal bq-icon component.\n *\n * @slot - The content to be displayed in the toast component.\n * @slot icon - The icon to be displayed in the toast component.\n */\n@Component({\n  tag: 'bq-toast',\n  styleUrl: './scss/bq-toast.scss',\n  shadow: true,\n})\nexport class BqToast {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqToastElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private toastPortal = document.querySelector(`.${TOAST_PORTAL_SELECTOR}`);\n\n  // Public Property API\n  // ========================\n\n  /** The corder radius of the toast component */\n  @Prop({ reflect: true }) border: TToastBorderRadius = 's';\n\n  /** Type of toast */\n  @Prop({ reflect: true, mutable: true }) type: TToastType = 'info';\n\n  /** Placement of toast */\n  @Prop({ reflect: true, mutable: true }) placement: TToastPlacement = 'bottom-center';\n\n  /** If true will hide toast icon */\n  @Prop({ reflect: true, mutable: true }) hideIcon = false;\n\n  /** If true, the toast will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the toast will close itself */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TOAST_TYPE, 'default', this.el, 'type');\n    validatePropValue(TOAST_PLACEMENT, 'bottom-center', this.el, 'placement');\n\n    const { toastPortal } = this;\n    toastPortal?.classList.remove(...TOAST_PLACEMENT);\n    toastPortal?.classList.add(this.placement);\n  }\n\n  @Watch('time')\n  handleTimeChange() {\n    this.autoDismissDebounce?.cancel();\n\n    this.time = Math.max(0, this.time);\n\n    this.autoDismissDebounce = debounce(() => {\n      this.hide();\n    }, this.time);\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.autoDismissDebounce?.cancel();\n\n    if (this.open) {\n      this.autoDismissDebounce?.();\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the notification is hidden */\n  @Event() bqHide: EventEmitter<HTMLBqToastElement>;\n\n  /** Callback handler to be called when the notification is shown */\n  @Event() bqShow: EventEmitter<HTMLBqToastElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    const { toastPortal } = this;\n    if (!toastPortal) {\n      this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });\n    }\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleTimeChange();\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    this.autoDismissDebounce?.cancel();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqHide')\n  onNotificationHide() {\n    try {\n      const { toastPortal } = this;\n      toastPortal?.removeChild(this.el);\n      // Remove the toast portal from the DOM when there are no more toasts\n      if (toastPortal?.querySelector(this.el.tagName.toLowerCase()) === null) {\n        toastPortal?.remove();\n      }\n    } catch (error) {\n      /**\n       * Skip DOMException error since it could be possible that\n       * in some situations the notification portal is missing\n       */\n      if (error instanceof DOMException) return;\n      throw error;\n    }\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /** Method to be called to show the toast component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  /** Method to be called to hide the toast component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */\n  @Method()\n  async toast() {\n    const { toastPortal } = this;\n    if (toastPortal?.parentElement === null) {\n      document.body.append(toastPortal);\n    }\n\n    toastPortal?.appendChild(this.el);\n\n    requestAnimationFrame(() => {\n      this.show();\n    });\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleShow = () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = true;\n    }\n  };\n\n  private handleHide = () => {\n    const ev = this.bqHide.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = false;\n    }\n  };\n\n  private get iconName() {\n    const typeMap = {\n      success: 'check-circle-bold',\n      error: 'x-circle-bold',\n      loading: 'spinner-gap-bold',\n      alert: 'warning-bold',\n      info: 'info-bold',\n    };\n\n    return typeMap[this.type] || 'info-bold';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-hidden': !this.open }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"status\"\n      >\n        <output class=\"bq-toast\" part=\"wrapper\">\n          <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part=\"icon\">\n            <slot name=\"icon\">\n              <bq-icon name={this.iconName} size=\"24\" slot=\"icon\" exportparts=\"base,svg\" />\n            </slot>\n          </div>\n          <slot />\n        </output>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-822773ae.entry.js → p-b4278945.entry.js}

@@ -4,7 +4,7 @@
  */
 import { r as a, h as r, g as e } from "./p-0c42c08a.js";
 
-import "./p-bef53750.js";
+import "./p-e5afdf8c.js";
 
 import { a as b } from "./p-0ab0b58d.js";
 
@@ -125,7 +125,7 @@ const v = class {
   // ===================================
   render() {
     return r("div", {
-      key: "9f62c61c9d882bd9d520059a62b1d7859b21a2a9",
+      key: "16c6b705d29da31217a216a1f3112541406bab57",
       class: {
         [`bq-spinner ${this.size} text-${this.textPosition}`]: true,
         "is-animated": this.animation,
@@ -133,26 +133,26 @@ const v = class {
       },
       part: "base"
     }, !this.hasIconSlot && r("div", {
-      key: "665458605918883f5749b9c65faed2d4b35d8590",
+      key: "963e8626cc63d84271989ac1c88865b677e006f8",
       class: `bq-spinner--loader ${this.size} relative text-[--bq-spinner--color]`,
       "aria-label": "Loading...",
       role: "status"
     }, r("svg", {
-      key: "7dfbc336f3cdeb12140676ebf8cf9515b91a122c",
+      key: "d2516d3243caa3b9bd1223c2eadc9de3298b7803",
       class: "bs-full is-full",
       fill: "currentColor",
       viewBox: "0 0 48 48"
     }, r("path", {
-      key: "bbe8fe1d60e547818ce6848fd90aa5a373a2671f",
+      key: "72f146eff86a3758c6bd9516cce570b3085fa3ba",
       fill: "currentColor",
       d: "M10.27 7.637c-.937-1.117-.798-2.796.415-3.605a24 24 0 0 1 37.09 23.249c-.2 1.444-1.65 2.301-3.064 1.944-1.414-.356-2.25-1.793-2.096-3.242A18.72 18.72 0 0 0 14.102 8.11c-1.237.77-2.895.643-3.832-.474Z"
     }), r("path", {
-      key: "265cd94b7686bb5f540d249f1e2496db71959ca9",
+      key: "2366c8c25addee9092f1cc1f6402fa2d2835c742",
       fill: "currentColor",
       d: "M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24ZM5.28 24c0 10.339 8.381 18.72 18.72 18.72 10.339 0 18.72-8.381 18.72-18.72 0-10.339-8.381-18.72-18.72-18.72C13.661 5.28 5.28 13.661 5.28 24Z",
       opacity: ".1"
     }))), r("span", {
-      key: "9f291abf7feaeef7a3852e8f596822a31a08b722",
+      key: "79c4c16ce19fb6d443c09d3b1e43e856f7230057",
       class: {
         "bq-spinner--icon": true,
         flex: this.hasIconSlot,
@@ -161,11 +161,11 @@ const v = class {
       ref: a => this.iconSlotElem = a,
       part: "custom-icon"
     }, r("slot", {
-      key: "375fdfab3b73437e23d54254b6d2c22ec82d73db",
+      key: "d574885b176b5b6a9e1b5257c2612266b9d90bf2",
       name: "icon",
       onSlotchange: this.handleIconSlotChange
     })), r("span", {
-      key: "be19259971375900430935d01fb0f9f464cf693c",
+      key: "adf980624b245e7217da1a62c21f4d6fe337cabc",
       class: {
         "bq-spinner--text font-medium leading-regular text-text-primary": true,
         "!hidden": !this.isTextDisplayed
@@ -173,7 +173,7 @@ const v = class {
       part: "text",
       ref: a => this.slotElem = a
     }, r("slot", {
-      key: "10d45af6dcfa7f97e3ac12020940e756db93a64a",
+      key: "a88e6a388607c252af762e760585772b80c5cf3b",
       onSlotchange: this.handleSlotChange
     })));
   }
@@ -192,4 +192,4 @@ const v = class {
 v.style = c;
 
 export { v as bq_spinner };
-//# sourceMappingURL=p-822773ae.entry.js.map
+//# sourceMappingURL=p-b4278945.entry.js.map