import { h } from "@stencil/core";
export class DgaSlider {
    constructor() {
        this.min = 0;
        this.max = 100;
        this.step = 1;
        this.range = true;
        this.showLabel = true;
        this.showHelperText = true;
        // @Prop() rangeValues?: [number,number]=[this.min,this.max];
        this.size = 'small';
    }
    // private minPos: number;
    // private maxPos: number;
    // private railColorStyle: { left: string; width: string };
    calculatePositions() {
        const minPos = ((this.minValue - this.min) / (this.max - this.min)) * 100;
        const maxPos = ((this.maxValue - this.min) / (this.max - this.min)) * 100;
        this.minPos = minPos;
        this.maxPos = maxPos;
        this.railColorStyle = !this.range ? { left: '0%', width: `${minPos}%` } : { left: `${minPos}%`, width: `${maxPos - minPos}%` };
    }
    componentWillLoad() {
        this.minValue = this.initialMin !== undefined ? this.initialMin : this.min;
        this.maxValue = this.initialMax !== undefined ? this.initialMax : this.max;
        this.calculatePositions();
    }
    watchMinValue(newValue) {
        this.minValue = newValue;
        this.calculatePositions();
    }
    watchMaxValue(newValue) {
        this.maxValue = newValue;
        this.calculatePositions();
    }
    watchRangeValue() {
        this.calculatePositions();
    }
    watchInitialMin() {
        this.minValue = this.initialMin !== undefined ? this.initialMin : this.min;
        this.calculatePositions();
    }
    watchInitialMax() {
        this.maxValue = this.initialMax !== undefined ? this.initialMax : this.max;
        this.calculatePositions();
    }
    handleMinChange(e) {
        const target = e.target;
        const newMinVal = this.range ? Math.min(+target.value, this.maxValue - this.step) : Math.min(+target.value);
        this.minValue = newMinVal;
        if (this.onChange) {
            this.onChange({ max: this.maxValue, min: this.minValue });
        }
        this.calculatePositions();
    }
    handleMaxChange(e) {
        const target = e.target;
        const newMaxVal = Math.max(+target.value, this.minValue + this.step);
        this.maxValue = newMaxVal;
        if (this.onChange) {
            this.onChange({ max: this.maxValue, min: this.minValue });
        }
        this.calculatePositions();
    }
    // handleMinChange(e: Event) {
    //   const target = e.target as HTMLInputElement;
    //   const newMinVal = this.range ? Math.min(+target.value, this.maxValue - this.step) : Math.min(+target.value);
    //   this.minValue = newMinVal;
    //   this.onChange({max:this.maxValue,min:this.minValue})
    //   this.calculatePositions();
    // }
    // handleMaxChange(e: Event) {
    //   const target = e.target as HTMLInputElement;
    //   const newMaxVal = Math.max(+target.value, this.minValue + this.step);
    //   this.maxValue = newMaxVal;
    //   this.onChange({max:this.maxValue,min:this.minValue})
    //   this.calculatePositions();
    // }
    render() {
        return (h("div", { key: '76bbd600a1f329b0fb3db98415be0921083ee8b3', class: `range-slider-wrapper ${this.size}` }, h("div", { key: 'ab048d75e176badbddff10fe5583fb82cf2865fb', class: "range-slider-input-wrapper" }, h("input", { key: '3340934cb68b9c5ef7c6b6d162d63d8f41ba0bbd', class: "range-slider-input", type: "range", value: this.minValue, min: this.min, max: this.max, step: this.step, onInput: this.handleMinChange.bind(this) }), this.range && (h("input", { key: '64c9ced614fdf93454525ba52b7ff99a769688b0', class: "range-slider-input", type: "range", value: this.maxValue, min: this.min, max: this.max, step: this.step, onInput: this.handleMaxChange.bind(this) }))), h("div", { key: 'ebada8d2cbbf2ad15821488158febdac85447ee5', class: "range-slider-container" }, this.showLabel && h("h3", { key: '043c6b7c91c05b4f54b89a43815caac5c112163b' }, this.label), h("div", { key: '8b4e3dd6392e981542640d57c4bd246c476fc1f4', class: "range-slider-control-wrapper" }, h("div", { key: 'a27220731d91798c5a971577e2acee51dba86998', class: "range-slider-control", style: { left: `${this.minPos}%` } }), h("div", { key: '686b877376339f2f834c6836ca50ce3afb3a6655', class: "range-slider-rail" }, this.range && h("div", { key: '82200efaa3e31d543e3a719d72080343b29ecfae', class: "range-slider-number_left" }, this.minValue), h("div", { key: '1f1d77cc3b255713007b4671898189f822819660', class: "range-slider-inner-rail", style: this.railColorStyle }), this.range && h("div", { key: '876202341ee849ef5744eb351f2f8e7f37185005', class: "range-slider-number_right" }, this.maxValue), !this.range && h("div", { key: '35acc8e55d5c07e7759bbd610af917dfa2bb852e', class: "range-slider-number_right" }, this.minValue)), this.range && h("div", { key: '42727272d2177c5541b08cce7ea8da495a0296c6', class: "range-slider-control", style: { left: `${this.maxPos}%` } }), this.showHelperText && this.helperText && (h("div", { key: '4606dbf0e90ac5569f5d18989489459d08c5d66e', class: "range-slider-note" }, h("div", { key: 'd8b69f9e10213c18f0fc36f887091eae74653949', class: "range-slider-note-icon" }, h("svg", { key: 'e7a5df83453452289cc0fd3fe6e658314c719679', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '6e03e76ebf1d9b35efdd76f04f1ae7f988b6a4b8', "clip-path": "url(#clip0_17869_405)" }, h("path", { key: '29cdc038520d65c65d46282a26194ee0c46620e0', d: "M6.06004 6.00001C6.21678 5.55446 6.52614 5.17875 6.93334 4.93943C7.34055 4.70012 7.8193 4.61264 8.28483 4.69248C8.75035 4.77233 9.17259 5.01436 9.47676 5.3757C9.78093 5.73703 9.94741 6.19436 9.94671 6.66668C9.94671 8.00001 7.94671 8.66668 7.94671 8.66668M8.00004 11.3333H8.00671M14.6667 8.00001C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00001C1.33337 4.31811 4.31814 1.33334 8.00004 1.33334C11.6819 1.33334 14.6667 4.31811 14.6667 8.00001Z", stroke: "#384250", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: '85433d67d6ca98d3cb96cf016fe4044f5138e128' }, h("clipPath", { key: '1ef44804ae87d956b6a152e3d022286f62731411', id: "clip0_17869_405" }, h("rect", { key: 'e00a97ca7c323405572e52f91aa29df06a3fbb5c', width: "16", height: "16", fill: "white" }))))), h("div", { key: '949291fbd16940d1ac6d1b6234cf386b7e4dd2b9', class: "range-slider-note-content" }, h("p", { key: 'd9224113487fe814ed71d49975c1db0cedef42f9' }, this.helperText))))))));
    }
    static get is() { return "dga-slider"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-slider.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-slider.css"]
        };
    }
    static get properties() {
        return {
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "min",
                "reflect": false,
                "defaultValue": "0"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false,
                "defaultValue": "100"
            },
            "step": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "step",
                "reflect": false,
                "defaultValue": "1"
            },
            "range": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "range",
                "reflect": false,
                "defaultValue": "true"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "showLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-label",
                "reflect": false,
                "defaultValue": "true"
            },
            "showHelperText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-helper-text",
                "reflect": false,
                "defaultValue": "true"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium'",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'small'"
            },
            "initialMin": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "initial-min",
                "reflect": false
            },
            "initialMax": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "initial-max",
                "reflect": false
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(props:{min:number,max:number})=>void",
                    "resolved": "(props: { min: number; max: number; }) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "minValue": {},
            "maxValue": {},
            "minPos": {},
            "maxPos": {},
            "railColorStyle": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "min",
                "methodName": "watchMinValue"
            }, {
                "propName": "max",
                "methodName": "watchMaxValue"
            }, {
                "propName": "range",
                "methodName": "watchRangeValue"
            }, {
                "propName": "initialMin",
                "methodName": "watchInitialMin"
            }, {
                "propName": "initialMax",
                "methodName": "watchInitialMax"
            }];
    }
}
//# sourceMappingURL=dga-slider.js.map
