@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

@@ -1,620 +1,619 @@
-import { Component, Element, Event, Method, Prop, State, Watch, 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
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot label - The input's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
- * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
- *
- * @part base - The component's base wrapper.
- * @part input - The native range input.
- * @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.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.eventListeners = new EventListeners();
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasTooltip = false;
-    /** The input's name attribute. */
-    this.name = '';
-    /** The range's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The range's help text. Alternatively, you can use the help-text slot. */
-    this.helpText = '';
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** Set to true to disable the input. */
-    this.disabled = false;
-    /**
-     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-     * provided by the `setCustomValidity` method.
-     */
-    this.invalid = false;
-    /** The input's min attribute. */
-    this.min = 0;
-    /** The input's max attribute. */
-    this.max = 100;
-    /** The input's step attribute. */
-    this.step = 1;
-    /** The preferred placedment of the tooltip. */
-    this.tooltip = 'top';
-    /** A function used to format the tooltip's value. */
-    this.tooltipFormatter = (value) => value.toString();
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** default value the slider will be reverted to when reset is executed */
-    this.defaultValue = 0;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleValueChange() {
-    if (this.input) {
-      this.input.value = this.value;
-      this.calculateColorRunnableTrack();
-    }
-    // In rare cases, the watcher may be called before render so we need to make sure the input exists
-    this.invalid = this.input ? !this.input.checkValidity() : false;
-  }
-  connectedCallback() {
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    if (this.value === undefined || this.value === null)
-      this.value = this.min;
-    if (this.value < this.min)
-      this.value = this.min;
-    if (this.value > this.max)
-      this.value = this.max;
-    this.defaultValue = this.value;
-    this.handleSlotChange();
-  }
-  componentDidLoad() {
-    this.syncTooltip();
-    this.calculateColorRunnableTrack();
-    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
-      }
-      event.preventDefault();
-    });
-  }
-  disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Sets focus on the input. */
-  async setFocus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the input. */
-  async removeFocus() {
-    this.input.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 !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.input.setCustomValidity('');
-    this.invalid = false;
-  }
-  handleInput() {
-    this.value = Number(this.input.value);
-    this.sixChange.emit();
-    requestAnimationFrame(() => this.syncTooltip());
-    requestAnimationFrame(() => this.calculateColorRunnableTrack());
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.hasTooltip = false;
-    this.sixBlur.emit();
-    this.resizeObserver.unobserve(this.input);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.hasTooltip = true;
-    this.sixFocus.emit();
-    this.resizeObserver.observe(this.input);
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-  }
-  handleTouchStart() {
-    this.setFocus();
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
-  syncTooltip() {
-    if (this.tooltip !== 'none') {
-      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
-      const inputWidth = this.input.offsetWidth;
-      const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.input).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`;
-    }
-  }
-  /**
-   * For Firefox this functionality is not needed because it is supported by standard CSS.
-   */
-  calculateColorRunnableTrack() {
-    if (!this.isFirefox()) {
-      const value = parseInt(this.input.value, 10);
-      const min = parseInt(this.input.min, 10);
-      const max = parseInt(this.input.max, 10);
-      const percent = Math.ceil(((value - min) / (max - min)) * 100);
-      this.input.style.background =
-        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
-          percent +
-          '%, var(--six-color-web-rock-300) ' +
-          percent +
-          '%)';
-    }
-  }
-  isFirefox() {
-    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
-  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 ? 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.input = 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
-    },
-    "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
-    },
-    "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }]; }
-  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": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Removes focus from the input.",
-        "tags": []
-      }
-    },
-    "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": []
-      }
-    },
-    "reset": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "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"
-    }]; }
-}
+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
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part input - The native range input.
+ * @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.errorTextId = `input-error-text-${id}`;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new EventListeners();
+    /** default value the slider will be reverted to when reset is executed */
+    this.defaultValue = 0;
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasLabelSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasTooltip = false;
+    this.name = '';
+    this.value = undefined;
+    this.required = undefined;
+    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() {
+    if (this.input) {
+      this.input.value = this.value;
+      this.calculateColorRunnableTrack();
+    }
+    // In rare cases, the watcher may be called before render so we need to make sure the input exists
+    this.invalid = this.input ? !this.input.checkValidity() : false;
+  }
+  connectedCallback() {
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  componentWillLoad() {
+    if (this.value === undefined || this.value === null)
+      this.value = this.min;
+    if (this.value < this.min)
+      this.value = this.min;
+    if (this.value > this.max)
+      this.value = this.max;
+    this.defaultValue = this.value;
+    this.handleSlotChange();
+  }
+  componentDidLoad() {
+    this.syncTooltip();
+    this.calculateColorRunnableTrack();
+    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
+    this.eventListeners.add(this.input, 'invalid', (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = this.input.validationMessage;
+      }
+      event.preventDefault();
+    });
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Sets focus on the input. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  async removeFocus() {
+    this.input.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 !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleInput() {
+    this.value = Number(this.input.value);
+    this.sixChange.emit();
+    requestAnimationFrame(() => this.syncTooltip());
+    requestAnimationFrame(() => this.calculateColorRunnableTrack());
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasTooltip = false;
+    this.sixBlur.emit();
+    this.resizeObserver.unobserve(this.input);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.hasTooltip = true;
+    this.sixFocus.emit();
+    this.resizeObserver.observe(this.input);
+  }
+  handleSlotChange() {
+    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+  }
+  handleTouchStart() {
+    this.setFocus();
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  syncTooltip() {
+    if (this.tooltip !== 'none') {
+      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
+      const inputWidth = this.input.offsetWidth;
+      const tooltipWidth = this.output.offsetWidth;
+      const thumbSize = getComputedStyle(this.input).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`;
+    }
+  }
+  /**
+   * For Firefox this functionality is not needed because it is supported by standard CSS.
+   */
+  calculateColorRunnableTrack() {
+    if (!this.isFirefox()) {
+      const value = parseInt(this.input.value, 10);
+      const min = parseInt(this.input.min, 10);
+      const max = parseInt(this.input.max, 10);
+      const percent = Math.ceil(((value - min) / (max - min)) * 100);
+      this.input.style.background =
+        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
+          percent +
+          '%, var(--six-color-web-rock-300) ' +
+          percent +
+          '%)';
+    }
+  }
+  isFirefox() {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  }
+  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 ? 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.input = 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
+      },
+      "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
+      },
+      "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }];
+  }
+  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": []
+        }
+      },
+      "removeFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Removes focus from the input.",
+          "tags": []
+        }
+      },
+      "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": []
+        }
+      },
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Resets the formcontrol",
+          "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"
+      }];
+  }
+}
+//# sourceMappingURL=six-range.js.map