godown 1.1.3 → 1.1.5

package/input-form/base-input.js

@@ -26,12 +26,12 @@ let BaseInput = class BaseInput extends STD {
         var _a;
         if (!this.name)
             this.name = ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || this.type;
-        return html `<label for="input">
-  <slot name="pre"></slot>
-  <slot></slot>
-  <div class=${this.type}>${this._typeSwitcher()}</div>
-  <slot name="suf"></slot>
-</label>`;
+        return html `<label for="input">
+      <slot name="pre"></slot>
+      <slot></slot>
+      <div class=${this.type}>${this._typeSwitcher()}</div>
+      <slot name="suf"></slot>
+    </label>`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -52,7 +52,7 @@ let BaseInput = class BaseInput extends STD {
     }
     _handleRange(e) {
         this.value = e.target.value;
-        this._ranged.style.width = 100 * parseInt(e.target.value) / (this.max - this.min) + "%";
+        this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + "%";
         this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
     }
     _handleFile(e) {
@@ -73,110 +73,113 @@ let BaseInput = class BaseInput extends STD {
     _typeSwitcher() {
         switch (this.type) {
             case "range":
-                return html `<input id="input" type="range" min=${this.min} max=${this.max} step=${this.step} value=${this.value} @input=${this._handleRange} @change=${this._handleChange}><i></i>`;
+                return html `<input id="input" type="range" min=${this.min} max=${this.max} step=${this.step} value=${this.value} @input=${this._handleRange} @change=${this._handleChange} /><i></i>`;
             case "file":
-                return html `<input id="input" type="file" accept=${ifDefined(this.accept)} ?multiple=${!this.only} class="input" @change=${this._handleFile}>`;
+                return html `<input id="input" type="file" accept=${ifDefined(this.accept)} ?multiple=${!this.only} class="input" @change=${this._handleFile} />`;
             default:
-                return html `<input id="input" class="input" type=${this.type} placeholder=${this.pla} value=${this.value} @input=${this._handleInput} @change=${this._handleChange}/>`;
+                return html `<input id="input" class="input" type=${this.type} placeholder=${this.pla} value=${this.value} @input=${this._handleInput} @change=${this._handleChange} />`;
         }
     }
 };
-BaseInput.styles = [STD.styles, , css `
-  :host{
-    width:var(${cssvar}--input-width);
-    height: 1em;
-    display: inline-flex;
-    background-color: var(${cssvar}--input-background);
-    border-radius: .2em;
-    outline: .18em solid transparent;
-    color:var(${cssvar}--text);
-  }
-  :host(:focus-within){
-    outline-color: var(${cssvar}--input-outline-focus);
-  }
-  :host([type="range"]){
-    outline: none;
-    height: auto;
-  }
-  :host([type="file"]){
-    height: auto;
-    width: auto;
-    min-height: .5em;
-    min-width: .5em;
-  }
-  div,label{
-    display: flex;
-    flex: 1;
-  }
-  *{
-    border-radius: inherit;
-    cursor: inherit;
-    font-family: inherit;
-  }
-  .input[type="color"] {
-    padding: 0;
-    height: 100% !important;
-  }
-  .input[type="file"]{
-    display: none;
-  }
-  .input {
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
-    font-size: .8em;
-    outline: 0;
-    border: 0;
-    margin: 0;
-    border: none;
-    color: inherit;
-    background: transparent;
-    padding: 0 .25em;
-    border-radius: .25em;
-  }
-  .range{
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 .5px .1em var(${cssvar}--shadow);
-    background-color:var(${cssvar}--input-false);
-    
-  }
-  .range input~i {
-    position: absolute;
-    left: 0;
-    width: 50%;
-    pointer-events: none ;
-    background-color: var(${cssvar}--input-true);
-    height: calc(.6em - 1.1px);
-  }
-  .range input {
-    height: .6em;
-    margin: 0px -0.5em;
-    width: calc(100% + 0.5em);
-    appearance: none;
-    -webkit-appearance: none;
-    outline: none;
-    background-color: transparent;
-  }
-  .range input::-webkit-slider-runnable-track {
-    height: .6em;
-  }
-  .range input::-webkit-slider-thumb {
-    z-index: 1;
-    appearance: none;
-    -webkit-appearance: none;
-    position: relative;
-    height: 1.2em;
-    width: 1.2em;
-    margin-top: -0.3em;
-    background-color: var(${cssvar}--input-control);
-    border-radius: 50%;
-    border: solid 0.125em rgba(0, 221, 255, 0.5);
-    box-shadow: 0 .1em .1em var(${cssvar}--shadow);
-  }
-  `];
+BaseInput.styles = [
+    STD.styles,
+    css `
+      :host {
+        width: var(${cssvar}--input-width);
+        height: 1em;
+        display: inline-flex;
+        background-color: var(${cssvar}--input-background);
+        border-radius: 0.2em;
+        outline: 0.18em solid transparent;
+        color: var(${cssvar}--text);
+      }
+      :host(:focus-within) {
+        outline-color: var(${cssvar}--input-outline-focus);
+      }
+      :host([type="range"]) {
+        outline: none;
+        height: auto;
+      }
+      :host([type="file"]) {
+        height: auto;
+        width: auto;
+        min-height: 0.5em;
+        min-width: 0.5em;
+      }
+      div,
+      label {
+        display: flex;
+        flex: 1;
+      }
+      * {
+        border-radius: inherit;
+        cursor: inherit;
+        font-family: inherit;
+      }
+      .input[type="color"] {
+        padding: 0;
+        height: 100% !important;
+      }
+      .input[type="file"] {
+        display: none;
+      }
+      .input {
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
+        font-size: 0.8em;
+        outline: 0;
+        border: 0;
+        margin: 0;
+        border: none;
+        color: inherit;
+        background: transparent;
+        padding: 0 0.25em;
+        border-radius: 0.25em;
+      }
+      .range {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 0.5px 0.1em var(${cssvar}--shadow);
+        background-color: var(${cssvar}--input-false);
+      }
+      .range input ~ i {
+        position: absolute;
+        left: 0;
+        width: 50%;
+        pointer-events: none;
+        background-color: var(${cssvar}--input-true);
+        height: calc(0.6em - 1.1px);
+      }
+      .range input {
+        height: 0.6em;
+        margin: 0px -0.5em;
+        width: calc(100% + 0.5em);
+        appearance: none;
+        -webkit-appearance: none;
+        outline: none;
+        background-color: transparent;
+      }
+      .range input::-webkit-slider-runnable-track {
+        height: 0.6em;
+      }
+      .range input::-webkit-slider-thumb {
+        z-index: 1;
+        appearance: none;
+        -webkit-appearance: none;
+        position: relative;
+        height: 1.2em;
+        width: 1.2em;
+        margin-top: -0.3em;
+        background-color: var(${cssvar}--input-control);
+        border-radius: 50%;
+        border: solid 0.125em rgba(0, 221, 255, 0.5);
+        box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);
+      }
+    `,
+];
 __decorate([
     query("input")
 ], BaseInput.prototype, "_input", void 0);

package/input-form/exp-input.d.ts

@@ -12,7 +12,7 @@ export declare class ExpInput extends STD {
     offset: string;
     autofocus: boolean;
     _input: HTMLInputElement;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 export default ExpInput;
 declare global {

package/input-form/exp-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exp-input.d.ts","sourceRoot":"","sources":["../../src/input-form/exp-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACnO,qBACa,QAAS,SAAQ,GAAG;IAC/B,MAAM,CAAC,MAAM,4FAwIX;IACU,KAAK,SAAM;IACX,IAAI,SAAM;IACV,GAAG,MAAa;IAChB,IAAI,EAAE,SAAS,GAAG,UAAU,CAAU;IACtC,KAAK,SAAM;IACX,GAAG,SAAM;IACT,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAa;IACpD,MAAM,SAAM;IACK,SAAS,UAAS;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IAC1C,MAAM;CASP;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"exp-input.d.ts","sourceRoot":"","sources":["../../src/input-form/exp-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACnO,qBACa,QAAS,SAAQ,GAAG;IAC/B,MAAM,CAAC,MAAM,4FA+IX;IACU,KAAK,SAAM;IACX,IAAI,SAAM;IACV,GAAG,MAAa;IAChB,IAAI,EAAE,SAAS,GAAG,UAAU,CAAU;IACtC,KAAK,SAAM;IACX,GAAG,SAAM;IACT,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAa;IACpD,MAAM,SAAM;IACK,SAAS,UAAS;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IAC1C,MAAM;CAeP;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/input-form/exp-input.js

@@ -23,150 +23,163 @@ let ExpInput = class ExpInput extends STD {
         var _a;
         if (!this.name)
             this.name = ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || this.type;
-        return html `<div class=${classMap({ [this.base]: true, "no-label": !this.label })}>
-  ${this.type !== "textarea" ? html `<input class="input" required title="" value=${this.value} @input=${this._handleInput} @change=${this._handleChange} type=${this.type} placeholder=${this.pla} >` : html `<textarea class="input" required title="" value=${this.value || this.def} @input=${this._handleInput} placeholder=${this.pla} ></textarea>`}
-  <fieldset>
-    <legend><span>${this.label}</span></legend>
-  </fieldset><style>:valid~fieldset legend,:focus~fieldset legend{margin-left: ${this.offset || 0} !important;}</style>
-</div>`;
+        return html `<div class=${classMap({ [this.base]: true, "no-label": !this.label })}>
+      ${this.type !== "textarea" ? html `<input class="input" required title="" value=${this.value} @input=${this._handleInput} @change=${this._handleChange} type=${this.type} placeholder=${this.pla} />` : html `<textarea class="input" required title="" value=${this.value || this.def} @input=${this._handleInput} placeholder=${this.pla}></textarea>`}
+      <fieldset>
+        <legend><span>${this.label}</span></legend>
+      </fieldset>
+      <style>
+        :valid ~ fieldset legend,
+        :focus ~ fieldset legend {
+          margin-left: ${this.offset || 0} !important;
+        }
+      </style>
+    </div>`;
     }
 };
-ExpInput.styles = [STD.styles, css `
-    :host{
-      line-height: normal;
-      display: inline-block;
-      width: var(${cssvar}--input-width);
-      color: var(${cssvar}--text);
-      border-color: var(${cssvar}--input-outline);
-      border-radius:.2em;
-    }
-    .input:focus {
-      ${cssvar}--input-outline: var(${cssvar}--input-outline-focus) !important;
-    }
-    div:hover {
-      ${cssvar}--input-background: var(${cssvar}--input-background-hover) !important;
-    }
-    .underline::after,.underline::before{
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      margin:auto;
-      bottom: -.1em;
-      width: 100%;
-      height: .18em;
-      bottom:0;
-      border-bottom-left-radius: inherit;
-      border-bottom-right-radius: inherit;
-    }
-    .underline:focus-within::before{
-      z-index:2;
-      width:100%;
-    }
-    .underline::before{width: 0;
-      transition: all .2s;
-      background: var(${cssvar}--input-outline-focus) !important;
-    }
-    .underline::after{
-      background: var(${cssvar}--input-outline);
-    }
-    .underline fieldset {
-      border-color: transparent !important;
-    }
-    .outline fieldset{
-      border-color: inherit !important;
-      border: .18em solid;
-    }
-    .outline .input{
-      padding-left:.18em;
-      padding-right:.18em;
-    }
-    .no-label.filed .input{
-      margin-top:0;
-    }
-    .filed {
-      background: var(${cssvar}--input-background);
-      outline: 0.18em solid var(${cssvar}--input-outline);
-      height: calc(100% - .36em);
-      width: calc(100% - .36em);
-      margin: .18em;
-    }
-    .filed fieldset {
-      border-color: transparent !important;
-      background: transparent !important;
-    }
-    :focus~fieldset,
-    :valid~fieldset {
-      border-color: var(${cssvar}--input-outline-focus);
-    }
-    * {
-      border-radius: inherit;
-      font-size: inherit;
-      font-family: inherit;
-      transition: all .2s,height 0s;
-    }
-    div {
-      border-color: inherit;
-      position: relative;
-      width: 100%;
-      display: inline-flex;
-      min-height:inherit;
-    }
-    textarea.input{
-      resize: vertical;
-      height:1.5em;
-      padding-top:.3em
-    }
-    .input{
-      margin-left:.18em;
-      margin-right:.18em;
-    } 
-    .input {
-      width: 100%;
-      padding-top: .2em;
-      min-height: 1.7em;
-      margin-top: .45em;
-      margin-bottom: .2em;
-      border: 0;
-      box-sizing: border-box;
-      font-size: inherit;
-      outline: 0;
-      background: transparent;
-      z-index: 2;
-      overflow-y: hidden;
-    }
-    fieldset {
-      box-sizing: border-box;
-      position: absolute;
-      background: var(${cssvar}--input-background);
-      pointer-events: none;
-      padding: 0px;
-      position: absolute;
-      height: 100%;
-      margin: 0;
-      width: inherit;
-    }
-    legend span {
-      white-space:nowrap;
-      display: inline-block;
-      padding: 0 .2em;
-      background: var(${cssvar}--input-background);
-      font-size: inherit;      
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    legend {
-      width: 0;
-      height: 1em;
-      transform: translateY(.8em);
-    }
-    .filed span{
-      background:transparent;
-    }
-    :focus+fieldset legend,
-    :valid+fieldset legend {
-      transform: translateY(-.19em) scale(.7);
-    }`
+ExpInput.styles = [
+    STD.styles,
+    css `
+      :host {
+        line-height: normal;
+        display: inline-block;
+        width: var(${cssvar}--input-width);
+        color: var(${cssvar}--text);
+        border-color: var(${cssvar}--input-outline);
+        border-radius: 0.2em;
+      }
+      .input:focus {
+        ${cssvar}--input-outline: var(${cssvar}--input-outline-focus) !important;
+      }
+      div:hover {
+        ${cssvar}--input-background: var(${cssvar}--input-background-hover) !important;
+      }
+      .underline::after,
+      .underline::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        bottom: -0.1em;
+        width: 100%;
+        height: 0.18em;
+        bottom: 0;
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
+      .underline:focus-within::before {
+        z-index: 2;
+        width: 100%;
+      }
+      .underline::before {
+        width: 0;
+        transition: all 0.2s;
+        background: var(${cssvar}--input-outline-focus) !important;
+      }
+      .underline::after {
+        background: var(${cssvar}--input-outline);
+      }
+      .underline fieldset {
+        border-color: transparent !important;
+      }
+      .outline fieldset {
+        border-color: inherit !important;
+        border: 0.18em solid;
+      }
+      .outline .input {
+        padding-left: 0.18em;
+        padding-right: 0.18em;
+      }
+      .no-label.filed .input {
+        margin-top: 0;
+      }
+      .filed {
+        background: var(${cssvar}--input-background);
+        outline: 0.18em solid var(${cssvar}--input-outline);
+        height: calc(100% - 0.36em);
+        width: calc(100% - 0.36em);
+        margin: 0.18em;
+      }
+      .filed fieldset {
+        border-color: transparent !important;
+        background: transparent !important;
+      }
+      :focus ~ fieldset,
+      :valid ~ fieldset {
+        border-color: var(${cssvar}--input-outline-focus);
+      }
+      * {
+        border-radius: inherit;
+        font-size: inherit;
+        font-family: inherit;
+        transition:
+          all 0.2s,
+          height 0s;
+      }
+      div {
+        border-color: inherit;
+        position: relative;
+        width: 100%;
+        display: inline-flex;
+        min-height: inherit;
+      }
+      textarea.input {
+        resize: vertical;
+        height: 1.5em;
+        padding-top: 0.3em;
+      }
+      .input {
+        margin-left: 0.18em;
+        margin-right: 0.18em;
+      }
+      .input {
+        width: 100%;
+        padding-top: 0.2em;
+        min-height: 1.7em;
+        margin-top: 0.45em;
+        margin-bottom: 0.2em;
+        border: 0;
+        box-sizing: border-box;
+        font-size: inherit;
+        outline: 0;
+        background: transparent;
+        z-index: 2;
+        overflow-y: hidden;
+      }
+      fieldset {
+        box-sizing: border-box;
+        position: absolute;
+        background: var(${cssvar}--input-background);
+        pointer-events: none;
+        padding: 0px;
+        position: absolute;
+        height: 100%;
+        margin: 0;
+        width: inherit;
+      }
+      legend span {
+        white-space: nowrap;
+        display: inline-block;
+        padding: 0 0.2em;
+        background: var(${cssvar}--input-background);
+        font-size: inherit;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      legend {
+        width: 0;
+        height: 1em;
+        transform: translateY(0.8em);
+      }
+      .filed span {
+        background: transparent;
+      }
+      :focus + fieldset legend,
+      :valid + fieldset legend {
+        transform: translateY(-0.19em) scale(0.7);
+      }
+    `,
 ];
 __decorate([
     property()

package/input-form/label-input.d.ts

@@ -10,7 +10,7 @@ export declare class LabelInput extends STD {
     autofocus: boolean;
     _input: HTMLInputElement;
     static styles: (import("lit").CSSResult | import("@lit/reactive-element/css-tag.js").CSSResultGroup[])[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     _passwordSwitcher(): void;
 }
 export default LabelInput;

package/input-form/label-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label-input.d.ts","sourceRoot":"","sources":["../../src/input-form/label-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACnO,qBACa,UAAW,SAAQ,GAAG;IACrB,IAAI,EAAE,SAAS,CAAU;IACzB,KAAK,SAAM;IACX,GAAG,SAAM;IACT,GAAG,MAAa;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IACM,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM,CAAC,MAAM,4FAkET;IACJ,MAAM;IAWN,iBAAiB;CAOlB;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"label-input.d.ts","sourceRoot":"","sources":["../../src/input-form/label-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACnO,qBACa,UAAW,SAAQ,GAAG;IACrB,IAAI,EAAE,SAAS,CAAU;IACzB,KAAK,SAAM;IACX,GAAG,SAAM;IACT,GAAG,MAAa;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IACM,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM,CAAC,MAAM,4FAsEX;IACF,MAAM;IAoBN,iBAAiB;CAOlB;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}