@limetech/lime-elements 37.1.0-next.10 → 37.1.0-next.12

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 } 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    private observer: ResizeObserver;\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        this.observer = new ResizeObserver(this.resizeObserverCallback);\n        this.observer.observe(this.rootElement);\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        this.observer.disconnect();\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 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 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"]}

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,5 +1,5 @@
 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/makeEnterClickable';
 /**
@@ -13,9 +13,20 @@ import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterCli
  *
  * <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);
@@ -24,6 +35,7 @@ export class Switch {
     this.disabled = false;
     this.readonly = false;
     this.value = false;
+    this.helperText = undefined;
     this.fieldId = createRandomString();
   }
   connectedCallback() {
@@ -48,15 +60,12 @@ export class Switch {
     (_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) {
@@ -148,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":"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","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';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/makeEnterClickable';\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 */\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 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            <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/makeEnterClickable';\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"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-menu_2",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
+  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-menu_2",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/limel-slider.entry.js

@@ -1422,6 +1422,10 @@ const Slider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
+    this.resizeObserverCallback = () => {
+      var _a;
+      (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    };
     this.changeHandler = (event) => {
       let value = event.detail.value;
       const step = this.multiplyByFactor(this.step);
@@ -1448,6 +1452,8 @@ const Slider = class {
   }
   connectedCallback() {
     this.initialize();
+    this.observer = new ResizeObserver(this.resizeObserverCallback);
+    this.observer.observe(this.rootElement);
   }
   componentDidLoad() {
     this.initialize();
@@ -1499,6 +1505,7 @@ const Slider = class {
   }
   disconnectedCallback() {
     this.destroyMDCSlider();
+    this.observer.disconnect();
   }
   getContainerClassList() {
     return {