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

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.
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-aafa56ee.js');
6
+ const randomString = require('./random-string-4c3b7f1c.js');
6
7
  const component = require('./component-67144c1c.js');
7
8
  const component$1 = require('./component-cf490570.js');
8
9
  const ponyfill = require('./ponyfill-98ca4766.js');
@@ -1446,6 +1447,8 @@ const Slider = class {
1446
1447
  this.percentageClass = undefined;
1447
1448
  this.inputHandler = this.inputHandler.bind(this);
1448
1449
  this.getContainerClassList = this.getContainerClassList.bind(this);
1450
+ this.labelId = randomString.createRandomString();
1451
+ this.helperTextId = randomString.createRandomString();
1449
1452
  }
1450
1453
  connectedCallback() {
1451
1454
  this.initialize();
@@ -1516,17 +1519,17 @@ const Slider = class {
1516
1519
  if (this.disabled || this.readonly) {
1517
1520
  inputProps.disabled = true;
1518
1521
  }
1519
- return (index.h(index.Host, { class: this.getContainerClassList() }, index.h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), index.h("div", { class: "slider__content-range-container" }, index.h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), index.h("div", { class: {
1522
+ return (index.h(index.Host, { class: this.getContainerClassList() }, index.h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above", id: this.labelId }, this.label), index.h("div", { class: "slider__content-range-container" }, index.h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), index.h("div", { class: {
1520
1523
  'mdc-slider': true,
1521
1524
  'mdc-slider--discrete': true,
1522
1525
  'mdc-slider--disabled': this.disabled || this.readonly,
1523
- } }, index.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)), index.h("div", { class: "mdc-slider__track" }, index.h("div", { class: "mdc-slider__track--inactive" }), index.h("div", { class: "mdc-slider__track--active" }, index.h("div", { class: "mdc-slider__track--active_fill" }))), index.h("div", { class: "mdc-slider__thumb" }, index.h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, index.h("div", { class: "mdc-slider__value-indicator" }, index.h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), index.h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
1526
+ } }, index.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)), index.h("div", { class: "mdc-slider__track" }, index.h("div", { class: "mdc-slider__track--inactive" }), index.h("div", { class: "mdc-slider__track--active" }, index.h("div", { class: "mdc-slider__track--active_fill" }))), index.h("div", { class: "mdc-slider__thumb" }, index.h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, index.h("div", { class: "mdc-slider__value-indicator" }, index.h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), index.h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
1524
1527
  }
1525
1528
  renderHelperLine() {
1526
1529
  if (!this.helperText) {
1527
1530
  return;
1528
1531
  }
1529
- return index.h("limel-helper-line", { helperText: this.helperText });
1532
+ return (index.h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
1530
1533
  }
1531
1534
  watchDisabled() {
1532
1535
  this.updateDisabledState();