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

package/components/unit-input/index.cjs

@@ -15,29 +15,253 @@
  * 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 o=require("../base-CBCg3yyw.cjs"),h=require("../state-D8JEtYqe.cjs"),d=require("../luzmo-icons-D47EGj-3.cjs"),x=require("../style-map-CeilmSgs.cjs"),z="*,*: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 w=Object.defineProperty,s=(m,t,e,i)=>{for(var a=void 0,n=m.length-1,u;n>=0;n--)(u=m[n])&&(a=u(t,e,a)||a);return a&&w(t,e,a),a};const l={min:-99999999999,max:99999999999,step:1,default:0,debounce:250},p=class p extends o.LuzmoElement{constructor(){super(),this.isDecimal=!1,this.disabled=!1,this.readOnly=!1,this.inputWidth="",this.debounce=l.debounce,this.errors=[],this.setValue=t=>{this.waitForUpdate=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},this.debounce||0)},this.setCorrectInitialValues()}transformToNumber(t,e){let i=t;return i=this.isDecimal?Number.parseFloat(t+""):Number.parseInt(t+"",10),i=Number.isNaN(i)?Number(e):Number(i),i}onInput(t){let e=new RegExp(/[^0-9+-]/g);this.isDecimal&&(e=new RegExp(/[^0-9.,+-]/g));const i=t.target.value.replace(e,"").replaceAll(",",".");t.target.value=i,this.errors=[];const a=this.isDecimal?Number.parseFloat(i+""):Number.parseInt(i+"",10);Number.isNaN(a)&&this.errors.push("Not a number"),a<this.min&&this.errors.length===0&&this.errors.push("Value is lower than minimum"),a>this.max&&this.errors.length===0&&this.errors.push("Value is higher than maximum"),this.errors.length===0?(this.validValue=a,this.value=this.validValue,this.setValue(this.value),this.setErrorStatus(!1)):this.setErrorStatus(!0)}setErrorStatus(t){var e,i;t?(e=this.renderRoot.querySelector(".unit-input-container"))==null||e.classList.add("has-error"):(this.errors=[],(i=this.renderRoot.querySelector(".unit-input-container"))==null||i.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")}createAndSetValidValue(t){let e=this.validValue?this.transformToNumber(t,this.validValue):this.transformToNumber(t,this.default);this.max<e&&(e=this.max),this.min>e&&(e=this.min),this.validValue=e,this.value=e}setCorrectInitialValues(){this.min=this.transformToNumber(this.min,l.min),this.max=this.transformToNumber(this.max,l.max),this.step=Math.abs(this.transformToNumber(this.step,l.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,l.default),this.createAndSetValidValue(this.value)}onKeydown(t){!this.disabled&&(t.key==="ArrowUp"||t.key==="ArrowDown")&&this.applyStep(t,t.key==="ArrowUp")}applyStep(t,e){var i,a,n,u,b,f;if(!this.disabled){t.preventDefault();const v=((n=(a=(i=this.validValue.toString())==null?void 0:i.split("."))==null?void 0:a[1])==null?void 0:n.length)??0,g=((f=(b=(u=this.step.toString())==null?void 0:u.split("."))==null?void 0:b[1])==null?void 0:f.length)??0,y=Math.max(v,g);let c=this.validValue+(e?this.step:-this.step);c=Number.parseFloat(c.toFixed(y)),this.createAndSetValidValue(c),this.setErrorStatus(!1),this.renderRoot.querySelector("input").value=this.validValue+"",this.setValue(this.validValue),this.setDisabledUpDownStatus()}}setPaddingRightOfInput(){const t=this.renderRoot.querySelector(".unit"),e=this.renderRoot.querySelector(".ticks"),i=this.unit?`calc(${t==null?void 0:t.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=i}updated(t){t.has("value")&&(this.setCorrectInitialValues(),this.waitForUpdate?this.waitForUpdate=!1:this.renderRoot.querySelector("input").value=this.value+"",this.setPaddingRightOfInput())}render(){return o.x`
-      <div style=${x.o(this.inputWidth?{width:this.inputWidth}:{})}>
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const icons = require("@luzmo/icons");
+const styleMap_js = require("lit/directives/style-map.js");
+const base = require("../base-COw9n7UR.cjs");
+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 DEFAULTVALUES = {
+  min: -99999999999,
+  max: 99999999999,
+  step: 1,
+  default: 0,
+  debounce: 250
+};
+const _LuzmoUnitInput = class _LuzmoUnitInput extends base.LuzmoElement {
+  constructor() {
+    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: value,
+            bubbles: true,
+            composed: true
+          })
+        );
+      }, this.debounce || 0);
+    };
+    this.setCorrectInitialValues();
+  }
+  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(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(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() {
+    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(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, 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(event) {
+    if (!this.disabled && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      this.applyStep(event, event.key === "ArrowUp");
+    }
+  }
+  applyStep(event, isUp) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!this.disabled) {
+      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 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(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 lit.html`
+      <div style=${styleMap_js.styleMap(this.inputWidth ? { width: this.inputWidth } : {})}>
         <input
           .min=${String(this.min)}
           .max=${String(this.max)}
           @input=${this.onInput}
           @keydown=${this.onKeydown}
         />
-        ${this.unit?o.x`<div class="unit">${this.unit}</div>`:""}
+        ${this.unit ? lit.html`<div class="unit">${this.unit}</div>` : ""}
         <div class="ticks">
           <div
             class="tick-up"
-            @click=${{handleEvent:t=>this.applyStep(t,!0)}}
+            @click=${{
+      handleEvent: (event) => this.applyStep(event, true)
+    }}
           >
-            ${d.p3(d.b)}
+            ${icons.luzmoIcon(icons.luzmoAngleUp)}
           </div>
 
           <div
             class="tick-down"
-            @click=${{handleEvent:t=>this.applyStep(t,!1)}}
+            @click=${{
+      handleEvent: (event) => this.applyStep(event, false)
+    }}
           >
-            ${d.p3(d.T)}
+            ${icons.luzmoIcon(icons.luzmoAngleDown)}
           </div>
         </div>
       </div>
-    `}};p.styles=o.r(z);let r=p;s([o.n({type:Number,reflect:!0,attribute:"value"})],r.prototype,"value");s([o.n({type:Number,reflect:!0,attribute:"default"})],r.prototype,"default");s([o.n({type:String,reflect:!0,attribute:"placeholder"})],r.prototype,"placeholder");s([o.n({type:String,reflect:!0,attribute:"unit"})],r.prototype,"unit");s([o.n({type:Number,reflect:!0,attribute:"min"})],r.prototype,"min");s([o.n({type:Number,reflect:!0,attribute:"max"})],r.prototype,"max");s([o.n({type:Number,reflect:!0,attribute:"step"})],r.prototype,"step");s([o.n({type:Boolean,reflect:!0,attribute:"isDecimal"})],r.prototype,"isDecimal");s([o.n({type:Boolean,reflect:!0,attribute:"disabled"})],r.prototype,"disabled");s([o.n({type:Boolean,reflect:!0,attribute:"readOnly"})],r.prototype,"readOnly");s([o.n({type:String,reflect:!0,attribute:"inputWidth"})],r.prototype,"inputWidth");s([o.n({type:Number,reflect:!0,attribute:"debounce"})],r.prototype,"debounce");s([h.r()],r.prototype,"errors");s([h.r()],r.prototype,"validValue");s([h.r()],r.prototype,"waitForUpdate");customElements.get("luzmo-unit-input")||customElements.define("luzmo-unit-input",r);exports.LuzmoUnitInput=r;
+    `;
+  }
+};
+_LuzmoUnitInput.styles = lit.unsafeCSS(styles);
+let LuzmoUnitInput = _LuzmoUnitInput;
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "value" })
+], LuzmoUnitInput.prototype, "value");
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "default" })
+], LuzmoUnitInput.prototype, "default");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "placeholder" })
+], LuzmoUnitInput.prototype, "placeholder");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "unit" })
+], LuzmoUnitInput.prototype, "unit");
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "min" })
+], LuzmoUnitInput.prototype, "min");
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "max" })
+], LuzmoUnitInput.prototype, "max");
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "step" })
+], LuzmoUnitInput.prototype, "step");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "isDecimal" })
+], LuzmoUnitInput.prototype, "isDecimal");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "disabled" })
+], LuzmoUnitInput.prototype, "disabled");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "readOnly" })
+], LuzmoUnitInput.prototype, "readOnly");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "inputWidth" })
+], LuzmoUnitInput.prototype, "inputWidth");
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "debounce" })
+], LuzmoUnitInput.prototype, "debounce");
+__decorateClass([
+  decorators_js.state()
+], LuzmoUnitInput.prototype, "errors");
+__decorateClass([
+  decorators_js.state()
+], LuzmoUnitInput.prototype, "validValue");
+__decorateClass([
+  decorators_js.state()
+], LuzmoUnitInput.prototype, "waitForUpdate");
+if (!customElements.get("luzmo-unit-input")) {
+  customElements.define("luzmo-unit-input", LuzmoUnitInput);
+}
+exports.LuzmoUnitInput = LuzmoUnitInput;