@dubai-design-system/components-js 5.1.1 → 5.2.0

package/dist/components/dda-range-slider.js

@@ -1 +1,93 @@
-import{t as a,p as t,H as e,h as d,c as r}from"./p-DJw8qV7U.js";import{u as i}from"./p-B-I003EB.js";const n=t(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.min=0,this.max=100,this.step=1,this.initial_min=0,this.initial_max=100,this.custom_class="",this.fallbackId=i("dda-range-slider")}componentWillLoad(){this.min_value=this.initial_min,this.max_value=this.initial_max}handleMinChange(a){const t=Number(a.target.value);t<=this.max_value-this.step&&(this.min_value=t)}handleMaxChange(a){const t=Number(a.target.value);t>=this.min_value+this.step&&(this.max_value=t)}getPercentage(a){return(a-this.min)/(this.max-this.min)*100}render(){const a=this.left_input_id||this.fallbackId+"-min",t=this.right_input_id||this.fallbackId+"-max";return d(r,{key:"3a72a25212a511d65f982a0606cd8cd0e6cd1d66"},d("div",{key:"8eb7a5199e81bc5bf437d5dfe61e4eec7b732753",class:`dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}`},d("div",{key:"6b303ab598aff66a693b645d350fea4eaa470bac",class:"dda-range-slider"},d("div",{key:"3904d63ade7e2251d9ea424c015bf4aab74eae77",class:"dda-range-slider-track",style:{left:this.getPercentage(this.min_value)+"%",right:100-this.getPercentage(this.max_value)+"%"}},d("span",{key:"0d1038171b37eebb70862e3dec81773a069f8d39",class:"min-label"},this.min_value,"%"),d("span",{key:"ee925f1eb9de817c30fb1b24669e05088d2735c8",class:"max-label"},this.max_value,"%")),d("span",{key:"29d65987c630c9d67453ad3f3566a3ecdf55357b"},d("input",{key:"4a6db59b2ef1ca6cfde2acc1ab52046afb2d786f",id:a,name:this.left_input_name,"aria-label":this.left_aria_label||"Minimum",type:"range",min:this.min,max:this.max,step:this.step,value:this.min_value,onInput:a=>this.handleMinChange(a),class:"dda-range-slider-input",style:{zIndex:""+(this.min_value>this.max-this.min_value?5:3)}})),d("span",{key:"02fb3162cb1566304e1d25794d61bd760b02bd3c"},d("input",{key:"46022edc3c2b069ba5f240ea0e7945326cf7459c",id:t,name:this.right_input_name,"aria-label":this.right_aria_label||"Maximum",type:"range",min:this.min,max:this.max,step:this.step,value:this.max_value,onInput:a=>this.handleMaxChange(a),class:"dda-range-slider-input",style:{zIndex:""+(this.max_value<this.max-this.min_value?5:3)}})))))}static get style(){return'.dda-range-slider-container{width:100%;margin:20px 0;position:relative}.dda-range-slider{position:relative;width:100%;height:6px;background:var(--dda-neutral-variant-92);border-radius:5px}.dda-range-slider-input{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:24px;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;border:0;margin:0;padding:0}.dda-range-slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--dda-neutral-100);border:solid 2px var(--dda-neutral-90);cursor:pointer;pointer-events:all}.dda-range-slider-input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--dda-color-primary-40);cursor:pointer;pointer-events:all;-moz-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.dda-range-slider-track{position:absolute;height:100%;background:var(--dda-color-primary-40);border-radius:5px}.light-mode .dda-range-slider-track{background:var(--dda-primary-40)}.dda-range-slider-track span{background:var(--dda-surface-100);width:55px;height:35px;font-size:16px;color:var(--dda-on-surface-variant-30);font-weight:var(--dda-fw-500);text-align:center;position:absolute;top:13px;display:flex;align-items:center;justify-content:center}.light-mode .dda-range-slider-track span{color:var(--dda-neutral-variant-30)}.dda-tooltip-top .dda-range-slider-track span{top:auto;bottom:24px}.dda-tooltip-bottom .dda-range-slider-track span{top:24px}.dda-range-slider-track .min-label{left:-17px}.dda-range-slider-track .max-label{right:-33px}.dda-tooltip-top .dda-range-slider-track span,.dda-tooltip-bottom .dda-range-slider-track span{border:solid 1px var(--dda-neutral-90);border-radius:4px;-webkit-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04);-moz-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04);box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04)}.dda-tooltip-top .dda-range-slider-track span::before,.dda-tooltip-top .dda-range-slider-track span::after,.dda-tooltip-bottom .dda-range-slider-track span::before,.dda-tooltip-bottom .dda-range-slider-track span::after{content:"";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;left:50%;margin-inline-start:-10px}.dda-tooltip-top .dda-range-slider-track span::before{top:100%;border-top:8px solid var(--dda-neutral-90);margin-top:0px}.dda-tooltip-top .dda-range-slider-track span::after{top:100%;border-top:8px solid var(--dda-neutral-100);margin-top:-2px;z-index:1}.dda-tooltip-bottom .dda-range-slider-track span::before{bottom:100%;border-bottom:8px solid var(--dda-neutral-90);margin-bottom:0px}.dda-tooltip-bottom .dda-range-slider-track span::after{bottom:100%;border-bottom:8px solid var(--dda-neutral-100);margin-bottom:-2px;z-index:1}'}},[0,"dda-range-slider",{min:[2],max:[2],step:[2],initial_min:[2],initial_max:[2],size:[1],tooltip_position:[1],custom_class:[1],component_mode:[1],left_input_id:[1],right_input_id:[1],left_aria_label:[1],right_aria_label:[1],left_input_name:[1],right_input_name:[1],min_value:[32],max_value:[32]}]);function s(){"undefined"!=typeof customElements&&["dda-range-slider"].forEach((t=>{"dda-range-slider"===t&&(customElements.get(a(t))||customElements.define(a(t),n))}))}s();const o=n,p=s;export{o as DdaRangeSlider,p as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './index2.js';
+import { u as uniqueId } from './unique-id.js';
+
+const ddaRangeSliderCss = () => `.dda-range-slider-container{width:100%;margin:20px 0;position:relative}.dda-range-slider{position:relative;width:100%;height:6px;background:var(--dda-neutral-variant-92);border-radius:5px}.dda-range-slider-input{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:24px;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;border:0;margin:0;padding:0}.dda-range-slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--dda-neutral-100);border:solid 2px var(--dda-neutral-90);cursor:pointer;pointer-events:all}.dda-range-slider-input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--dda-color-primary-40);cursor:pointer;pointer-events:all;-moz-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.dda-range-slider-track{position:absolute;height:100%;background:var(--dda-color-primary-40);border-radius:5px}.light-mode .dda-range-slider-track{background:var(--dda-primary-40)}.dda-range-slider-track span{background:var(--dda-surface-100);width:55px;height:35px;font-size:16px;color:var(--dda-on-surface-variant-30);font-weight:var(--dda-fw-500);text-align:center;position:absolute;top:13px;display:flex;align-items:center;justify-content:center}.light-mode .dda-range-slider-track span{color:var(--dda-neutral-variant-30)}.dda-tooltip-top .dda-range-slider-track span{top:auto;bottom:24px}.dda-tooltip-bottom .dda-range-slider-track span{top:24px}.dda-range-slider-track .min-label{left:-17px}.dda-range-slider-track .max-label{right:-33px}.dda-tooltip-top .dda-range-slider-track span,.dda-tooltip-bottom .dda-range-slider-track span{border:solid 1px var(--dda-neutral-90);border-radius:4px;-webkit-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04);-moz-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04);box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.04)}.dda-tooltip-top .dda-range-slider-track span::before,.dda-tooltip-top .dda-range-slider-track span::after,.dda-tooltip-bottom .dda-range-slider-track span::before,.dda-tooltip-bottom .dda-range-slider-track span::after{content:"";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;left:50%;margin-inline-start:-10px}.dda-tooltip-top .dda-range-slider-track span::before{top:100%;border-top:8px solid var(--dda-neutral-90);margin-top:0px}.dda-tooltip-top .dda-range-slider-track span::after{top:100%;border-top:8px solid var(--dda-neutral-100);margin-top:-2px;z-index:1}.dda-tooltip-bottom .dda-range-slider-track span::before{bottom:100%;border-bottom:8px solid var(--dda-neutral-90);margin-bottom:0px}.dda-tooltip-bottom .dda-range-slider-track span::after{bottom:100%;border-bottom:8px solid var(--dda-neutral-100);margin-bottom:-2px;z-index:1}`;
+
+const DdaRangeSlider$1 = /*@__PURE__*/ proxyCustomElement(class DdaRangeSlider extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Lowest value of the range. */
+        this.min = 0;
+        /** Highest value of the range. */
+        this.max = 100;
+        /** Step between selectable values. */
+        this.step = 1;
+        /** Start value of the lower (left) handle. Read only when the component loads. */
+        this.initial_min = 0;
+        /** Start value of the upper (right) handle. Read only when the component loads. */
+        this.initial_max = 100;
+        /** Extra CSS classes added to the slider container. */
+        this.custom_class = '';
+        // Fallback id base so each wrapping label points at a real input when no
+        // left_input_id/right_input_id is passed (WAVE "Orphaned form label").
+        this.fallbackId = uniqueId('dda-range-slider');
+    }
+    componentWillLoad() {
+        this.min_value = this.initial_min;
+        this.max_value = this.initial_max;
+    }
+    handleMinChange(event) {
+        const value = Number(event.target.value);
+        if (value <= this.max_value - this.step) {
+            this.min_value = value;
+        }
+    }
+    handleMaxChange(event) {
+        const value = Number(event.target.value);
+        if (value >= this.min_value + this.step) {
+            this.max_value = value;
+        }
+    }
+    getPercentage(value) {
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    render() {
+        const leftId = this.left_input_id || `${this.fallbackId}-min`;
+        const rightId = this.right_input_id || `${this.fallbackId}-max`;
+        return (h(Host, { key: '3a72a25212a511d65f982a0606cd8cd0e6cd1d66' }, h("div", { key: '8eb7a5199e81bc5bf437d5dfe61e4eec7b732753', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '6b303ab598aff66a693b645d350fea4eaa470bac', class: "dda-range-slider" }, h("div", { key: '3904d63ade7e2251d9ea424c015bf4aab74eae77', class: "dda-range-slider-track", style: {
+                left: `${this.getPercentage(this.min_value)}%`,
+                right: `${100 - this.getPercentage(this.max_value)}%`,
+            } }, h("span", { key: '0d1038171b37eebb70862e3dec81773a069f8d39', class: "min-label" }, this.min_value, "%"), h("span", { key: 'ee925f1eb9de817c30fb1b24669e05088d2735c8', class: "max-label" }, this.max_value, "%")), h("span", { key: '29d65987c630c9d67453ad3f3566a3ecdf55357b' }, h("input", { key: '4a6db59b2ef1ca6cfde2acc1ab52046afb2d786f', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '02fb3162cb1566304e1d25794d61bd760b02bd3c' }, h("input", { key: '46022edc3c2b069ba5f240ea0e7945326cf7459c', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+    }
+    static get style() { return ddaRangeSliderCss(); }
+}, [0, "dda-range-slider", {
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "initial_min": [2],
+        "initial_max": [2],
+        "size": [1],
+        "tooltip_position": [1],
+        "custom_class": [1],
+        "component_mode": [1],
+        "left_input_id": [1],
+        "right_input_id": [1],
+        "left_aria_label": [1],
+        "right_aria_label": [1],
+        "left_input_name": [1],
+        "right_input_name": [1],
+        "min_value": [32],
+        "max_value": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dda-range-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dda-range-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DdaRangeSlider$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1(DdaRangeSlider$1);
+
+const DdaRangeSlider = DdaRangeSlider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DdaRangeSlider, defineCustomElement };