@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d833923

package/dist/collection/components/six-range/six-range.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import FormControl from '../../functional-components/form-control/form-control';
-import { hasSlot } from '../../utils/slot';
-import { EventListeners } from '../../utils/event-listeners';
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
+import { EventListeners } from "../../utils/event-listeners";
 let id = 0;
 /**
  * @since 1.0
@@ -18,647 +18,593 @@ let id = 0;
  * @part tooltip - The range tooltip.
  */
 export class SixRange {
-  constructor() {
-    this.inputId = `input-${++id}`;
-    this.labelId = `input-label-${id}`;
-    this.helpTextId = `input-help-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.errorTextId = `input-error-text-${id}`;
-    this.eventListeners = new EventListeners();
-    /** default value the slider will be reverted to when reset is executed */
-    this.defaultValue = 0;
-    this.handleInput = () => {
-      if (this.nativeInput != null) {
-        this.update(parseFloat(this.nativeInput.value));
-      }
-      requestAnimationFrame(() => {
-        this.sixChange.emit();
-      });
-    };
-    this.handleBlur = () => {
-      var _a;
-      this.hasFocus = false;
-      this.hasTooltip = false;
-      this.sixBlur.emit();
-      if (this.nativeInput != null) {
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeInput);
-      }
-    };
-    this.handleFocus = () => {
-      var _a;
-      this.hasFocus = true;
-      this.hasTooltip = true;
-      this.sixFocus.emit();
-      if (this.nativeInput != null) {
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.nativeInput);
-      }
-    };
-    this.handleSlotChange = () => {
-      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-      this.hasLabelSlot = hasSlot(this.host, 'label');
-    };
-    this.handleTouchStart = () => {
-      this.setFocus();
-    };
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasTooltip = false;
-    this.name = '';
-    this.value = 0;
-    this.required = false;
-    this.label = '';
-    this.helpText = '';
-    this.errorText = '';
-    this.disabled = false;
-    this.invalid = false;
-    this.min = 0;
-    this.max = 100;
-    this.step = 1;
-    this.tooltip = 'top';
-    this.tooltipFormatter = (value) => value.toString();
-    this.errorOnBlur = false;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleValueChange() {
-    this.update();
-    if (this.nativeInput != null) {
-      this.invalid = !this.nativeInput.checkValidity();
+    constructor() {
+        this.inputId = `input-${++id}`;
+        this.labelId = `input-label-${id}`;
+        this.helpTextId = `input-help-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.handleInput = () => {
+            if (this.nativeInput != null) {
+                this.update(parseFloat(this.nativeInput.value));
+            }
+            requestAnimationFrame(() => {
+                this.sixChange.emit();
+            });
+        };
+        this.handleBlur = () => {
+            var _a;
+            this.hasFocus = false;
+            this.hasTooltip = false;
+            this.sixBlur.emit();
+            if (this.nativeInput != null) {
+                (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeInput);
+            }
+        };
+        this.handleFocus = () => {
+            var _a;
+            this.hasFocus = true;
+            this.hasTooltip = true;
+            this.sixFocus.emit();
+            if (this.nativeInput != null) {
+                (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.nativeInput);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+        };
+        this.handleTouchStart = () => {
+            this.setFocus();
+        };
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasErrorTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasTooltip = false;
+        this.name = '';
+        this.value = 0;
+        this.required = false;
+        this.helpText = '';
+        this.disabled = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.tooltip = 'top';
+        this.tooltipFormatter = (value) => value.toString();
     }
-  }
-  connectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.update();
-    this.defaultValue = this.value;
-    this.handleSlotChange();
-  }
-  componentDidLoad() {
-    const nativeInput = this.nativeInput;
-    if (nativeInput == null) {
-      return;
+    handleLabelChange() {
+        this.handleSlotChange();
     }
-    this.update();
-    this.resizeObserver = new ResizeObserver(() => this.update());
-    this.eventListeners.add(nativeInput, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = nativeInput.validationMessage;
-      }
-      event.preventDefault();
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Sets focus on the input. */
-  async setFocus(options) {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  /** Removes focus from the input. */
-  async removeFocus() {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity(message);
-      this.invalid = !this.nativeInput.checkValidity();
+    handleValueChange() {
+        this.update();
     }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
-  syncTooltip(min, max, value) {
-    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
-      const percent = Math.max(0, (value - min) / (max - min));
-      const inputWidth = this.nativeInput.offsetWidth;
-      const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');
-      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
-      this.output.style.transform = `translateX(${x})`;
-      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
     }
-  }
-  isFirefox() {
-    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
-  update(updateValue) {
-    var _a, _b;
-    if (updateValue != null) {
-      this.value = updateValue;
+    componentWillLoad() {
+        this.update();
+        this.handleSlotChange();
     }
-    const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
-    const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
-    let value;
-    const parsedValue = parseFloat(this.value);
-    if (isNaN(parsedValue)) {
-      value = this.getDefaultValue(min, max);
+    componentDidLoad() {
+        const nativeInput = this.nativeInput;
+        if (nativeInput == null) {
+            return;
+        }
+        this.update();
+        this.resizeObserver = new ResizeObserver(() => this.update());
     }
-    else {
-      value = parsedValue;
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
     }
-    if (this.nativeInput != null) {
-      // The value may have constraints, so we set the native control's
-      // value and sync it back to ensure it adheres to min, max, and step
-      // properly.
-      this.nativeInput.value = value.toString();
-      this.value = parseFloat(this.nativeInput.value);
+    componentDidUpdate() {
+        const { min, max } = this.getMinMax();
+        this.syncTooltip(min, max, this.value);
     }
-    else {
-      this.value = value;
+    getMinMax() {
+        var _a, _b;
+        const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+        return { min, max };
     }
-    this.calculateColorRunnableTrack(min, max, this.value);
-    this.syncTooltip(min, max, this.value);
-  }
-  /**
-   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
-   */
-  getDefaultValue(min, max) {
-    return max < min ? min : min + (max - min) / 2;
-  }
-  /**
-   * For Firefox this functionality is not needed because it is supported by standard CSS.
-   */
-  calculateColorRunnableTrack(min, max, value) {
-    if (!this.isFirefox() && this.nativeInput != null) {
-      const percent = Math.ceil(((value - min) / (max - min)) * 100);
-      this.nativeInput.style.background =
-        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
-          percent +
-          '%, var(--six-color-web-rock-300) ' +
-          percent +
-          '%)';
+    /** Sets focus on the input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
-  }
-  render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
-        range: true,
-        // States
-        'range--disabled': this.disabled,
-        'range--focused': this.hasFocus,
-        'range--tooltip-visible': this.hasTooltip,
-        'range--tooltip-top': this.tooltip === 'top',
-        'range--tooltip-bottom': this.tooltip === 'bottom',
-      }, onTouchStart: this.handleTouchStart }, h("input", { part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
-  }
-  static get is() { return "six-range"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-range.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-range.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's name attribute."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "value": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's value attribute."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the input a required field."
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The range's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The range's help text. Alternatively, you can use the help-text slot."
-        },
-        "attribute": "help-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's error text. Alternatively, you can use the error-text slot."
-        },
-        "attribute": "error-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the input."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\nprovided by the `setCustomValidity` method."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "min": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's min attribute."
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's max attribute."
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "100"
-      },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's step attribute."
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'bottom' | 'none'",
-          "resolved": "\"bottom\" | \"none\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The preferred placedment of the tooltip."
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "'top'"
-      },
-      "tooltipFormatter": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(value: number) => string",
-          "resolved": "(value: number) => string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A function used to format the tooltip's value."
-        },
-        "defaultValue": "(value: number) => value.toString()"
-      },
-      "errorOnBlur": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
-        },
-        "attribute": "error-on-blur",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {},
-      "hasHelpTextSlot": {},
-      "hasLabelSlot": {},
-      "hasErrorTextSlot": {},
-      "hasTooltip": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixChange",
-        "name": "six-range-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control's value changes."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    /** Removes focus from the input. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    syncTooltip(min, max, value) {
+        if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
+            const percent = Math.max(0, (value - min) / (max - min));
+            const inputWidth = this.nativeInput.offsetWidth;
+            const tooltipWidth = this.output.offsetWidth;
+            const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');
+            const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+            this.output.style.transform = `translateX(${x})`;
+            this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
         }
-      }, {
-        "method": "sixBlur",
-        "name": "six-range-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control loses focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    }
+    isFirefox() {
+        return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    }
+    update(updateValue) {
+        var _a, _b;
+        if (updateValue != null) {
+            this.value = updateValue;
         }
-      }, {
-        "method": "sixFocus",
-        "name": "six-range-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control gains focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+        let value;
+        const parsedValue = parseFloat(this.value);
+        if (isNaN(parsedValue)) {
+            value = this.getDefaultValue(min, max);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "FocusOptions": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the input.",
-          "tags": []
+        else {
+            value = parsedValue;
         }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus from the input.",
-          "tags": []
+        if (this.nativeInput != null) {
+            // The value may have constraints, so we set the native control's
+            // value and sync it back to ensure it adheres to min, max, and step
+            // properly.
+            this.nativeInput.value = value.toString();
+            this.value = parseFloat(this.nativeInput.value);
         }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
+        else {
+            this.value = value;
         }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
+        this.calculateColorRunnableTrack(min, max, this.value);
+        this.syncTooltip(min, max, this.value);
+    }
+    /**
+     * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+     */
+    getDefaultValue(min, max) {
+        return max < min ? min : min + (max - min) / 2;
+    }
+    /**
+     * For Firefox this functionality is not needed because it is supported by standard CSS.
+     */
+    calculateColorRunnableTrack(min, max, value) {
+        if (!this.isFirefox() && this.nativeInput != null) {
+            const percent = Math.ceil(((value - min) / (max - min)) * 100);
+            this.nativeInput.style.background =
+                '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
+                    percent +
+                    '%, var(--six-color-web-rock-300) ' +
+                    percent +
+                    '%)';
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "label",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "errorText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "helpText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }, {
-        "propName": "min",
-        "methodName": "handleValueChange"
-      }, {
-        "propName": "max",
-        "methodName": "handleValueChange"
-      }];
-  }
+    }
+    render() {
+        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
+                range: true,
+                // States
+                'range--disabled': this.disabled,
+                'range--focused': this.hasFocus,
+                'range--tooltip-visible': this.hasTooltip,
+                'range--tooltip-top': this.tooltip === 'top',
+                'range--tooltip-bottom': this.tooltip === 'bottom',
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+    }
+    static get is() { return "six-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-range.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-range.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's value attribute."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The range's help text. Alternatively, you can use the help-text slot."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the input."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's min attribute."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's max attribute."
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's step attribute."
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'none'",
+                    "resolved": "\"bottom\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The preferred placedment of the tooltip."
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "tooltipFormatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: number) => string",
+                    "resolved": "(value: number) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A function used to format the tooltip's value."
+                },
+                "defaultValue": "(value: number) => value.toString()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasHelpTextSlot": {},
+            "hasErrorTextSlot": {},
+            "hasLabelSlot": {},
+            "hasTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "six-range-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "six-range-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-range-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the input.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "errorText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "helpText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "min",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "max",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-range.js.map