@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/unit-input/index.js

@@ -15,169 +15,262 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as w, r as k, x as f, n as u } from "../base-WsynuqaS.js";
-import { r as m } from "../state-Deh-vKYE.js";
-import { p as z, b as S, T as V } from "../luzmo-icons-NEyaMpEM.js";
-import { o as N } from "../style-map-IgqIKvlE.js";
-const y = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const s = document.createElement("style");
-    s.setAttribute("data-luzmo-vars", ""), s.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(s);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-y();
-const R = "*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";
-var E = Object.defineProperty, i = (s, o, e, t) => {
-  for (var l = void 0, a = s.length - 1, n; a >= 0; a--)
-    (n = s[a]) && (l = n(o, e, l) || l);
-  return l && E(o, e, l), l;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { luzmoIcon, luzmoAngleUp, luzmoAngleDown } from "@luzmo/icons";
+import { styleMap } from "lit/directives/style-map.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+const styles = "*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-const d = {
+const DEFAULTVALUES = {
   min: -99999999999,
   max: 99999999999,
   step: 1,
   default: 0,
   debounce: 250
-}, p = class p extends w {
+};
+const _LuzmoUnitInput = class _LuzmoUnitInput extends LuzmoElement {
   constructor() {
-    super(), this.isDecimal = !1, this.disabled = !1, this.readOnly = !1, this.inputWidth = "", this.debounce = d.debounce, this.errors = [], this.setValue = (o) => {
-      this.waitForUpdate = !0, this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
+    super();
+    this.isDecimal = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.inputWidth = "";
+    this.debounce = DEFAULTVALUES.debounce;
+    this.errors = [];
+    this.setValue = (value) => {
+      this.waitForUpdate = true;
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
+      }
+      this.debounceTimeout = setTimeout(() => {
         this.dispatchEvent(
           new CustomEvent("change", {
-            detail: o,
-            bubbles: !0,
-            composed: !0
+            detail: value,
+            bubbles: true,
+            composed: true
           })
         );
       }, this.debounce || 0);
-    }, this.setCorrectInitialValues();
+    };
+    this.setCorrectInitialValues();
   }
-  transformToNumber(o, e) {
-    let t = o;
-    return t = this.isDecimal ? Number.parseFloat(o + "") : Number.parseInt(o + "", 10), t = Number.isNaN(t) ? Number(e) : Number(t), t;
+  transformToNumber(value, fallbackValue) {
+    let transformedValue = value;
+    transformedValue = this.isDecimal ? Number.parseFloat(value + "") : Number.parseInt(value + "", 10);
+    transformedValue = Number.isNaN(transformedValue) ? Number(fallbackValue) : Number(transformedValue);
+    return transformedValue;
   }
-  onInput(o) {
-    let e = new RegExp(/[^0-9+-]/g);
-    this.isDecimal && (e = new RegExp(/[^0-9.,+-]/g));
-    const t = o.target.value.replace(e, "").replaceAll(",", ".");
-    o.target.value = t, this.errors = [];
-    const l = this.isDecimal ? Number.parseFloat(t + "") : Number.parseInt(t + "", 10);
-    Number.isNaN(l) && this.errors.push("Not a number"), l < this.min && this.errors.length === 0 && this.errors.push("Value is lower than minimum"), l > this.max && this.errors.length === 0 && this.errors.push("Value is higher than maximum"), this.errors.length === 0 ? (this.validValue = l, this.value = this.validValue, this.setValue(this.value), this.setErrorStatus(!1)) : this.setErrorStatus(!0);
+  onInput(event) {
+    let regex = new RegExp(/[^0-9+-]/g);
+    if (this.isDecimal) {
+      regex = new RegExp(/[^0-9.,+-]/g);
+    }
+    const value = event.target.value.replace(regex, "").replaceAll(",", ".");
+    event.target.value = value;
+    this.errors = [];
+    const checkValue = this.isDecimal ? Number.parseFloat(value + "") : Number.parseInt(value + "", 10);
+    if (Number.isNaN(checkValue)) {
+      this.errors.push("Not a number");
+    }
+    if (checkValue < this.min && this.errors.length === 0) {
+      this.errors.push("Value is lower than minimum");
+    }
+    if (checkValue > this.max && this.errors.length === 0) {
+      this.errors.push("Value is higher than maximum");
+    }
+    if (this.errors.length === 0) {
+      this.validValue = checkValue;
+      this.value = this.validValue;
+      this.setValue(this.value);
+      this.setErrorStatus(false);
+    } else {
+      this.setErrorStatus(true);
+    }
   }
-  setErrorStatus(o) {
-    var e, t;
-    o ? (e = this.renderRoot.querySelector(".unit-input-container")) == null || e.classList.add("has-error") : (this.errors = [], (t = this.renderRoot.querySelector(".unit-input-container")) == null || t.classList.remove("has-error"));
+  setErrorStatus(hasError) {
+    var _a, _b;
+    if (hasError) {
+      (_a = this.renderRoot.querySelector(".unit-input-container")) == null ? void 0 : _a.classList.add("has-error");
+    } else {
+      this.errors = [];
+      (_b = this.renderRoot.querySelector(".unit-input-container")) == null ? void 0 : _b.classList.remove("has-error");
+    }
   }
   setDisabledUpDownStatus() {
-    this.value === this.min ? this.renderRoot.querySelector(".tick-down").classList.add("disabled") : this.renderRoot.querySelector(".tick-down").classList.remove("disabled"), this.value === this.max ? this.renderRoot.querySelector(".tick-up").classList.add("disabled") : this.renderRoot.querySelector(".tick-up").classList.remove("disabled");
+    if (this.value === this.min) {
+      this.renderRoot.querySelector(".tick-down").classList.add("disabled");
+    } else {
+      this.renderRoot.querySelector(".tick-down").classList.remove("disabled");
+    }
+    if (this.value === this.max) {
+      this.renderRoot.querySelector(".tick-up").classList.add("disabled");
+    } else {
+      this.renderRoot.querySelector(".tick-up").classList.remove("disabled");
+    }
   }
-  createAndSetValidValue(o) {
-    let e = this.validValue ? this.transformToNumber(o, this.validValue) : this.transformToNumber(o, this.default);
-    this.max < e && (e = this.max), this.min > e && (e = this.min), this.validValue = e, this.value = e;
+  createAndSetValidValue(value) {
+    let newValue = this.validValue ? this.transformToNumber(value, this.validValue) : this.transformToNumber(value, this.default);
+    if (this.max < newValue) {
+      newValue = this.max;
+    }
+    if (this.min > newValue) {
+      newValue = this.min;
+    }
+    this.validValue = newValue;
+    this.value = newValue;
   }
   setCorrectInitialValues() {
-    this.min = this.transformToNumber(this.min, d.min), this.max = this.transformToNumber(this.max, d.max), this.step = Math.abs(this.transformToNumber(this.step, d.step)), this.min > this.max && (this.min = this.max), this.max < this.min + this.step && (this.max = this.min + this.step), this.default = this.transformToNumber(this.default, d.default), this.createAndSetValidValue(this.value);
+    this.min = this.transformToNumber(this.min, DEFAULTVALUES.min);
+    this.max = this.transformToNumber(this.max, DEFAULTVALUES.max);
+    this.step = Math.abs(this.transformToNumber(this.step, DEFAULTVALUES.step));
+    if (this.min > this.max) {
+      this.min = this.max;
+    }
+    if (this.max < this.min + this.step) {
+      this.max = this.min + this.step;
+    }
+    this.default = this.transformToNumber(this.default, DEFAULTVALUES.default);
+    this.createAndSetValidValue(this.value);
   }
-  onKeydown(o) {
-    !this.disabled && (o.key === "ArrowUp" || o.key === "ArrowDown") && this.applyStep(o, o.key === "ArrowUp");
+  onKeydown(event) {
+    if (!this.disabled && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      this.applyStep(event, event.key === "ArrowUp");
+    }
   }
-  applyStep(o, e) {
-    var t, l, a, n, h, b;
+  applyStep(event, isUp) {
+    var _a, _b, _c, _d, _e, _f;
     if (!this.disabled) {
-      o.preventDefault();
-      const g = ((a = (l = (t = this.validValue.toString()) == null ? void 0 : t.split(".")) == null ? void 0 : l[1]) == null ? void 0 : a.length) ?? 0, v = ((b = (h = (n = this.step.toString()) == null ? void 0 : n.split(".")) == null ? void 0 : h[1]) == null ? void 0 : b.length) ?? 0, x = Math.max(g, v);
-      let c = this.validValue + (e ? this.step : -this.step);
-      c = Number.parseFloat(c.toFixed(x)), this.createAndSetValidValue(c), this.setErrorStatus(!1), this.renderRoot.querySelector("input").value = this.validValue + "", this.setValue(this.validValue), this.setDisabledUpDownStatus();
+      event.preventDefault();
+      const precisionValid = ((_c = (_b = (_a = this.validValue.toString()) == null ? void 0 : _a.split(".")) == null ? void 0 : _b[1]) == null ? void 0 : _c.length) ?? 0;
+      const precisionStep = ((_f = (_e = (_d = this.step.toString()) == null ? void 0 : _d.split(".")) == null ? void 0 : _e[1]) == null ? void 0 : _f.length) ?? 0;
+      const maxPrecision = Math.max(precisionValid, precisionStep);
+      let newValue = this.validValue + (isUp ? this.step : -this.step);
+      newValue = Number.parseFloat(newValue.toFixed(maxPrecision));
+      this.createAndSetValidValue(newValue);
+      this.setErrorStatus(false);
+      this.renderRoot.querySelector("input").value = this.validValue + "";
+      this.setValue(this.validValue);
+      this.setDisabledUpDownStatus();
     }
   }
   setPaddingRightOfInput() {
-    const o = this.renderRoot.querySelector(".unit"), e = this.renderRoot.querySelector(".ticks"), t = this.unit ? `calc(${o == null ? void 0 : o.offsetWidth}px + ${e == null ? void 0 : e.offsetWidth}px)` : `calc(${e == null ? void 0 : e.offsetWidth}px + var(--luzmo-spacing-3))`;
-    this.renderRoot.querySelector("input").style.paddingRight = t;
+    const unitDiv = this.renderRoot.querySelector(".unit");
+    const ticksDiv = this.renderRoot.querySelector(".ticks");
+    const paddingRight = this.unit ? `calc(${unitDiv == null ? void 0 : unitDiv.offsetWidth}px + ${ticksDiv == null ? void 0 : ticksDiv.offsetWidth}px)` : `calc(${ticksDiv == null ? void 0 : ticksDiv.offsetWidth}px + var(--luzmo-spacing-3))`;
+    this.renderRoot.querySelector("input").style.paddingRight = paddingRight;
   }
-  updated(o) {
-    o.has("value") && (this.setCorrectInitialValues(), this.waitForUpdate ? this.waitForUpdate = !1 : this.renderRoot.querySelector("input").value = this.value + "", this.setPaddingRightOfInput());
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.setCorrectInitialValues();
+      if (this.waitForUpdate) {
+        this.waitForUpdate = false;
+      } else {
+        this.renderRoot.querySelector("input").value = this.value + "";
+      }
+      this.setPaddingRightOfInput();
+    }
   }
   render() {
-    return f`
-      <div style=${N(this.inputWidth ? { width: this.inputWidth } : {})}>
+    return html`
+      <div style=${styleMap(this.inputWidth ? { width: this.inputWidth } : {})}>
         <input
           .min=${String(this.min)}
           .max=${String(this.max)}
           @input=${this.onInput}
           @keydown=${this.onKeydown}
         />
-        ${this.unit ? f`<div class="unit">${this.unit}</div>` : ""}
+        ${this.unit ? html`<div class="unit">${this.unit}</div>` : ""}
         <div class="ticks">
           <div
             class="tick-up"
             @click=${{
-      handleEvent: (o) => this.applyStep(o, !0)
+      handleEvent: (event) => this.applyStep(event, true)
     }}
           >
-            ${z(S)}
+            ${luzmoIcon(luzmoAngleUp)}
           </div>
 
           <div
             class="tick-down"
             @click=${{
-      handleEvent: (o) => this.applyStep(o, !1)
+      handleEvent: (event) => this.applyStep(event, false)
     }}
           >
-            ${z(V)}
+            ${luzmoIcon(luzmoAngleDown)}
           </div>
         </div>
       </div>
     `;
   }
 };
-p.styles = k(R);
-let r = p;
-i([
-  u({ type: Number, reflect: !0, attribute: "value" })
-], r.prototype, "value");
-i([
-  u({ type: Number, reflect: !0, attribute: "default" })
-], r.prototype, "default");
-i([
-  u({ type: String, reflect: !0, attribute: "placeholder" })
-], r.prototype, "placeholder");
-i([
-  u({ type: String, reflect: !0, attribute: "unit" })
-], r.prototype, "unit");
-i([
-  u({ type: Number, reflect: !0, attribute: "min" })
-], r.prototype, "min");
-i([
-  u({ type: Number, reflect: !0, attribute: "max" })
-], r.prototype, "max");
-i([
-  u({ type: Number, reflect: !0, attribute: "step" })
-], r.prototype, "step");
-i([
-  u({ type: Boolean, reflect: !0, attribute: "isDecimal" })
-], r.prototype, "isDecimal");
-i([
-  u({ type: Boolean, reflect: !0, attribute: "disabled" })
-], r.prototype, "disabled");
-i([
-  u({ type: Boolean, reflect: !0, attribute: "readOnly" })
-], r.prototype, "readOnly");
-i([
-  u({ type: String, reflect: !0, attribute: "inputWidth" })
-], r.prototype, "inputWidth");
-i([
-  u({ type: Number, reflect: !0, attribute: "debounce" })
-], r.prototype, "debounce");
-i([
-  m()
-], r.prototype, "errors");
-i([
-  m()
-], r.prototype, "validValue");
-i([
-  m()
-], r.prototype, "waitForUpdate");
-customElements.get("luzmo-unit-input") || customElements.define("luzmo-unit-input", r);
+_LuzmoUnitInput.styles = unsafeCSS(styles);
+let LuzmoUnitInput = _LuzmoUnitInput;
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "value" })
+], LuzmoUnitInput.prototype, "value");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "default" })
+], LuzmoUnitInput.prototype, "default");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "placeholder" })
+], LuzmoUnitInput.prototype, "placeholder");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "unit" })
+], LuzmoUnitInput.prototype, "unit");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "min" })
+], LuzmoUnitInput.prototype, "min");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "max" })
+], LuzmoUnitInput.prototype, "max");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "step" })
+], LuzmoUnitInput.prototype, "step");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "isDecimal" })
+], LuzmoUnitInput.prototype, "isDecimal");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "disabled" })
+], LuzmoUnitInput.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "readOnly" })
+], LuzmoUnitInput.prototype, "readOnly");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "inputWidth" })
+], LuzmoUnitInput.prototype, "inputWidth");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "debounce" })
+], LuzmoUnitInput.prototype, "debounce");
+__decorateClass([
+  state()
+], LuzmoUnitInput.prototype, "errors");
+__decorateClass([
+  state()
+], LuzmoUnitInput.prototype, "validValue");
+__decorateClass([
+  state()
+], LuzmoUnitInput.prototype, "waitForUpdate");
+if (!customElements.get("luzmo-unit-input")) {
+  customElements.define("luzmo-unit-input", LuzmoUnitInput);
+}
 export {
-  r as LuzmoUnitInput
+  LuzmoUnitInput
 };

package/components/utils.cjs

@@ -15,4 +15,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./base-CBCg3yyw.cjs"),o=require("./focus-visible-B0P9aY_G.cjs"),n=require("./focusable-EbipgXRh.cjs"),i=require("./platform-BiXhwqk3.cjs"),s=require("./sized-mixin-CPxE5C96.cjs"),r=require("./streaming-listener-B00MvALi.cjs");exports.LuzmoElement=e.LuzmoElement;exports.LuzmoMixin=e.LuzmoMixin;exports.FocusVisiblePolyfillMixin=o.FocusVisiblePolyfillMixin;exports.Focusable=n.Focusable;exports.isAndroid=i.isAndroid;exports.isAppleDevice=i.isAppleDevice;exports.isChrome=i.isChrome;exports.isFirefox=i.isFirefox;exports.isIOS=i.isIOS;exports.isIPad=i.isIPad;exports.isIPhone=i.isIPhone;exports.isMac=i.isMac;exports.isSeamonkey=i.isSeamonkey;exports.isWebKit=i.isWebKit;exports.ElementSizes=s.ElementSizes;exports.SizedMixin=s.SizedMixin;exports.streamingListener=r.streamingListener;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const base = require("./base-COw9n7UR.cjs");
+const focusVisible = require("./focus-visible-B-B8-P9R.cjs");
+const focusable = require("./focusable-BPrTcZPd.cjs");
+const platform = require("./platform-CxDar3Dn.cjs");
+const sizedMixin = require("./sized-mixin-UaTVa-AE.cjs");
+const streamingListener = require("./streaming-listener-D4sHaMub.cjs");
+exports.LuzmoElement = base.LuzmoElement;
+exports.LuzmoMixin = base.LuzmoMixin;
+exports.FocusVisiblePolyfillMixin = focusVisible.FocusVisiblePolyfillMixin;
+exports.Focusable = focusable.Focusable;
+exports.isAndroid = platform.isAndroid;
+exports.isAppleDevice = platform.isAppleDevice;
+exports.isChrome = platform.isChrome;
+exports.isFirefox = platform.isFirefox;
+exports.isIOS = platform.isIOS;
+exports.isIPad = platform.isIPad;
+exports.isIPhone = platform.isIPhone;
+exports.isMac = platform.isMac;
+exports.isSeamonkey = platform.isSeamonkey;
+exports.isWebKit = platform.isWebKit;
+exports.ElementSizes = sizedMixin.ElementSizes;
+exports.SizedMixin = sizedMixin.SizedMixin;
+exports.streamingListener = streamingListener.streamingListener;

package/components/utils.js

@@ -15,28 +15,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as e, L as a } from "./base-WsynuqaS.js";
-import { F as r } from "./focus-visible-DBlJGoEW.js";
-import { F as t } from "./focusable-BxtpnzWp.js";
-import { j as x, d as f, e as l, h as p, c, b as d, a as F, i as S, g as b, f as u } from "./platform-BM-uMWpX.js";
-import { E as L, S as M } from "./sized-mixin-D4ACoVUr.js";
-import { s as E } from "./streaming-listener-CP-JE6Fa.js";
+import { a, L } from "./base-DmeVy0cq.js";
+import { F } from "./focus-visible-BUPRWlsh.js";
+import { F as F2 } from "./focusable-ChCLg1k4.js";
+import { j, d, e, h, c, b, a as a2, i, g, f } from "./platform-Cxn0WbyT.js";
+import { E, S } from "./sized-mixin-DmkrNdWB.js";
+import { s } from "./streaming-listener-cAz5zJyk.js";
 export {
-  L as ElementSizes,
-  r as FocusVisiblePolyfillMixin,
-  t as Focusable,
-  e as LuzmoElement,
-  a as LuzmoMixin,
-  M as SizedMixin,
-  x as isAndroid,
-  f as isAppleDevice,
-  l as isChrome,
-  p as isFirefox,
+  E as ElementSizes,
+  F as FocusVisiblePolyfillMixin,
+  F2 as Focusable,
+  a as LuzmoElement,
+  L as LuzmoMixin,
+  S as SizedMixin,
+  j as isAndroid,
+  d as isAppleDevice,
+  e as isChrome,
+  h as isFirefox,
   c as isIOS,
-  d as isIPad,
-  F as isIPhone,
-  S as isMac,
-  b as isSeamonkey,
-  u as isWebKit,
-  E as streamingListener
+  b as isIPad,
+  a2 as isIPhone,
+  i as isMac,
+  g as isSeamonkey,
+  f as isWebKit,
+  s as streamingListener
 };