bromcom-ui 2.12.0-test.0 → 2.12.0

package/dist/esm/bcm-message.entry.js

@@ -3,8 +3,8 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { c as classnames } from './index-b84bc8c9.js';
-import './_commonjsHelpers-be0d4ec8.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './_commonjsHelpers-7002e5de.js';
 
 /**
  * 'status' prop predefined values

package/dist/esm/bcm-modal-2-footer.entry.js

@@ -3,20 +3,20 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import './color-helper-c0bb1d8a.js';
+import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import './number-helper-0cbe6443.js';
+import './string-helper-b4602002.js';
+import './validators-e7ccc273.js';
+import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
-import { c as classnames } from './index-b84bc8c9.js';
+import { c as classnames } from './index-00c8a8f7.js';
 import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.js';
+import './utils-7727d09e.js';
+import './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
 
 const BcmModal2Footer = class {
   constructor(hostRef) {

package/dist/esm/bcm-modal-2-header.entry.js

@@ -3,19 +3,19 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import './color-helper-c0bb1d8a.js';
+import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import './number-helper-0cbe6443.js';
+import './string-helper-b4602002.js';
+import './validators-e7ccc273.js';
+import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
 import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.js';
+import './utils-7727d09e.js';
+import './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
 
 const BcmModal2Header = class {
   constructor(hostRef) {

package/dist/esm/bcm-modal-2.entry.js

@@ -3,20 +3,20 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import './color-helper-c0bb1d8a.js';
+import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
-import { d as delay } from './utils-57652744.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-import { c as classnames } from './index-b84bc8c9.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import './number-helper-0cbe6443.js';
+import './string-helper-b4602002.js';
+import './validators-e7ccc273.js';
+import './element-dragger-b75266e6.js';
+import { d as delay } from './utils-7727d09e.js';
+import { B as Bcm } from './bcm-a50d55ba.js';
+import { c as classnames } from './index-00c8a8f7.js';
 import './colors-1d7854ea.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.js';
+import './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
 
 const BcmModal2 = class {
   constructor(hostRef) {

package/dist/esm/bcm-notification.entry.js

@@ -3,8 +3,8 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { c as classnames } from './index-b84bc8c9.js';
-import './_commonjsHelpers-be0d4ec8.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './_commonjsHelpers-7002e5de.js';
 
 /**
  * 'type' prop predefined values

package/dist/esm/bcm-number-input.entry.js

@@ -0,0 +1,293 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import './color-helper-ba15b0d8.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import './number-helper-0cbe6443.js';
+import { S as StringHelper } from './string-helper-b4602002.js';
+import './validators-e7ccc273.js';
+import './element-dragger-b75266e6.js';
+import { d as delay } from './utils-7727d09e.js';
+import { B as Bcm } from './bcm-a50d55ba.js';
+import { C as CaptionTemplate } from './caption-template-3cd42c3b.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './types-6f06fa1a.js';
+import './types-9493a7ed.js';
+import { i as inputStyle } from './input.style-e855c0f3.js';
+import './colors-1d7854ea.js';
+import './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
+import './index-3bc8c6e3.js';
+
+const NumberInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focus = createEvent(this, "bcm-focus", 3);
+    this.blur = createEvent(this, "bcm-blur", 3);
+    this.clear = createEvent(this, "bcm-clear", 3);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 3);
+    this.beforeClear = createEvent(this, "bcm-input-before-clear", 3);
+    this._onChange = createEvent(this, "bcm-onchange", 3);
+    this.inValid = false;
+    this.onInput = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", (e) => {
+        this.input.emit(e);
+      });
+    };
+    this.onChange = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
+        this.change.emit(e);
+      });
+    };
+    this.onFocus = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", e => {
+        this.isFocus = true;
+        this.focus.emit(e);
+      });
+    };
+    this.onBlur = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", e => {
+        this.isFocus = false;
+        this.blur.emit(e);
+      });
+    };
+    this.onKeydown = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.up();
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.down();
+        }
+      });
+    };
+    this.listener = () => {
+      this.onInput();
+      this.onChange();
+      this.onFocus();
+      this.onBlur();
+      this.onKeydown();
+    };
+    this._id = Generate.UID();
+    this.value = "";
+    this.defaultValue = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.size = "medium";
+    this.min = undefined;
+    this.max = undefined;
+    this.step = 1;
+    this.label = undefined;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.clearable = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.mode = "none";
+    this.placeholder = undefined;
+    this.thousandSeparator = false;
+    this.decimalSeparator = undefined;
+    this.decimalScale = undefined;
+    this.fixedDecimalScale = false;
+    this.allowNegative = true;
+    this.allowLeadingZeros = false;
+    this.unitPrefix = undefined;
+    this.unitSuffix = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.isFocus = false;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.valueCache = "";
+  }
+  connectedCallback() {
+    if (this.defaultValue)
+      this.value = +this.defaultValue;
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentDidLoad() {
+    this.listener();
+  }
+  up() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value + +this.step;
+    if (this.mode === "strict") {
+      if (this.max && +this.value > +this.max) {
+        this.value = this.max;
+      }
+    }
+  }
+  down() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value - +this.step;
+    if (this.mode === "strict") {
+      if (this.min && +this.value < +this.min) {
+        this.value = this.min;
+      }
+    }
+  }
+  handleClear(e) {
+    if (this.disabled)
+      return;
+    const event = this.beforeClear.emit(e);
+    if (event.defaultPrevented)
+      return;
+    this.value = "";
+    this.clear.emit(e);
+  }
+  checkLength() {
+    const { min, max, value } = this;
+    const minLength = min;
+    const maxLength = max;
+    let valuePoint = value === null || value === void 0 ? void 0 : value.toString();
+    if (min && max) {
+      if (+valuePoint < +min || +valuePoint > +max) {
+        this.setCaption(StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (+valuePoint < +minLength) {
+        this.setCaption(StringHelper.getMessage("minlength", [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (valuePoint > maxLength) {
+        this.setCaption(StringHelper.getMessage("maxlength", [maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+  }
+  watchValue() {
+    this.checkLength();
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.value = value;
+  }
+  async setClear() {
+    this.value = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+    return Promise.resolve();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput.bind(this));
+    (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.onChange.bind(this));
+    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onFocus.bind(this));
+    (_d = this.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener("blur", this.onBlur.bind(this));
+    (_e = this.inputElement) === null || _e === void 0 ? void 0 : _e.removeEventListener("keydown", this.onKeydown.bind(this));
+  }
+  render() {
+    const { _prefix, _suffix, noCaption, captionType, captionError, caption, required, _id, label, size, fullWidth, clearable, value, placeholder, thousandSeparator, decimalSeparator, decimalScale, fixedDecimalScale, allowNegative, allowLeadingZeros, unitPrefix, unitSuffix, min, max, step, defaultValue, disabled, mode, } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.toString().length) > 0 && clearable;
+    const isInvalid = this.captionType == "error" || this.inValid;
+    const { host, inputContainer, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider, input } = inputStyle({
+      size,
+      fullWidth,
+      clearable: isActiveClearable,
+      disabled,
+      invalid: isInvalid,
+    });
+    const numericProps = {
+      placeholder,
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale,
+      fixedDecimalScale,
+      allowNegative,
+      allowLeadingZeros,
+      prefix: unitPrefix,
+      suffix: unitSuffix,
+    };
+    /* input  props */
+    const inputProps = {
+      min,
+      max,
+      step,
+      value,
+      defaultValue,
+    };
+    const generalProps = Object.assign(Object.assign(Object.assign({ "id": _id + "-base-input", "name": this.name, disabled,
+      mode, "aria-label": label, "aria-labelledby": _id + "-label", "getInputRef": el => {
+        this.inputElement = el;
+      }, "className": input() }, numericProps), inputProps), { "onValueChange": (e) => {
+        const { floatValue } = e;
+        this.value = floatValue;
+        this._onChange.emit(e);
+      } });
+    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+
+export { NumberInput as bcm_number_input };

