bromcom-ui 2.12.0-test.1 → 2.12.1-test.0

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

@@ -9,18 +9,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-acac74ce.js');
-require('./number-helper-fb148ed6.js');
-require('./string-helper-f9184277.js');
-require('./validators-a7c046d5.js');
+const generate = require('./generate-7510539d.js');
+require('./number-helper-9d2d1d5a.js');
+require('./string-helper-1ee6dc21.js');
+require('./validators-9369c82a.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
-const bcm = require('./bcm-489c9b1a.js');
+const bcm = require('./bcm-1d1fcf21.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./colors-56282b00.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-c5399090.js');
+require('./package-a60955f7.js');
 
 const BcmModal2 = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ const BcmModal2 = class {
     this.isShow = false;
     this.center = false;
     this.zIndex = "10400";
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.backdrop = true;
     this.fullWidth = false;
     this.fullScreen = false;

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

@@ -0,0 +1,297 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-7510539d.js');
+require('./number-helper-9d2d1d5a.js');
+const stringHelper = require('./string-helper-1ee6dc21.js');
+require('./validators-9369c82a.js');
+require('./element-dragger-a8562f82.js');
+const utils = require('./utils-fc077139.js');
+const bcm = require('./bcm-1d1fcf21.js');
+const captionTemplate = require('./caption-template-85a18b6d.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./types-cc4adee7.js');
+require('./types-7523fd99.js');
+const input_style = require('./input.style-b5676e6a.js');
+require('./colors-56282b00.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-a60955f7.js');
+require('./index-5279dea2.js');
+
+const NumberInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.focus = index.createEvent(this, "bcm-focus", 3);
+    this.blur = index.createEvent(this, "bcm-blur", 3);
+    this.clear = index.createEvent(this, "bcm-clear", 3);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.input = index.createEvent(this, "bcm-input", 3);
+    this.beforeClear = index.createEvent(this, "bcm-input-before-clear", 3);
+    this._onChange = index.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.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.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.StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (+valuePoint < +minLength) {
+        this.setCaption(stringHelper.StringHelper.getMessage("minlength", [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (valuePoint > maxLength) {
+        this.setCaption(stringHelper.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 utils.delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await utils.delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await utils.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 } = input_style.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 (index.h(index.Host, { class: host() }, label && index.h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), index.h("div", { class: inputContainer() }, index.h("div", { class: slotClass() }, index.h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && index.h("span", { innerHTML: _prefix }))), index.h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), index.h("div", { class: slotClass() }, !disabled && isActiveClearable && (index.h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, index.h("i", { class: "far fa-times" }))), index.h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && index.h("span", { innerHTML: _suffix })), index.h("div", { class: controls() }, index.h("button", { type: "button", disabled: disabled, class: index$1.classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, index.h("i", { class: "fas fa-caret-up" })), index.h("div", { class: controlsDivider() }), index.h("button", { type: "button", disabled: disabled, class: index$1.classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, index.h("i", { class: "fas fa-caret-down" }))))), index.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+
+exports.bcm_number_input = NumberInput;

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

@@ -9,18 +9,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const colorHelper = require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-acac74ce.js');
-require('./number-helper-fb148ed6.js');
-const stringHelper = require('./string-helper-f9184277.js');
-require('./validators-a7c046d5.js');
+const generate = require('./generate-7510539d.js');
+require('./number-helper-9d2d1d5a.js');
+const stringHelper = require('./string-helper-1ee6dc21.js');
+require('./validators-9369c82a.js');
 require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-489c9b1a.js');
+const bcm = require('./bcm-1d1fcf21.js');
 const utils = require('./utils-fc077139.js');
-const floatingUi = require('./floating-ui-21890d11.js');
+const floatingUi = require('./floating-ui-5b396838.js');
 require('./colors-56282b00.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-c5399090.js');
+require('./package-a60955f7.js');
 
 class Popover {
   constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
@@ -163,8 +163,8 @@ const BcmPopover = class {
     this._id = generate.Generate.UID();
     this.message = "";
     this.content = "";
-    this.placement = bcm.Bcm$1.Placement.top;
-    this.trigger = bcm.Bcm$1.TriggerType.click;
+    this.placement = bcm.Bcm.Placement.top;
+    this.trigger = bcm.Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
     this.openDelay = 0;

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-acac74ce.js');
-const bcm = require('./bcm-489c9b1a.js');
+const generate = require('./generate-7510539d.js');
+const bcm = require('./bcm-1d1fcf21.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-c5399090.js');
+require('./package-a60955f7.js');
 require('./colors-250d0982.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)}";
@@ -28,7 +28,7 @@ const BcmRange = class {
     this.value = 0;
     this.height = "326px";
     this.name = undefined;
-    this.direction = bcm.Bcm.Direction.horizontal;
+    this.direction = bcm.Bcm$1.Direction.horizontal;
     this._prefix = undefined;
     this._suffix = undefined;
     this.multiple = false;
@@ -53,7 +53,7 @@ const BcmRange = class {
     }
     generate.Generate.createComponent('bcm-tooltip-box', {
       id: 'box-' + this._id,
-      placement: this.direction === bcm.Bcm.Direction.horizontal ? bcm.Bcm.Placement.top : bcm.Bcm.Placement.left,
+      placement: this.direction === bcm.Bcm$1.Direction.horizontal ? bcm.Bcm$1.Placement.top : bcm.Bcm$1.Placement.left,
       color: 'blue'
     });
   }
@@ -174,7 +174,7 @@ const BcmRange = class {
       height: '100%',
       width: height,
     };
-    return (index.h(index.Host, { class: hostClasses, style: direction == bcm.Bcm.Direction.vertical && { height: height } }, index.h("div", { class: "bcm-range__container", style: direction == bcm.Bcm.Direction.vertical && verticalStyle }, index.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 } }), index.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 }), index.h("div", { class: "bcm-range__container-bar" }, index.h("div", { class: "ticks" }, index.h(Ticks, null)), index.h("div", { class: "bcm-range__container-bar-track" }), index.h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), index.h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, index.h("span", null)), index.h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, index.h("span", null))), index.h("div", { class: "touch" }, index.h(Touch, null)))));
+    return (index.h(index.Host, { class: hostClasses, style: direction == bcm.Bcm$1.Direction.vertical && { height: height } }, index.h("div", { class: "bcm-range__container", style: direction == bcm.Bcm$1.Direction.vertical && verticalStyle }, index.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 } }), index.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 }), index.h("div", { class: "bcm-range__container-bar" }, index.h("div", { class: "ticks" }, index.h(Ticks, null)), index.h("div", { class: "bcm-range__container-bar-track" }), index.h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), index.h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, index.h("span", null)), index.h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, index.h("span", null))), index.h("div", { class: "touch" }, index.h(Touch, null)))));
   }
   get el() { return index.getElement(this); }
 };