npm - @limetech/lime-elements - Versions diffs - 37.0.0-dev.1 → 37.0.0-next.1 - Mend

@limetech/lime-elements 37.0.0-dev.1 → 37.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

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

@@ -1,6 +1,7 @@
 import { MDCSlider } from '@material/slider';
 import { h, Host, } from '@stencil/core';
 import { getPercentageClass } from './getPercentageClass';
+import { createRandomString } from '../../util/random-string';
 /**
  * @exampleComponent limel-example-slider
  * @exampleComponent limel-example-slider-multiplier
@@ -30,6 +31,8 @@ export class Slider {
     this.percentageClass = undefined;
     this.inputHandler = this.inputHandler.bind(this);
     this.getContainerClassList = this.getContainerClassList.bind(this);
+    this.labelId = createRandomString();
+    this.helperTextId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
@@ -100,17 +103,17 @@ export class Slider {
     if (this.disabled || this.readonly) {
       inputProps.disabled = true;
     }
-    return (h(Host, { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
+    return (h(Host, { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above", id: this.labelId }, this.label), h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
         'mdc-slider': true,
         'mdc-slider--discrete': true,
         'mdc-slider--disabled': this.disabled || this.readonly,
-      } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
+      } }, 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 });
+    return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
   }
   watchDisabled() {
     this.updateDisabledState();

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

	@@ -1 +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';\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\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 }\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 class=\"slider__label mdc-floating-label mdc-floating-label--float-above\">\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-label=\"Discrete slider demo\"\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 <limel-helper-line helperText={this.helperText} />;\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"]}
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"]}

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9bd6d7c6.js';
+import { c as createRandomString } from './random-string-2246b81e.js';
 import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
 import { M as MDCRipple, a as applyPassive, b as MDCRippleFoundation } from './component-5b4ac85a.js';
 import { m as matches } from './ponyfill-30263d5e.js';
@@ -1442,6 +1443,8 @@ const Slider = class {
     this.percentageClass = undefined;
     this.inputHandler = this.inputHandler.bind(this);
     this.getContainerClassList = this.getContainerClassList.bind(this);
+    this.labelId = createRandomString();
+    this.helperTextId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
@@ -1512,17 +1515,17 @@ const Slider = class {
     if (this.disabled || this.readonly) {
       inputProps.disabled = true;
     }
-    return (h(Host, { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
+    return (h(Host, { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above", id: this.labelId }, this.label), h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
         'mdc-slider': true,
         'mdc-slider--discrete': true,
         'mdc-slider--disabled': this.disabled || this.readonly,
-      } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
+      } }, 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 });
+    return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
   }
   watchDisabled() {
     this.updateDisabledState();