package/dist/esm/bcm-overlay_2.entry.js

@@ -3,9 +3,9 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host } from './index-0615c2b8.js';
-import { c as classnames } from './index-b84bc8c9.js';
-import { c as colors } from './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import { c as colors } from './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
 
 const BcmOverlay = class {
   constructor(hostRef) {

package/dist/esm/bcm-popover.entry.js

@@ -3,20 +3,20 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { C as ColorHelper } from './color-helper-c0bb1d8a.js';
+import { C as ColorHelper } from './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import { S as StringHelper } from './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-import { d as delay } from './utils-57652744.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import './number-helper-0cbe6443.js';
+import { S as StringHelper } from './string-helper-b4602002.js';
+import './validators-e7ccc273.js';
+import './element-dragger-b75266e6.js';
+import { B as Bcm } from './bcm-a50d55ba.js';
+import { d as delay } from './utils-7727d09e.js';
 import { F as FloatingUI } from './floating-ui-3f4394da.js';
 import './colors-1d7854ea.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.js';
+import './colors-ed4e7579.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
 
 class Popover {
   constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {

package/dist/esm/bcm-range.entry.js

@@ -3,13 +3,13 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { c as classnames } from './index-b84bc8c9.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import { B as Bcm } from './bcm-a50d55ba.js';
-import { d as delay } from './utils-57652744.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.js';
-import './colors-df32bb43.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import { G as Generate } from './generate-fb762c9f.js';
+import { a as Bcm } from './bcm-a50d55ba.js';
+import { d as delay } from './utils-7727d09e.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-67609610.js';
+import './colors-ed4e7579.js';
 
 const rangeCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-range{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;width:100%;position:relative;display:block;margin:16px 0}.bcm-range input[type=range]{position:absolute;pointer-events:none;-webkit-appearance:none;z-index:4;height:30px;width:100%;top:-17px;opacity:0}.bcm-range input[type=range].single{display:none}.bcm-range input[type=range]::-webkit-slider-thumb{pointer-events:all;width:30px;height:30px;border-radius:0;border:0 none;background-color:red;-webkit-appearance:none;cursor:pointer}.bcm-range__container-bar{width:calc(100% - 24px);left:12px;position:relative}.bcm-range__container-bar-track{position:absolute;top:-2px;width:100%;height:4px;background-color:var(--bcm-new-ds-color-slate-300);z-index:1}.bcm-range__container-bar-range{position:absolute;top:-2px;left:22.22%;right:22.22%;height:4px;background-color:var(--bcm-new-ds-color-blue-500);z-index:2}.bcm-range__container-bar-thumb{position:absolute;top:0;width:16px;height:16px;background-color:var(--bcm-new-ds-color-blue-500);border-radius:50%;z-index:3;transition:box-shadow 0.2s ease-in-out;display:flex;align-items:center;justify-content:center}.bcm-range__container-bar-thumb>span{display:flex;width:100%;height:100%}.bcm-range__container-bar-thumb.hover{box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1);cursor:pointer}.bcm-range__container-bar-thumb.hidden{display:none}.bcm-range__container-bar-thumb.left{left:22.22222%;transform:translate(-8px, -8px)}.bcm-range__container-bar-thumb.right{right:0%;transform:translate(8px, -8px)}.bcm-range .ticks{position:absolute;z-index:0;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:4px 0;user-select:none}.bcm-range .tick{position:relative;display:flex;justify-content:center;width:1px;color:var(--bcm-new-ds-color-slate-300);cursor:pointer;height:8px;line-height:32px;margin-bottom:8px;z-index:-1;transition:color 0.1s ease-in-out}.bcm-range .tick::before,.bcm-range .tick::after{content:\" \";position:absolute;width:1px;height:8px;background-color:var(--bcm-new-ds-color-slate-300);z-index:-1;transition:background-color 0.1s ease-in-out}.bcm-range .tick::before{top:-16px}.bcm-range .tick::after{top:0}.bcm-range .tick.hover{color:var(--bcm-new-ds-color-slate-400)}.bcm-range .tick.hover::before,.bcm-range .tick.hover::after{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-range .touch{position:absolute;width:calc(100% + 48px);left:-24px;top:-17px;opacity:0;height:45px;z-index:2;background-color:transparent;display:flex;flex-direction:row;justify-content:space-between}.bcm-range .touch-point{cursor:pointer;flex:1;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box;background-color:var(--bcm-new-ds-color-slate-300)}.bcm-range .touch-point:hover{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-range .touch::after,.bcm-range .touch::before{content:\"\";position:absolute;width:24px;height:100%;top:0}.bcm-range .touch::before{left:0}.bcm-range .touch::after{right:0}.bcm-range.vertical{margin:0 16px;padding:12px 0}.bcm-range.vertical .touch{width:calc(100% + 12px);left:-6px;top:-17px}.bcm-range.vertical .touch::after,.bcm-range.vertical .touch::before{width:12px}.bcm-range.vertical .bcm-range__container{transform:rotate(270deg)}.bcm-range.vertical .bcm-range__container .ticks .tick-text{position:absolute;top:0px;width:100%;transform:rotate(90deg)}";
 
@@ -170,7 +170,7 @@ const BcmRange = class {
       height: '100%',
       width: height,
     };
-    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
+    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", role: "slider", "aria-label": "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, role: "slider", "aria-label": "range", min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
   }
   get el() { return getElement(this); }
 };