@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21

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

@@ -2,14 +2,78 @@ import { MDCSlider } from '@material/slider';
 import { h, Host, } from '@stencil/core';
 import { getPercentageClass } from './getPercentageClass';
 import { createRandomString } from '../../util/random-string';
+const DEFAULT_FACTOR = 1;
+const DEFAULT_MAX_VALUE = 100;
+const DEFAULT_MIN_VALUE = 0;
 /**
- * @exampleComponent limel-example-slider
+ * @exampleComponent limel-example-slider-basic
  * @exampleComponent limel-example-slider-multiplier
  * @exampleComponent limel-example-slider-multiplier-percentage-colors
  * @exampleComponent limel-example-slider-composite
  */
 export class Slider {
   constructor() {
+    this.renderHelperLine = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
+    };
+    this.initialize = () => {
+      const inputElement = this.getInputElement();
+      if (!inputElement) {
+        return;
+      }
+      const value = this.getValue();
+      /*
+      For some reason the input element's `value` attribute is removed
+      (probably by Stencil) when the element is first rendered. But if the
+      attribute is missing when MDCSlider is initialized (MDC v11.0.0),
+      MDCSlider crashes.
+      So we add the attribute right before initializing MDCSlider. /Ads
+      */
+      inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
+      /*
+      When creating the `mdcSlider` component, its important that the value set in
+      the input field obeys the range and the step size.
+
+      The MDCSlider will throw an exception unless the value in the input element
+      is dividible by the step value and is in the provided range.
+      If an exception occurs, this component will crash and it will be impossible to change
+      its value.
+      The logic below ensures that the component will render even though the
+      provided value is wrong.
+      This could be considered wrong, but it at least fixes so that it's possible
+      to change the value from the UI.
+      */
+      const greaterThanOrEqualMin = value >= this.valuemin;
+      const lessThanOrEqualMax = value <= this.valuemax;
+      if (!greaterThanOrEqualMin) {
+        const newMin = this.multiplyByFactor(value);
+        inputElement.setAttribute('min', `${newMin}`);
+      }
+      if (!lessThanOrEqualMax) {
+        const newMax = this.multiplyByFactor(value);
+        inputElement.setAttribute('max', `${newMax}`);
+      }
+      if (!this.isMultipleOfStep(value, this.step)) {
+        inputElement.removeAttribute('step');
+      }
+      this.createMDCSlider();
+    };
+    this.reCreateSliderWithStep = () => {
+      const inputElement = this.getInputElement();
+      const step = `${this.multiplyByFactor(this.step)}`;
+      inputElement.setAttribute('step', step);
+      this.destroyMDCSlider();
+      this.createMDCSlider();
+    };
+    this.createMDCSlider = () => {
+      const element = this.getRootElement();
+      this.mdcSlider = new MDCSlider(element);
+      this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
+      this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
+    };
     this.changeHandler = (event) => {
       let value = event.detail.value;
       const step = this.multiplyByFactor(this.step);
@@ -18,82 +82,97 @@ export class Slider {
       }
       this.change.emit(value / this.factor);
     };
+    this.inputHandler = (event) => {
+      this.setPercentageClass(event.detail.value / this.factor);
+    };
+    this.getContainerClassList = () => {
+      return {
+        [this.percentageClass]: true,
+        disabled: this.disabled || this.readonly,
+        readonly: this.readonly,
+      };
+    };
+    this.resizeObserverCallback = () => {
+      var _a;
+      (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    };
+    this.updateDisabledState = () => {
+      var _a;
+      if (!this.mdcSlider) {
+        return;
+      }
+      (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
+    };
+    this.multiplyByFactor = (value) => {
+      return Math.round(value * this.factor);
+    };
+    this.getValue = () => {
+      let value = this.value;
+      if (!isFinite(value)) {
+        value = this.valuemin;
+      }
+      return value;
+    };
+    this.setPercentageClass = (value) => {
+      this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
+    };
+    this.isMultipleOfStep = (value, step) => {
+      if (!step) {
+        return true;
+      }
+      return value % step === 0;
+    };
+    this.roundToStep = (value, step) => {
+      return Math.round(value / step) * step;
+    };
+    this.getRootElement = () => {
+      return this.rootElement.shadowRoot.querySelector('.mdc-slider');
+    };
+    this.getInputElement = () => {
+      const element = this.getRootElement();
+      if (!element) {
+        return;
+      }
+      return element.querySelector('input');
+    };
+    this.isStepConfigured = () => {
+      if (!this.step) {
+        return true;
+      }
+      const input = this.getInputElement();
+      if (!input) {
+        return true;
+      }
+      return input.hasAttribute('step');
+    };
     this.disabled = false;
     this.readonly = false;
-    this.factor = 1;
+    this.factor = DEFAULT_FACTOR;
     this.label = undefined;
     this.helperText = undefined;
     this.unit = '';
     this.value = undefined;
-    this.valuemax = 100;
-    this.valuemin = 0;
+    this.valuemax = DEFAULT_MAX_VALUE;
+    this.valuemin = DEFAULT_MIN_VALUE;
     this.step = undefined;
     this.percentageClass = undefined;
-    this.inputHandler = this.inputHandler.bind(this);
-    this.getContainerClassList = this.getContainerClassList.bind(this);
     this.labelId = createRandomString();
     this.helperTextId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
-  }
-  componentDidLoad() {
-    this.initialize();
-  }
-  initialize() {
-    const inputElement = this.getInputElement();
-    if (!inputElement) {
-      return;
-    }
-    const value = this.getValue();
-    /*
-    For some reason the input element's `value` attribute is removed
-    (probably by Stencil) when the element is first rendered. But if the
-    attribute is missing when MDCSlider is initialized (MDC v11.0.0),
-    MDCSlider crashes.
-    So we add the attribute right before initializing MDCSlider. /Ads
-    */
-    inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
-    /*
-    When creating the `mdcSlider` component, its important that the value set in
-    the input field obeys the range and the step size.
-
-    The MDCSlider will throw an exception unless the value in the input element
-    is dividible by the step value and is in the provided range.
-    If an exception occurs, this component will crash and it will be impossible to change
-    its value.
-    The logic below ensures that the component will render even though the
-    provided value is wrong.
-    This could be considered wrong, but it at least fixes so that it's possible
-    to change the value from the UI.
-    */
-    const greaterThanOrEqualMin = value >= this.valuemin;
-    const lessThanOrEqualMax = value <= this.valuemax;
-    if (!greaterThanOrEqualMin) {
-      const newMin = this.multiplyByFactor(value);
-      inputElement.setAttribute('min', `${newMin}`);
-    }
-    if (!lessThanOrEqualMax) {
-      const newMax = this.multiplyByFactor(value);
-      inputElement.setAttribute('max', `${newMax}`);
-    }
-    if (!this.isMultipleOfStep(value, this.step)) {
-      inputElement.removeAttribute('step');
-    }
-    this.createMDCSlider();
+    this.observer = new ResizeObserver(this.resizeObserverCallback);
+    this.observer.observe(this.rootElement);
   }
   componentWillLoad() {
     this.setPercentageClass(this.value);
   }
+  componentDidLoad() {
+    this.initialize();
+  }
   disconnectedCallback() {
     this.destroyMDCSlider();
-  }
-  getContainerClassList() {
-    return {
-      [this.percentageClass]: true,
-      disabled: this.disabled || this.readonly,
-      readonly: this.readonly,
-    };
+    this.observer.disconnect();
   }
   render() {
     const inputProps = {};
@@ -109,12 +188,6 @@ export class Slider {
         '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-labelledby": this.labelId, "aria-controls": this.helperTextId }, 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("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
-  }
   watchDisabled() {
     this.updateDisabledState();
   }
@@ -136,70 +209,6 @@ export class Slider {
     }
     this.reCreateSliderWithStep();
   }
-  updateDisabledState() {
-    if (!this.mdcSlider) {
-      return;
-    }
-    this.mdcSlider.setDisabled(this.disabled || this.readonly);
-  }
-  multiplyByFactor(value) {
-    return Math.round(value * this.factor);
-  }
-  getValue() {
-    let value = this.value;
-    if (!isFinite(value)) {
-      value = this.valuemin;
-    }
-    return value;
-  }
-  inputHandler(event) {
-    this.setPercentageClass(event.detail.value / this.factor);
-  }
-  setPercentageClass(value) {
-    this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
-  }
-  isMultipleOfStep(value, step) {
-    if (!step) {
-      return true;
-    }
-    return value % step === 0;
-  }
-  roundToStep(value, step) {
-    return Math.round(value / step) * step;
-  }
-  getRootElement() {
-    return this.rootElement.shadowRoot.querySelector('.mdc-slider');
-  }
-  getInputElement() {
-    const element = this.getRootElement();
-    if (!element) {
-      return;
-    }
-    return element.querySelector('input');
-  }
-  isStepConfigured() {
-    if (!this.step) {
-      return true;
-    }
-    const input = this.getInputElement();
-    if (!input) {
-      return true;
-    }
-    return input.hasAttribute('step');
-  }
-  reCreateSliderWithStep() {
-    const inputElement = this.getInputElement();
-    const step = `${this.multiplyByFactor(this.step)}`;
-    inputElement.setAttribute('step', step);
-    this.destroyMDCSlider();
-    this.createMDCSlider();
-  }
-  createMDCSlider() {
-    const element = this.getRootElement();
-    this.mdcSlider = new MDCSlider(element);
-    this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
-    this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
-  }
   destroyMDCSlider() {
     this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
     this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
@@ -272,7 +281,7 @@ export class Slider {
         },
         "attribute": "factor",
         "reflect": true,
-        "defaultValue": "1"
+        "defaultValue": "DEFAULT_FACTOR"
       },
       "label": {
         "type": "string",
@@ -359,7 +368,7 @@ export class Slider {
         },
         "attribute": "valuemax",
         "reflect": true,
-        "defaultValue": "100"
+        "defaultValue": "DEFAULT_MAX_VALUE"
       },
       "valuemin": {
         "type": "number",
@@ -377,7 +386,7 @@ export class Slider {
         },
         "attribute": "valuemin",
         "reflect": true,
-        "defaultValue": "0"
+        "defaultValue": "DEFAULT_MIN_VALUE"
       },
       "step": {
         "type": "number",

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

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSlider } from '@material/slider';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-slider\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n */\n@Component({\n    tag: 'limel-slider',\n    shadow: true,\n    styleUrl: 'slider.scss',\n})\nexport class Slider {\n    /**\n     * Disables the slider when `true`,\n     * and visually shows that the field is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the slider may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the slider when `true`. This visualizes the slider slightly differently.\n     * But shows no visual sign indicating that the slider field\n     * is disabled or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Default value: 1.\n     * The factor that the properties `value`, `valuemax`, `valuemin`, and\n     * `step` are multiplied by. On `change` divides the value by the factor,\n     * so the original format stays the same.\n     */\n    @Prop({ reflect: true })\n    public factor: number = 1;\n\n    /**\n     * Label to display next to the input\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the slider\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Unit to display next to the value\n     */\n    @Prop({ reflect: true })\n    public unit: string = '';\n\n    /**\n     * The value of the input\n     */\n    @Prop({ reflect: true })\n    public value: number;\n\n    /**\n     * The maximum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemax: number = 100; // eslint-disable-line no-magic-numbers\n\n    /**\n     * The minimum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemin: number = 0;\n\n    /**\n     * The stepping interval to use when adjusting the value\n     */\n    @Prop({ reflect: true })\n    public step: number;\n\n    /**\n     * Emitted when the value has been changed\n     */\n    @Event()\n    private change: EventEmitter<number>;\n\n    @Element()\n    private rootElement: HTMLLimelSliderElement;\n\n    private mdcSlider: MDCSlider;\n    private labelId: string;\n    private helperTextId: string;\n\n    @State()\n    private percentageClass: string;\n\n    public constructor() {\n        this.inputHandler = this.inputHandler.bind(this);\n        this.getContainerClassList = this.getContainerClassList.bind(this);\n        this.labelId = createRandomString();\n        this.helperTextId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const inputElement = this.getInputElement();\n        if (!inputElement) {\n            return;\n        }\n\n        const value = this.getValue();\n\n        /*\n        For some reason the input element's `value` attribute is removed\n        (probably by Stencil) when the element is first rendered. But if the\n        attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n        MDCSlider crashes.\n        So we add the attribute right before initializing MDCSlider. /Ads\n        */\n        inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n        /*\n        When creating the `mdcSlider` component, its important that the value set in\n        the input field obeys the range and the step size.\n\n        The MDCSlider will throw an exception unless the value in the input element\n        is dividible by the step value and is in the provided range.\n        If an exception occurs, this component will crash and it will be impossible to change\n        its value.\n        The logic below ensures that the component will render even though the\n        provided value is wrong.\n        This could be considered wrong, but it at least fixes so that it's possible\n        to change the value from the UI.\n        */\n        const greaterThanOrEqualMin = value >= this.valuemin;\n        const lessThanOrEqualMax = value <= this.valuemax;\n\n        if (!greaterThanOrEqualMin) {\n            const newMin = this.multiplyByFactor(value);\n            inputElement.setAttribute('min', `${newMin}`);\n        }\n\n        if (!lessThanOrEqualMax) {\n            const newMax = this.multiplyByFactor(value);\n            inputElement.setAttribute('max', `${newMax}`);\n        }\n\n        if (!this.isMultipleOfStep(value, this.step)) {\n            inputElement.removeAttribute('step');\n        }\n\n        this.createMDCSlider();\n    }\n\n    public componentWillLoad() {\n        this.setPercentageClass(this.value);\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCSlider();\n    }\n\n    private getContainerClassList() {\n        return {\n            [this.percentageClass]: true,\n            disabled: this.disabled || this.readonly,\n            readonly: this.readonly,\n        };\n    }\n\n    public render() {\n        const inputProps: any = {};\n        if (this.step) {\n            inputProps.step = this.multiplyByFactor(this.step);\n        }\n\n        if (this.disabled || this.readonly) {\n            inputProps.disabled = true;\n        }\n\n        return (\n            <Host class={this.getContainerClassList()}>\n                <label\n                    class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n                    id={this.labelId}\n                >\n                    {this.label}\n                </label>\n                <div class=\"slider__content-range-container\">\n                    <span class=\"slider__content-min-label\">\n                        {this.multiplyByFactor(this.valuemin)}\n                        {this.unit}\n                    </span>\n                    <span class=\"slider__content-max-label\">\n                        {this.multiplyByFactor(this.valuemax)}\n                        {this.unit}\n                    </span>\n                </div>\n                <div\n                    class={{\n                        'mdc-slider': true,\n                        'mdc-slider--discrete': true,\n                        'mdc-slider--disabled': this.disabled || this.readonly,\n                    }}\n                >\n                    <input\n                        class=\"mdc-slider__input\"\n                        type=\"range\"\n                        min={this.multiplyByFactor(this.valuemin)}\n                        max={this.multiplyByFactor(this.valuemax)}\n                        value={this.multiplyByFactor(this.value)}\n                        name=\"volume\"\n                        aria-labelledby={this.labelId}\n                        aria-controls={this.helperTextId}\n                        {...inputProps}\n                    />\n                    <div class=\"mdc-slider__track\">\n                        <div class=\"mdc-slider__track--inactive\"></div>\n                        <div class=\"mdc-slider__track--active\">\n                            <div class=\"mdc-slider__track--active_fill\"></div>\n                        </div>\n                    </div>\n                    <div class=\"mdc-slider__thumb\">\n                        <div\n                            class=\"mdc-slider__value-indicator-container\"\n                            aria-hidden=\"true\"\n                        >\n                            <div class=\"mdc-slider__value-indicator\">\n                                <span class=\"mdc-slider__value-indicator-text\">\n                                    {this.multiplyByFactor(this.value)}\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"mdc-slider__thumb-knob\"></div>\n                    </div>\n                </div>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderHelperLine() {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n            />\n        );\n    }\n\n    @Watch('disabled')\n    protected watchDisabled() {\n        this.updateDisabledState();\n    }\n\n    @Watch('readonly')\n    protected watchReadonly() {\n        this.updateDisabledState();\n    }\n\n    @Watch('value')\n    protected watchValue() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        const value = this.multiplyByFactor(this.getValue());\n        this.mdcSlider.setValue(value);\n\n        if (this.isStepConfigured()) {\n            return;\n        }\n\n        const step = this.multiplyByFactor(this.step);\n        if (!this.isMultipleOfStep(value, step)) {\n            return;\n        }\n\n        this.reCreateSliderWithStep();\n    }\n\n    private updateDisabledState() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        this.mdcSlider.setDisabled(this.disabled || this.readonly);\n    }\n\n    private changeHandler = (event) => {\n        let value = event.detail.value;\n        const step = this.multiplyByFactor(this.step);\n\n        if (!this.isMultipleOfStep(value, step)) {\n            value = this.roundToStep(value, step);\n        }\n\n        this.change.emit(value / this.factor);\n    };\n\n    private multiplyByFactor(value) {\n        return Math.round(value * this.factor);\n    }\n\n    private getValue() {\n        let value = this.value;\n        if (!isFinite(value)) {\n            value = this.valuemin;\n        }\n\n        return value;\n    }\n\n    private inputHandler(event) {\n        this.setPercentageClass(event.detail.value / this.factor);\n    }\n\n    private setPercentageClass(value) {\n        this.percentageClass = getPercentageClass(\n            (value - this.valuemin) / (this.valuemax - this.valuemin)\n        );\n    }\n\n    private isMultipleOfStep(value: number, step: number): boolean {\n        if (!step) {\n            return true;\n        }\n\n        return value % step === 0;\n    }\n\n    private roundToStep(value: number, step: number): number {\n        return Math.round(value / step) * step;\n    }\n\n    private getRootElement(): HTMLElement | undefined {\n        return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n    }\n\n    private getInputElement(): HTMLInputElement | undefined {\n        const element = this.getRootElement();\n        if (!element) {\n            return;\n        }\n\n        return element.querySelector('input');\n    }\n\n    private isStepConfigured(): boolean {\n        if (!this.step) {\n            return true;\n        }\n\n        const input = this.getInputElement();\n        if (!input) {\n            return true;\n        }\n\n        return input.hasAttribute('step');\n    }\n\n    private reCreateSliderWithStep() {\n        const inputElement = this.getInputElement();\n        const step = `${this.multiplyByFactor(this.step)}`;\n\n        inputElement.setAttribute('step', step);\n\n        this.destroyMDCSlider();\n        this.createMDCSlider();\n    }\n\n    private createMDCSlider() {\n        const element = this.getRootElement();\n\n        this.mdcSlider = new MDCSlider(element);\n        this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n    }\n\n    private destroyMDCSlider() {\n        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n        this.mdcSlider.destroy();\n        this.mdcSlider = undefined;\n    }\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSlider, MDCSliderChangeEventDetail } from '@material/slider';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_FACTOR = 1;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_MIN_VALUE = 0;\n\n/**\n * @exampleComponent limel-example-slider-basic\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n */\n@Component({\n    tag: 'limel-slider',\n    shadow: true,\n    styleUrl: 'slider.scss',\n})\nexport class Slider {\n    /**\n     * Disables the slider when `true`,\n     * and visually shows that the field is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the slider may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the slider when `true`. This visualizes the slider slightly differently.\n     * But shows no visual sign indicating that the slider field\n     * is disabled or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Default value: 1.\n     * The factor that the properties `value`, `valuemax`, `valuemin`, and\n     * `step` are multiplied by. On `change` divides the value by the factor,\n     * so the original format stays the same.\n     */\n    @Prop({ reflect: true })\n    public factor: number = DEFAULT_FACTOR;\n\n    /**\n     * Label to display next to the input\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the slider\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Unit to display next to the value\n     */\n    @Prop({ reflect: true })\n    public unit: string = '';\n\n    /**\n     * The value of the input\n     */\n    @Prop({ reflect: true })\n    public value: number;\n\n    /**\n     * The maximum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemax: number = DEFAULT_MAX_VALUE;\n\n    /**\n     * The minimum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemin: number = DEFAULT_MIN_VALUE;\n\n    /**\n     * The stepping interval to use when adjusting the value\n     */\n    @Prop({ reflect: true })\n    public step: number;\n\n    /**\n     * Emitted when the value has been changed\n     */\n    @Event()\n    private change: EventEmitter<number>;\n\n    @Element()\n    private rootElement: HTMLLimelSliderElement;\n\n    @State()\n    private percentageClass: string;\n\n    private mdcSlider: MDCSlider;\n    private labelId: string;\n    private helperTextId: string;\n    private observer: ResizeObserver;\n\n    public constructor() {\n        this.labelId = createRandomString();\n        this.helperTextId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n        this.observer = new ResizeObserver(this.resizeObserverCallback);\n        this.observer.observe(this.rootElement);\n    }\n\n    public componentWillLoad() {\n        this.setPercentageClass(this.value);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCSlider();\n        this.observer.disconnect();\n    }\n\n    public render() {\n        const inputProps: any = {};\n        if (this.step) {\n            inputProps.step = this.multiplyByFactor(this.step);\n        }\n\n        if (this.disabled || this.readonly) {\n            inputProps.disabled = true;\n        }\n\n        return (\n            <Host class={this.getContainerClassList()}>\n                <label\n                    class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n                    id={this.labelId}\n                >\n                    {this.label}\n                </label>\n                <div class=\"slider__content-range-container\">\n                    <span class=\"slider__content-min-label\">\n                        {this.multiplyByFactor(this.valuemin)}\n                        {this.unit}\n                    </span>\n                    <span class=\"slider__content-max-label\">\n                        {this.multiplyByFactor(this.valuemax)}\n                        {this.unit}\n                    </span>\n                </div>\n                <div\n                    class={{\n                        'mdc-slider': true,\n                        'mdc-slider--discrete': true,\n                        'mdc-slider--disabled': this.disabled || this.readonly,\n                    }}\n                >\n                    <input\n                        class=\"mdc-slider__input\"\n                        type=\"range\"\n                        min={this.multiplyByFactor(this.valuemin)}\n                        max={this.multiplyByFactor(this.valuemax)}\n                        value={this.multiplyByFactor(this.value)}\n                        name=\"volume\"\n                        aria-labelledby={this.labelId}\n                        aria-controls={this.helperTextId}\n                        {...inputProps}\n                    />\n                    <div class=\"mdc-slider__track\">\n                        <div class=\"mdc-slider__track--inactive\"></div>\n                        <div class=\"mdc-slider__track--active\">\n                            <div class=\"mdc-slider__track--active_fill\"></div>\n                        </div>\n                    </div>\n                    <div class=\"mdc-slider__thumb\">\n                        <div\n                            class=\"mdc-slider__value-indicator-container\"\n                            aria-hidden=\"true\"\n                        >\n                            <div class=\"mdc-slider__value-indicator\">\n                                <span class=\"mdc-slider__value-indicator-text\">\n                                    {this.multiplyByFactor(this.value)}\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"mdc-slider__thumb-knob\"></div>\n                    </div>\n                </div>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('disabled')\n    protected watchDisabled() {\n        this.updateDisabledState();\n    }\n\n    @Watch('readonly')\n    protected watchReadonly() {\n        this.updateDisabledState();\n    }\n\n    @Watch('value')\n    protected watchValue() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        const value = this.multiplyByFactor(this.getValue());\n        this.mdcSlider.setValue(value);\n\n        if (this.isStepConfigured()) {\n            return;\n        }\n\n        const step = this.multiplyByFactor(this.step);\n        if (!this.isMultipleOfStep(value, step)) {\n            return;\n        }\n\n        this.reCreateSliderWithStep();\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n            />\n        );\n    };\n\n    private initialize = () => {\n        const inputElement = this.getInputElement();\n        if (!inputElement) {\n            return;\n        }\n\n        const value = this.getValue();\n\n        /*\n        For some reason the input element's `value` attribute is removed\n        (probably by Stencil) when the element is first rendered. But if the\n        attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n        MDCSlider crashes.\n        So we add the attribute right before initializing MDCSlider. /Ads\n        */\n        inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n        /*\n        When creating the `mdcSlider` component, its important that the value set in\n        the input field obeys the range and the step size.\n\n        The MDCSlider will throw an exception unless the value in the input element\n        is dividible by the step value and is in the provided range.\n        If an exception occurs, this component will crash and it will be impossible to change\n        its value.\n        The logic below ensures that the component will render even though the\n        provided value is wrong.\n        This could be considered wrong, but it at least fixes so that it's possible\n        to change the value from the UI.\n        */\n        const greaterThanOrEqualMin = value >= this.valuemin;\n        const lessThanOrEqualMax = value <= this.valuemax;\n\n        if (!greaterThanOrEqualMin) {\n            const newMin = this.multiplyByFactor(value);\n            inputElement.setAttribute('min', `${newMin}`);\n        }\n\n        if (!lessThanOrEqualMax) {\n            const newMax = this.multiplyByFactor(value);\n            inputElement.setAttribute('max', `${newMax}`);\n        }\n\n        if (!this.isMultipleOfStep(value, this.step)) {\n            inputElement.removeAttribute('step');\n        }\n\n        this.createMDCSlider();\n    };\n\n    private reCreateSliderWithStep = () => {\n        const inputElement = this.getInputElement();\n        const step = `${this.multiplyByFactor(this.step)}`;\n\n        inputElement.setAttribute('step', step);\n\n        this.destroyMDCSlider();\n        this.createMDCSlider();\n    };\n\n    private createMDCSlider = () => {\n        const element = this.getRootElement();\n\n        this.mdcSlider = new MDCSlider(element);\n        this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n    };\n\n    private destroyMDCSlider() {\n        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n        this.mdcSlider.destroy();\n        this.mdcSlider = undefined;\n    }\n\n    private changeHandler = (\n        event: CustomEvent<MDCSliderChangeEventDetail>\n    ) => {\n        let value = event.detail.value;\n        const step = this.multiplyByFactor(this.step);\n\n        if (!this.isMultipleOfStep(value, step)) {\n            value = this.roundToStep(value, step);\n        }\n\n        this.change.emit(value / this.factor);\n    };\n\n    private inputHandler = (event: CustomEvent<MDCSliderChangeEventDetail>) => {\n        this.setPercentageClass(event.detail.value / this.factor);\n    };\n\n    private getContainerClassList = () => {\n        return {\n            [this.percentageClass]: true,\n            disabled: this.disabled || this.readonly,\n            readonly: this.readonly,\n        };\n    };\n\n    private resizeObserverCallback = () => {\n        this.mdcSlider?.layout();\n    };\n\n    private updateDisabledState = () => {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        this.mdcSlider?.setDisabled(this.disabled || this.readonly);\n    };\n\n    private multiplyByFactor = (value: number) => {\n        return Math.round(value * this.factor);\n    };\n\n    private getValue = () => {\n        let value = this.value;\n        if (!isFinite(value)) {\n            value = this.valuemin;\n        }\n\n        return value;\n    };\n\n    private setPercentageClass = (value: number) => {\n        this.percentageClass = getPercentageClass(\n            (value - this.valuemin) / (this.valuemax - this.valuemin)\n        );\n    };\n\n    private isMultipleOfStep = (value: number, step: number): boolean => {\n        if (!step) {\n            return true;\n        }\n\n        return value % step === 0;\n    };\n\n    private roundToStep = (value: number, step: number): number => {\n        return Math.round(value / step) * step;\n    };\n\n    private getRootElement = (): HTMLElement | undefined => {\n        return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n    };\n\n    private getInputElement = (): HTMLInputElement | undefined => {\n        const element = this.getRootElement();\n        if (!element) {\n            return;\n        }\n\n        return element.querySelector('input');\n    };\n\n    private isStepConfigured = (): boolean => {\n        if (!this.step) {\n            return true;\n        }\n\n        const input = this.getInputElement();\n        if (!input) {\n            return true;\n        }\n\n        return input.hasAttribute('step');\n    };\n}\n"]}

package/dist/collection/components/switch/switch.css

@@ -752,8 +752,10 @@
   }
 }
 :host(limel-switch) {
-  display: inline-flex;
+  isolation: isolate;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
   --mdc-switch-selected-icon-color: transparent;
   --mdc-switch-unselected-icon-color: transparent;
   --mdc-switch-disabled-selected-icon-opacity: 1;
@@ -797,6 +799,10 @@
   --mdc-switch-handle-elevation: var(--button-shadow-normal);
   --mdc-switch-disabled-track-opacity: 0.4;
 }
+:host(limel-switch) limel-helper-line {
+  display: flex;
+  flex-basis: 100%;
+}
 
 .mdc-switch {
   margin-right: 0.5rem;
@@ -858,4 +864,19 @@ label.disabled {
 .mdc-switch.lime-switch--readonly + label.disabled {
   cursor: default;
   opacity: 1;
+}
+
+limel-helper-line {
+  opacity: 0;
+}
+
+@media (pointer: coarse) {
+  limel-helper-line {
+    opacity: 1;
+  }
+}
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
 }

package/dist/collection/components/switch/switch.js

@@ -1,11 +1,32 @@
 import { MDCSwitch } from '@material/switch';
-import { h, } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-clickable';
 /**
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
+ * to control the state of a specific setting or option in an application or website.
+ * The two distinct positions of the Switch are visually indicative of the two states:
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+ *
+ * The Switch component is widely used in user interfaces to enable users to
+ * quickly and intuitively change binary settings.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-switch
+ * @exampleComponent limel-example-switch-helper-text
  */
 export class Switch {
   constructor() {
+    this.helperTextId = createRandomString();
+    this.renderHelperLine = () => {
+      if (!this.hasHelperText()) {
+        return;
+      }
+      return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText }));
+    };
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
+    };
     this.handleClick = (event) => {
       event.stopPropagation();
       this.change.emit(!this.value);
@@ -14,11 +35,15 @@ export class Switch {
     this.disabled = false;
     this.readonly = false;
     this.value = false;
+    this.helperText = undefined;
     this.fieldId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }
@@ -31,18 +56,16 @@ export class Switch {
   }
   disconnectedCallback() {
     var _a;
+    removeEnterClickable(this.host);
     (_a = this.mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return [
-      h("button", { id: this.fieldId, class: {
-          'mdc-switch': true,
-          'lime-switch--readonly': this.readonly,
-          'mdc-switch--unselected': !this.value,
-          'mdc-switch--selected': this.value,
-        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))),
-      h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
-    ];
+    return (h(Host, null, h("button", { id: this.fieldId, class: {
+        'mdc-switch': true,
+        'lime-switch--readonly': this.readonly,
+        'mdc-switch--unselected': !this.value,
+        'mdc-switch--selected': this.value,
+      }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick, "aria-controls": this.helperTextId }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))), h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label), this.renderHelperLine()));
   }
   valueWatcher(newValue) {
     if (!this.mdcSwitch) {
@@ -134,6 +157,23 @@ export class Switch {
         "attribute": "value",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "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 switch"
+        },
+        "attribute": "helper-text",
+        "reflect": true
       }
     };
   }

