@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/unit-input/index.cjs

@@ -15,253 +15,29 @@
  * 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 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 } : {})}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-Cy0MQrPT.cjs"),h=require("../state-vf0PJN3_.cjs"),d=require("../luzmo-icons-CtA-TJPd.cjs"),x=require("../style-map-DuMd5xlY.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}:{})}>
         <input
           .min=${String(this.min)}
           .max=${String(this.max)}
           @input=${this.onInput}
           @keydown=${this.onKeydown}
         />
-        ${this.unit ? lit.html`<div class="unit">${this.unit}</div>` : ""}
+        ${this.unit?o.x`<div class="unit">${this.unit}</div>`:""}
         <div class="ticks">
           <div
             class="tick-up"
-            @click=${{
-      handleEvent: (event) => this.applyStep(event, true)
-    }}
+            @click=${{handleEvent:t=>this.applyStep(t,!0)}}
           >
-            ${icons.luzmoIcon(icons.luzmoAngleUp)}
+            ${d.T3(d.b)}
           </div>
 
           <div
             class="tick-down"
-            @click=${{
-      handleEvent: (event) => this.applyStep(event, false)
-    }}
+            @click=${{handleEvent:t=>this.applyStep(t,!1)}}
           >
-            ${icons.luzmoIcon(icons.luzmoAngleDown)}
+            ${d.T3(d.T)}
           </div>
         </div>
       </div>
-    `;
-  }
-};
-_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;
+    `}};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;