import { h } from "@stencil/core";
export class IfxSlider {
  constructor() {
    this.min = 0;
    this.max = 100;
    this.value = 0;
    this.disabled = false;
    this.showPercentage = false;
    this.leftIcon = undefined;
    this.rightIcon = undefined;
    this.leftText = undefined;
    this.rightText = undefined;
    this.internalValue = 0;
  }
  valueChanged(newValue) {
    this.internalValue = newValue;
    this.updateValuePercent();
  }
  handleInputChange(event) {
    const target = event.target;
    this.internalValue = parseInt(target.value);
    this.ifxChange.emit(this.internalValue);
    this.updateValuePercent();
  }
  updateValuePercent() {
    if (this.inputRef) {
      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;
      this.inputRef.style.setProperty('--value-percent', `${percent}%`);
    }
  }
  componentWillLoad() {
    this.internalValue = this.value;
  }
  componentDidLoad() {
    this.updateValuePercent();
  }
  render() {
    return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
  }
  static get is() { return "ifx-slider"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["slider.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["slider.css"]
    };
  }
  static get properties() {
    return {
      "min": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "min",
        "reflect": false,
        "defaultValue": "0"
      },
      "max": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "max",
        "reflect": false,
        "defaultValue": "100"
      },
      "value": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false,
        "defaultValue": "0"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "showPercentage": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "show-percentage",
        "reflect": false,
        "defaultValue": "false"
      },
      "leftIcon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "left-icon",
        "reflect": false
      },
      "rightIcon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "right-icon",
        "reflect": false
      },
      "leftText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "left-text",
        "reflect": false
      },
      "rightText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "right-text",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "internalValue": {}
    };
  }
  static get events() {
    return [{
        "method": "ifxChange",
        "name": "ifxChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "value",
        "methodName": "valueChanged"
      }];
  }
}
//# sourceMappingURL=slider.js.map