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

package/dist/beeq/{p-7f23cde7.entry.js.map → p-0979fdfd.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","this","runUpdates","updateProgressTrack","syncInputsValue","setThumbPosition","setState","newValue","isRangeType","value","stringToObject","minValue","clamp","min","max","gap","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","handleStepPropChange","round","handleGapChange","isNil","connectedCallback","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.handleGapChange(this.gap);\n    this.setState(this.value);\n    this.handleStepPropChange();\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 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":[]}
+{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","this","runUpdates","updateProgressTrack","syncInputsValue","setThumbPosition","setState","newValue","isRangeType","value","stringToObject","minValue","clamp","min","max","gap","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","handleStepPropChange","round","handleGapChange","isNil","connectedCallback","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.handleGapChange(this.gap);\n    this.setState(this.value);\n    this.handleStepPropChange();\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 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-0ab0b58d.js

@@ -2,5 +2,29 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-const t="--bq-";function n(n){const e=`${t}${n}`;const o=getComputedStyle(document.documentElement).getPropertyValue(e);if(!o)return undefined;return`var(${e})`}function e(t,n){const e=getComputedStyle(n);return String(e.getPropertyValue(`--${t}`)).trim()}export{e as a,n as g};
+const e = "--bq-";
+
+/**
+ * Get CSS custom property variable of a given color string value
+ *
+ * @param {string} colorName - Valid string value.
+ * @return {string} The corresponding CSS custom property variable
+ */ function getColorCSSVariable(t) {
+  const n = `${e}${t}`;
+  const r = getComputedStyle(document.documentElement).getPropertyValue(n);
+  if (!r) return undefined;
+  return `var(${n})`;
+}
+
+/**
+ * Get compiled CSS custom property value
+ *
+ * @param {string} variable - The variable name for which to get its value
+ * @return {string} The corresponding value for the given CSS custom property
+ */ function getCSSVariableValue(e, t) {
+  const n = getComputedStyle(t);
+  return String(n.getPropertyValue(`--${e}`)).trim();
+}
+
+export { getCSSVariableValue as a, getColorCSSVariable as g };
 //# sourceMappingURL=p-0ab0b58d.js.map

package/dist/beeq/p-0ab0b58d.js.map

@@ -1 +1 @@
-{"version":3,"names":["CSSVALUEPREFIX","getColorCSSVariable","colorName","token","value","getComputedStyle","document","documentElement","getPropertyValue","undefined","getCSSVariableValue","variable","component","styles","String","trim"],"sources":["../../packages/beeq/src/shared/utils/cssVariables.ts"],"sourcesContent":["const CSSVALUEPREFIX = '--bq-';\n\n/**\n * Get CSS custom property variable of a given color string value\n *\n * @param {string} colorName - Valid string value.\n * @return {string} The corresponding CSS custom property variable\n */\nexport function getColorCSSVariable(colorName: string): string {\n  const token = `${CSSVALUEPREFIX}${colorName}`;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(token);\n  if (!value) return undefined;\n\n  return `var(${token})`;\n}\n\n/**\n * Get compiled CSS custom property value\n *\n * @param {string} variable - The variable name for which to get its value\n * @return {string} The corresponding value for the given CSS custom property\n */\nexport function getCSSVariableValue(variable: string, component: Element): string {\n  const styles = getComputedStyle(component);\n  return String(styles.getPropertyValue(`--${variable}`)).trim();\n}\n"],"mappings":";;;;AAAA,MAAMA,EAAiB,Q,SAQPC,EAAoBC,GAClC,MAAMC,EAAQ,GAAGH,IAAiBE,IAClC,MAAME,EAAQC,iBAAiBC,SAASC,iBAAiBC,iBAAiBL,GAC1E,IAAKC,EAAO,OAAOK,UAEnB,MAAO,OAAON,IAChB,C,SAQgBO,EAAoBC,EAAkBC,GACpD,MAAMC,EAASR,iBAAiBO,GAChC,OAAOE,OAAOD,EAAOL,iBAAiB,KAAKG,MAAaI,MAC1D,Q","ignoreList":[]}
+{"version":3,"names":["CSSVALUEPREFIX","getColorCSSVariable","colorName","token","value","getComputedStyle","document","documentElement","getPropertyValue","undefined","getCSSVariableValue","variable","component","styles","String","trim"],"sources":["../../packages/beeq/src/shared/utils/cssVariables.ts"],"sourcesContent":["const CSSVALUEPREFIX = '--bq-';\n\n/**\n * Get CSS custom property variable of a given color string value\n *\n * @param {string} colorName - Valid string value.\n * @return {string} The corresponding CSS custom property variable\n */\nexport function getColorCSSVariable(colorName: string): string {\n  const token = `${CSSVALUEPREFIX}${colorName}`;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(token);\n  if (!value) return undefined;\n\n  return `var(${token})`;\n}\n\n/**\n * Get compiled CSS custom property value\n *\n * @param {string} variable - The variable name for which to get its value\n * @return {string} The corresponding value for the given CSS custom property\n */\nexport function getCSSVariableValue(variable: string, component: Element): string {\n  const styles = getComputedStyle(component);\n  return String(styles.getPropertyValue(`--${variable}`)).trim();\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAiB;;;;;;;aAQPC,oBAAoBC;EAClC,MAAMC,IAAQ,GAAGH,IAAiBE;EAClC,MAAME,IAAQC,iBAAiBC,SAASC,iBAAiBC,iBAAiBL;EAC1E,KAAKC,GAAO,OAAOK;EAEnB,OAAO,OAAON;AAChB;;;;;;;aAQgBO,oBAAoBC,GAAkBC;EACpD,MAAMC,IAASR,iBAAiBO;EAChC,OAAOE,OAAOD,EAAOL,iBAAiB,KAAKG,MAAaI;AAC1D","ignoreList":[]}