@limetech/lime-elements 36.0.0 → 36.1.0-dev.1

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,5 @@
 import { MDCSlider } from '@material/slider';
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { getPercentageClass } from './getPercentageClass';
 /**
  * @exampleComponent limel-example-slider
@@ -9,38 +9,6 @@ import { getPercentageClass } from './getPercentageClass';
  */
 export class Slider {
   constructor() {
-    /**
-     * Disables the slider when `true`,
-     * and visually shows that the field is editable but disabled.
-     * This tells the users that if certain requirements are met,
-     * the slider may become interactable.
-     */
-    this.disabled = false;
-    /**
-     * Disables the slider when `true`. This visualizes the slider slightly differently.
-     * But shows no visual sign indicating that the slider field
-     * is disabled or can ever become interactable.
-     */
-    this.readonly = false;
-    /**
-     * Default value: 1.
-     * The factor that the properties `value`, `valuemax`, `valuemin`, and
-     * `step` are multiplied by. On `change` divides the value by the factor,
-     * so the original format stays the same.
-     */
-    this.factor = 1;
-    /**
-     * Unit to display next to the value
-     */
-    this.unit = '';
-    /**
-     * The maximum value allowed
-     */
-    this.valuemax = 100; // eslint-disable-line no-magic-numbers
-    /**
-     * The minimum value allowed
-     */
-    this.valuemin = 0;
     this.changeHandler = (event) => {
       let value = event.detail.value;
       const step = this.multiplyByFactor(this.step);
@@ -49,6 +17,17 @@ export class Slider {
       }
       this.change.emit(value / this.factor);
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.factor = 1;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.unit = '';
+    this.value = undefined;
+    this.valuemax = 100;
+    this.valuemin = 0;
+    this.step = undefined;
+    this.percentageClass = undefined;
     this.inputHandler = this.inputHandler.bind(this);
     this.getContainerClassList = this.getContainerClassList.bind(this);
   }
@@ -121,39 +100,17 @@ export class Slider {
     if (this.disabled || this.readonly) {
       inputProps.disabled = true;
     }
-    return (h("div", { class: this.getContainerClassList() },
-      h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label),
-      h("div", { class: "slider__content" },
-        h("div", { class: "slider__content-range-container" },
-          h("span", { class: "slider__content-min-label" },
-            this.multiplyByFactor(this.valuemin),
-            this.unit),
-          h("span", { class: "slider__content-max-label" },
-            this.multiplyByFactor(this.valuemax),
-            this.unit)),
-        h("div", { class: {
-            'mdc-slider': true,
-            'mdc-slider--discrete': true,
-            'mdc-slider--disabled': this.disabled || this.readonly,
-          } },
-          h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)),
-          h("div", { class: "mdc-slider__track" },
-            h("div", { class: "mdc-slider__track--inactive" }),
-            h("div", { class: "mdc-slider__track--active" },
-              h("div", { class: "mdc-slider__track--active_fill" }))),
-          h("div", { class: "mdc-slider__thumb" },
-            h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" },
-              h("div", { class: "mdc-slider__value-indicator" },
-                h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))),
-            h("div", { class: "mdc-slider__thumb-knob" })))),
-      this.renderHelperLine()));
+    return (h("div", { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), h("div", { class: "slider__content" }, h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
+        'mdc-slider': true,
+        'mdc-slider--discrete': true,
+        'mdc-slider--disabled': this.disabled || this.readonly,
+      } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" })))), this.renderHelperLine()));
   }
   renderHelperLine() {
     if (!this.helperText) {
       return;
     }
-    return (h("div", { class: "mdc-slider-helper-line" },
-      h("p", { class: "mdc-slider-helper-text" }, this.helperText)));
+    return (h("div", { class: "mdc-slider-helper-line" }, h("p", { class: "mdc-slider-helper-text" }, this.helperText)));
   }
   watchDisabled() {
     this.updateDisabledState();
@@ -248,218 +205,230 @@ export class Slider {
   }
   static get is() { return "limel-slider"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["slider.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["slider.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the slider when `true`,\nand visually shows that the field is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe slider may become interactable."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the slider when `true`. This visualizes the slider slightly differently.\nBut shows no visual sign indicating that the slider field\nis disabled or can ever become interactable."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "factor": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Default value: 1.\nThe factor that the properties `value`, `valuemax`, `valuemin`, and\n`step` are multiplied by. On `change` divides the value by the factor,\nso the original format stays the same."
-      },
-      "attribute": "factor",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label to display next to the input"
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional helper text to display below the slider"
-      },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "unit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Unit to display next to the value"
-      },
-      "attribute": "unit",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the slider when `true`,\nand visually shows that the field is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe slider may become interactable."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the input"
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the slider when `true`. This visualizes the slider slightly differently.\nBut shows no visual sign indicating that the slider field\nis disabled or can ever become interactable."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "value",
-      "reflect": true
-    },
-    "valuemax": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "factor": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default value: 1.\nThe factor that the properties `value`, `valuemax`, `valuemin`, and\n`step` are multiplied by. On `change` divides the value by the factor,\nso the original format stays the same."
+        },
+        "attribute": "factor",
+        "reflect": true,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value allowed"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to display next to the input"
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "valuemax",
-      "reflect": true,
-      "defaultValue": "100"
-    },
-    "valuemin": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the slider"
+        },
+        "attribute": "helper-text",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The minimum value allowed"
+      "unit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unit to display next to the value"
+        },
+        "attribute": "unit",
+        "reflect": true,
+        "defaultValue": "''"
       },
-      "attribute": "valuemin",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the input"
+        },
+        "attribute": "value",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The stepping interval to use when adjusting the value"
+      "valuemax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value allowed"
+        },
+        "attribute": "valuemax",
+        "reflect": true,
+        "defaultValue": "100"
       },
-      "attribute": "step",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "percentageClass": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value has been changed"
+      "valuemin": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value allowed"
+        },
+        "attribute": "valuemin",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The stepping interval to use when adjusting the value"
+        },
+        "attribute": "step",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "percentageClass": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has been changed"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "rootElement"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "watchDisabled"
-    }, {
-      "propName": "readonly",
-      "methodName": "watchReadonly"
-    }, {
-      "propName": "value",
-      "methodName": "watchValue"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "readonly",
+        "methodName": "watchReadonly"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
 }