package/dist/collection/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;GAEG;AAMH,MAAM,OAAO,MAAM;;IA6HP,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;;oBAlHgB,KAAK;oBAQL,KAAK;iBAMR,KAAK;mBAYF,kBAAkB,EAAE;;EAI/B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,aAAa,CACK,CAAC;IACvB,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5C,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAEM,MAAM;IACT,OAAO;MACH,cACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;UACtC,wBAAwB,EAAE,CAAC,IAAI,CAAC,KAAK;UACrC,sBAAsB,EAAE,IAAI,CAAC,KAAK;SACrC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW;QAEzB,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,oBAAoB;YAC3B,WAAK,KAAK,EAAC,oBAAoB;cAC3B,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACvC;YACN,WAAK,KAAK,EAAC,oBAAoB,GAAO;YACtC,WAAK,KAAK,EAAC,mBAAmB;cAC1B,WACI,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,qEAAqE,GAAG,CAC9E;cACN,WACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACJ,CACJ,CACJ,CACD;MACT,aACI,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5D,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACP;KACX,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-switch\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch'\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return [\n            <button\n                id={this.fieldId}\n                class={{\n                    'mdc-switch': true,\n                    'lime-switch--readonly': this.readonly,\n                    'mdc-switch--unselected': !this.value,\n                    'mdc-switch--selected': this.value,\n                }}\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={this.value}\n                disabled={this.disabled || this.readonly}\n                onClick={this.handleClick}\n            >\n                <div class=\"mdc-switch__track\" />\n                <div class=\"mdc-switch__handle-track\">\n                    <div class=\"mdc-switch__handle\">\n                        <div class=\"mdc-switch__shadow\">\n                            <div class=\"mdc-elevation-overlay\"></div>\n                        </div>\n                        <div class=\"mdc-switch__ripple\"></div>\n                        <div class=\"mdc-switch__icons\">\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                            </svg>\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M20 13H4v-2h16v2z\" />\n                            </svg>\n                        </div>\n                    </div>\n                </div>\n            </button>,\n            <label\n                class={`${this.disabled || this.readonly ? 'disabled' : ''}`}\n                htmlFor={this.fieldId}\n            >\n                {this.label}\n            </label>,\n        ];\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch'\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}