@beeq/core 1.2.0 → 1.3.0

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

@@ -3,203 +3,222 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { h } from "@stencil/core";
-import { SLIDER_TYPE } from "./bq-slider.types";
-import { debounce, isString, validatePropValue } from "../../shared/utils";
+import { debounce, isNil, isString } from "../../shared/utils";
+/**
+ * @part base - The component's base wrapper.
+ * @part container - The container of the slider.
+ * @part track-area - The track area of the slider.
+ * @part progress-area - The progress area of the slider.
+ * @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`.
+ * @part input-max - The input element for the maximum value.
+ * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.
+ * @part label-end - The label for maximum value when the slider type is `range`.
+ */
 export class BqSlider {
     constructor() {
-        this.setPropValue = (value) => {
-            if (!value)
-                return;
-            if (value.hasOwnProperty('min') && value.min) {
-                if (this.isSingleSlider) {
-                    this.value = value.min;
-                    this.minRangeValue = value.min;
-                    this.setElementValue(String(value.min), this.minRangeInputElement);
-                    return;
-                }
-                if (this.gap && value.hasOwnProperty('max')) {
-                    value.min = Math.min(value.min, value.max - this.gap);
-                }
-                this.value[0] = value.min;
-                this.minRangeValue = value.min;
-                this.setElementValue(String(value.min), this.minRangeInputElement);
-            }
-            if (value.hasOwnProperty('max') && value.max) {
-                if (this.gap && value.hasOwnProperty('min')) {
-                    value.max = Math.max(value.max, value.min + this.gap);
-                }
-                this.value[1] = value.max;
-                this.maxRangeValue = value.max;
-                this.setElementValue(String(value.max), this.maxRangeInputElement);
-            }
-        };
-        this.handleMinRangeInput = () => {
-            if (!this.isSingleSlider) {
-                const minRangeValue = Math.min(parseFloat(this.minRangeInputElement.value), parseFloat(this.maxRangeInputElement.value) - this.gap);
-                this.setPropValue({ min: minRangeValue });
-            }
-            this.setPropValue({ min: parseFloat(this.minRangeInputElement.value) });
-            this.updateProgressSize();
-            this.handleRangeInputChange();
+        // 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.runUpdates = () => {
+            this.updateProgressTrack();
+            this.syncInputsValue();
+            this.setThumbPosition();
         };
-        this.handleMaxRangeInput = () => {
-            if (!this.isSingleSlider) {
-                const maxRangeValue = Math.max(parseFloat(this.maxRangeInputElement.value), parseFloat(this.minRangeInputElement.value) + this.gap);
-                this.setPropValue({ max: maxRangeValue });
-            }
-            this.setPropValue({ max: parseFloat(this.maxRangeInputElement.value) });
-            this.updateProgressSize();
-            this.handleRangeInputChange();
+        this.calculateMinValue = (value) => {
+            var _a;
+            const isMaxValue = ((_a = this.maxValue) !== null && _a !== void 0 ? _a : value[1]) === this.max;
+            const isGapExceeded = value[0] + this.gap > this.max;
+            // Make sure that the min value gets adjusted according to the gap value
+            return isMaxValue || isGapExceeded ? this.max - this.gap : value[0];
         };
-        this.updateProgressSize = () => {
-            let leftPercent = 0 + '%';
-            let rightPercent = 100 - ((parseFloat(this.minRangeInputElement.value) - this.min) / (this.max - this.min)) * 100 + '%';
-            if (!this.isSingleSlider) {
-                leftPercent = ((parseFloat(this.minRangeInputElement.value) - this.min) / (this.max - this.min)) * 100 + '%';
-                rightPercent =
-                    100 - ((parseFloat(this.maxRangeInputElement.value) - this.min) / (this.max - this.min)) * 100 + '%';
-            }
-            this.progressDivElement.style.left = leftPercent;
-            this.progressDivElement.style.right = rightPercent;
+        this.calculateMaxValue = (value, minValue) => Math.max(value[1], minValue + this.gap);
+        this.setState = (newValue) => {
+            const isRangeType = this.isRangeType;
+            const value = this.stringToObject(newValue);
+            this.minValue = isRangeType ? this.calculateMinValue(value) : value;
+            this.maxValue = isRangeType ? this.calculateMaxValue(value, this.minValue) : this.minValue;
         };
-        this.sanitizeArrayValue = (defaultValue) => {
-            if (!Array.isArray(this.value))
+        this.setThumbPosition = () => {
+            if (!this.enableTooltip)
                 return;
-            if (!this.value.length) {
-                this.value = defaultValue;
-                return;
-            }
-            if (this.isSingleSlider) {
-                this.value = this.value[0];
-                return;
-            }
-            if (this.value.length === 1) {
-                this.value[1] = this.value[0];
-            }
-            if (this.value.length > 1) {
-                this.value[0] = Math.min(this.value[0], this.value[1]);
-                this.value[1] = Math.max(this.value[0], this.value[1]);
-            }
+            // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition
+            ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());
         };
-        this.sanitizePropValue = () => {
-            const defaultValue = !this.isSingleSlider ? [0, 0] : 0;
-            if (!this.value) {
-                this.value = defaultValue;
-            }
-            this.value = isString(this.value) ? JSON.parse(this.value) : this.value;
-            if (Array.isArray(this.value)) {
-                this.sanitizeArrayValue(defaultValue);
-            }
-            if (typeof this.value === 'object' && !Array.isArray(this.value)) {
-                this.value = defaultValue;
+        this.syncInputsValue = () => {
+            var _a, _b;
+            (_a = this.inputMinElem) === null || _a === void 0 ? void 0 : _a.setAttribute('value', this.minValue.toString());
+            (_b = this.inputMaxElem) === null || _b === void 0 ? void 0 : _b.setAttribute('value', this.maxValue.toString());
+        };
+        this.stringToObject = (value) => (isString(value) ? JSON.parse(value) : value);
+        this.handleInputChange = (type, event) => {
+            const target = event.target;
+            const value = parseFloat(target.value);
+            if (type === 'min') {
+                this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;
             }
-            if (typeof this.value === 'number' && !this.isSingleSlider && !Array.isArray(this.value)) {
-                this.value = [this.value, this.value];
+            else if (type === 'max') {
+                this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;
             }
-            this.setPropValue(this.isSingleSlider ? { min: Number(this.value) } : { min: this.value[0], max: this.value[1] });
+            // Update the input value to reflect the clamped value
+            const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();
+            target.value = reflectedValue;
+            target.setAttribute('value', reflectedValue);
+            this.emitBqChange();
+        };
+        this.calculatePercent = (value) => {
+            const totalRange = Number(this.max) - Number(this.min);
+            return (value / totalRange) * 100;
         };
-        this.setElementValue = (value, element) => {
-            if (!element || !(element instanceof HTMLInputElement))
+        this.updateProgressTrack = () => {
+            if (!this.progressElem)
                 return;
-            element.value = value;
-            element.setAttribute('value', value);
+            // For range type, left starts from the `min` value and width is the difference between `max` and `min`.
+            // For non-range type, left starts from 0 and width is the `min` value.
+            const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;
+            const width = this.isRangeType
+                ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))
+                : this.calculatePercent(this.minValue);
+            this.progressElem.style.left = `${left}%`;
+            this.progressElem.style.width = `${width}%`;
         };
-        this.getMinRangeValue = () => {
-            if (!this.value)
-                return 0;
-            return !Array.isArray(this.value) ? this.value : this.value[0];
+        this.calculateThumbPosition = (value) => {
+            if (!this.progressElem)
+                return;
+            // Get the width of the track area and the size of the input range thumb
+            const trackAreaWidth = this.trackElem.getBoundingClientRect().width;
+            // We need to also add 4px to the thumb size,
+            // this is because the thumb is 2px border (`border-2`)
+            const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;
+            const totalWidth = trackAreaWidth - inputThumbSize;
+            return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;
         };
-        this.getMaxRangeValue = () => {
-            if (!this.value)
-                return 0;
-            return this.value[1];
+        this.thumbPosition = () => {
+            const minThumbPosition = this.calculateThumbPosition(this.minValue);
+            const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;
+            return { minThumbPosition, maxThumbPosition };
         };
-        this.handleRangeInputBlur = () => {
+        this.emitBqChange = () => {
+            var _a;
+            (_a = this.debounceBqChange) === null || _a === void 0 ? void 0 : _a.cancel();
+            const value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;
+            this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);
+            this.debounceBqChange();
+        };
+        this.handleBlur = () => {
             this.bqBlur.emit(this.el);
         };
-        this.handleRangeInputFocus = () => {
+        this.handleFocus = () => {
             this.bqFocus.emit(this.el);
         };
-        this.handleRangeInputChange = () => {
-            var _a;
-            (_a = this.bqChangeDebounced) === null || _a === void 0 ? void 0 : _a.cancel();
-            this.bqChangeDebounced = debounce(() => this.bqChange.emit({ value: this.value, el: this.el }), this.debounceTime);
-            this.bqChangeDebounced();
+        this.handleMouseDown = (event) => {
+            this.handleTooltipVisibility(event, 'remove');
         };
-        this.minRangeValue = 0;
-        this.maxRangeValue = 0;
-        this.disabled = false;
+        this.handleMouseUp = (event) => {
+            this.handleTooltipVisibility(event, 'add');
+        };
+        this.handleTooltipVisibility = (event, action) => {
+            if (!this.enableTooltip || this.tooltipAlwaysVisible)
+                return;
+            const target = event.target;
+            const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;
+            tooltipElem.classList[action]('hidden');
+        };
+        this.renderLabel = (value, position, css) => {
+            return (h("span", { class: {
+                    [`${css} box-content block w-fit min-w-8 text-s font-medium leading-regular text-text-primary [font-variant:tabular-nums]`]: true,
+                    hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator || !this.isRangeType,
+                }, part: `label-${position}` }, value.toFixed(this.decimalCount)));
+        };
+        this.renderInput = (type, value, refCallback) => {
+            return (h("input", { type: "range", class: {
+                    'absolute top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed': true,
+                    'pointer-events-none': this.isRangeType,
+                }, disabled: this.disabled, min: this.min, max: this.max, step: this.step, ref: refCallback, onInput: (ev) => this.handleInputChange(type, ev), onBlur: this.handleBlur, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, value: value, part: `input-${type}` }));
+        };
+        this.renderTooltip = (value, thumbPosition, refCallback) => (h("bq-tooltip", { class: {
+                'absolute [&::part(panel)]:absolute': true,
+                hidden: !this.isTooltipAlwaysVisible,
+            }, exportparts: "base,trigger,panel", alwaysVisible: true, distance: this.enableValueIndicator ? 6 : 16, style: { left: `${thumbPosition}px`, fontVariant: 'tabular-nums' }, ref: refCallback }, h("div", { class: "absolute size-1", slot: "trigger" }), value.toFixed(this.decimalCount)));
+        this.minValue = undefined;
+        this.maxValue = undefined;
+        this.minThumbPosition = undefined;
+        this.maxThumbPosition = undefined;
         this.debounceTime = 0;
+        this.disabled = false;
+        this.enableValueIndicator = false;
         this.gap = 0;
+        this.max = 100;
         this.min = 0;
-        this.max = 0;
         this.step = 1;
         this.type = 'single';
-        this.valueIndicator = false;
         this.value = undefined;
+        this.enableTooltip = false;
+        this.tooltipAlwaysVisible = false;
     }
     // Prop lifecycle events
     // =======================
-    handleTypePropChange() {
-        validatePropValue(SLIDER_TYPE, 'single', this.el, 'type');
+    handleValuePropChange(newValue) {
+        this.setState(newValue);
+        this.emitBqChange();
     }
-    handleValuePropChange() {
-        this.handleRangeInputChange();
+    handleStepPropChange() {
+        this.minValue = Math.round(this.minValue / this.step) * this.step;
+        this.maxValue = Math.round(this.maxValue / this.step) * this.step;
+    }
+    handleGapChange(newValue) {
+        if (!this.isRangeType)
+            return;
+        // Use the this.value prop value when the component is initialized
+        // Otherwise, use the current this.min and this.max state values
+        const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);
+        // If the gap is less than the min or greater than the max, set it to 0
+        this.gap = newValue < value[0] || newValue > value[1] ? 0 : newValue;
     }
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    componentWillLoad() {
-        this.handleTypePropChange();
+    connectedCallback() {
+        this.handleGapChange(this.gap);
+        this.setState(this.value);
+        this.handleStepPropChange();
     }
     componentDidLoad() {
-        this.sanitizePropValue();
-        this.updateProgressSize();
+        this.runUpdates();
     }
     componentDidUpdate() {
-        this.sanitizePropValue();
-        this.updateProgressSize();
+        this.runUpdates();
+    }
+    get decimalCount() {
+        // Return the length of the decimal part of the step value.
+        return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;
     }
-    // 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.
-    // =======================================================
-    get isSingleSlider() {
-        return this.type === 'single';
+    get isRangeType() {
+        return this.type === 'range';
     }
-    get stepDecimalNumber() {
-        if (this.step % 1 != 0)
-            return this.step.toString().split('.')[1].length;
-        return 0;
+    get isTooltipAlwaysVisible() {
+        return this.tooltipAlwaysVisible && this.enableTooltip;
     }
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '8911db4d7ddd0f29a66bb438b3443655d9e31067', class: {
-                [`bq-slider ${this.type}`]: true,
-                'cursor-not-allowed opacity-60': this.disabled,
-            }, part: "base", "aria-disabled": this.disabled ? 'true' : 'false' }, !this.isSingleSlider && (h("span", { class: {
-                'is-hidden': !this.valueIndicator,
-                'bq-slider__label mr-m': true,
-            } }, this.minRangeValue.toFixed(this.stepDecimalNumber))), h("div", { key: 'a14fc23c39517f3ea4bd0ddda11a63fed50e655c', class: "bq-slider__container" }, h("input", { key: '252acb6cb04eb40dbd2d770886e876a9e727d313', class: "bq-slider__input", type: "range", min: this.min, max: this.max, step: this.step, value: String(this.getMinRangeValue()), disabled: this.disabled, ref: (input) => (this.minRangeInputElement = input), onInput: this.handleMinRangeInput, onBlur: this.handleRangeInputBlur, onFocus: this.handleRangeInputFocus, "aria-label": "Min Range" }), !this.isSingleSlider && (h("input", { class: "bq-slider__input", type: "range", min: this.min, max: this.max, step: this.step, value: String(this.getMaxRangeValue()), disabled: this.disabled, ref: (input) => (this.maxRangeInputElement = input), onInput: this.handleMaxRangeInput, onBlur: this.handleRangeInputBlur, onFocus: this.handleRangeInputFocus, "aria-label": "Max Range" })), h("div", { key: '86f03de469ba7beb3cb0dda22cf27393bddae6f5', class: "progress", ref: (div) => (this.progressDivElement = div) })), !this.isSingleSlider && (h("span", { class: {
-                'is-hidden': !this.valueIndicator,
-                'bq-slider__label ml-m': true,
-            } }, this.maxRangeValue.toFixed(this.stepDecimalNumber))), this.isSingleSlider && (h("span", { class: {
-                'is-hidden': !this.valueIndicator,
-                'bq-slider__label ml-m': true,
-            } }, this.minRangeValue.toFixed(this.stepDecimalNumber)))));
+        return (h("div", { key: '9408f87c933fc29816396213661129f38da4d109', "aria-disabled": this.disabled ? 'true' : 'false', class: { 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }, part: "base" }, this.renderLabel(this.minValue, 'start', 'me-xs text-end'), h("div", { key: '2d85ff90ea6377d45ad4c7780eeefccf42a15cc3', class: "relative w-full", part: "container" }, h("span", { key: '5ef5178ec7673a75676f247faf5da969947d6af9', class: "absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]", ref: (elem) => (this.trackElem = elem), part: "track-area" }), h("span", { key: '09cfc93bdace0a8e33a749d97f9a1770c2ac1d35', class: "absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]", ref: (elem) => (this.progressElem = elem), part: "progress-area" }), this.enableTooltip &&
+            this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem)), this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input)), this.enableTooltip &&
+            this.isRangeType &&
+            this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem)), this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))), this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')));
     }
     static get is() { return "bq-slider"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./scss/bq-slider.scss"]
@@ -212,6 +231,24 @@ export class BqSlider {
     }
     static get properties() {
         return {
+            "debounceTime": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change."
+                },
+                "attribute": "debounce-time",
+                "reflect": true,
+                "defaultValue": "0"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -224,33 +261,33 @@ export class BqSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` slider is disabled"
+                    "text": "If `true` the slider is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "debounceTime": {
-                "type": "number",
+            "enableValueIndicator": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the delay value applied to bqChange event handler"
+                    "text": "If `true` it will show the value label on a side of the slider track area"
                 },
-                "attribute": "debounce-time",
+                "attribute": "enable-value-indicator",
                 "reflect": true,
-                "defaultValue": "0"
+                "defaultValue": "false"
             },
             "gap": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -260,13 +297,13 @@ export class BqSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the minimum value between the min and max range selected."
+                    "text": "A number representing the amount to remain between the minimum and maximum values (only for range type)."
                 },
                 "attribute": "gap",
                 "reflect": true,
                 "defaultValue": "0"
             },
-            "min": {
+            "max": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -278,13 +315,13 @@ export class BqSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the min value of the slider."
+                    "text": "A number representing the max value of the slider."
                 },
-                "attribute": "min",
+                "attribute": "max",
                 "reflect": true,
-                "defaultValue": "0"
+                "defaultValue": "100"
             },
-            "max": {
+            "min": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -296,9 +333,9 @@ export class BqSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the max value of the slider."
+                    "text": "A number representing the min value of the slider."
                 },
-                "attribute": "max",
+                "attribute": "min",
                 "reflect": true,
                 "defaultValue": "0"
             },
@@ -314,7 +351,7 @@ export class BqSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the step of the slider."
+                    "text": "A number representing the step of the slider.\n\u26A0\uFE0F Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`."
                 },
                 "attribute": "step",
                 "reflect": true,
@@ -344,7 +381,30 @@ export class BqSlider {
                 "reflect": true,
                 "defaultValue": "'single'"
             },
-            "valueIndicator": {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "TSliderValue",
+                    "resolved": "[number, number] | number | string",
+                    "references": {
+                        "TSliderValue": {
+                            "location": "import",
+                            "path": "./bq-slider.types",
+                            "id": "../../packages/beeq/src/components/slider/bq-slider.types.ts::TSliderValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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)."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "enableTooltip": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -353,43 +413,41 @@ export class BqSlider {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` it will display the min and max values"
+                    "text": "If `true`, a tooltip will be shown displaying the progress value"
                 },
-                "attribute": "value-indicator",
+                "attribute": "enable-tooltip",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
+            "tooltipAlwaysVisible": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "number | Array<number> | string",
-                    "resolved": "number | number[] | string",
-                    "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A number representing the value of the slider."
+                    "text": "If `true`, a tooltip will always display the progress value.\nIt relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true."
                 },
-                "attribute": "value",
-                "reflect": true
+                "attribute": "tooltip-always-visible",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "minRangeValue": {},
-            "maxRangeValue": {}
+            "minValue": {},
+            "maxValue": {},
+            "minThumbPosition": {},
+            "maxThumbPosition": {}
         };
     }
     static get events() {
@@ -404,12 +462,17 @@ export class BqSlider {
                     "text": "Handler to be called when change the value on range inputs"
                 },
                 "complexType": {
-                    "original": "{ value: number | Array<number> | string; el: HTMLBqSliderElement }",
-                    "resolved": "{ value: string | number | number[]; el: HTMLBqSliderElement; }",
+                    "original": "{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }",
+                    "resolved": "{ value: number | [number, number]; el: HTMLBqSliderElement; }",
                     "references": {
-                        "Array": {
+                        "Exclude": {
                             "location": "global",
-                            "id": "global::Array"
+                            "id": "global::Exclude"
+                        },
+                        "TSliderValue": {
+                            "location": "import",
+                            "path": "./bq-slider.types",
+                            "id": "../../packages/beeq/src/components/slider/bq-slider.types.ts::TSliderValue"
                         },
                         "HTMLBqSliderElement": {
                             "location": "global",
@@ -462,11 +525,14 @@ export class BqSlider {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "type",
-                "methodName": "handleTypePropChange"
-            }, {
                 "propName": "value",
                 "methodName": "handleValuePropChange"
+            }, {
+                "propName": "step",
+                "methodName": "handleStepPropChange"
+            }, {
+                "propName": "gap",
+                "methodName": "handleGapChange"
             }];
     }
 }