@operato/input 1.2.10 → 1.2.25

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.2.10",
+  "version": "1.2.25",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -50,6 +50,109 @@
     "./ox-input-hashtags.js": "./dist/src/ox-input-hashtags.js",
     "./ox-input-mass-fraction.js": "./dist/src/ox-input-mass-fraction.js"
   },
+  "typesVersions": {
+    "*": {
+      "./ox-form-field.js": [
+        "./dist/src/ox-form-field.d.ts"
+      ],
+      "./ox-checkbox.js": [
+        "./dist/src/ox-checkbox.d.ts"
+      ],
+      "./ox-buttons-radio.js": [
+        "./dist/src/ox-buttons-radio.d.ts"
+      ],
+      "./ox-input-3dish.js": [
+        "./dist/src/ox-input-3dish.d.ts"
+      ],
+      "./ox-input-unit-number.js": [
+        "./dist/src/ox-input-unit-number.d.ts"
+      ],
+      "./ox-input-angle.js": [
+        "./dist/src/ox-input-angle.d.ts"
+      ],
+      "./ox-input-barcode.js": [
+        "./dist/src/ox-input-barcode.d.ts"
+      ],
+      "./ox-input-code.js": [
+        "./dist/src/ox-input-code.d.ts"
+      ],
+      "./ox-input-color.js": [
+        "./dist/src/ox-input-color.d.ts"
+      ],
+      "./ox-input-multiple-colors.js": [
+        "./dist/src/ox-input-multiple-colors.d.ts"
+      ],
+      "./ox-input-color-stops.js": [
+        "./dist/src/ox-input-color-stops.d.ts"
+      ],
+      "./ox-input-color-gradient.js": [
+        "./dist/src/ox-input-color-gradient.d.ts"
+      ],
+      "./ox-input-crontab.js": [
+        "./dist/src/ox-input-crontab.d.ts"
+      ],
+      "./ox-input-data.js": [
+        "./dist/src/ox-input-data.d.ts"
+      ],
+      "./ox-input-duration.js": [
+        "./dist/src/ox-input-duration.d.ts"
+      ],
+      "./ox-input-quantifier.js": [
+        "./dist/src/ox-input-quantifier.d.ts"
+      ],
+      "./ox-input-stack.js": [
+        "./dist/src/ox-input-stack.d.ts"
+      ],
+      "./ox-input-range.js": [
+        "./dist/src/ox-input-range.d.ts"
+      ],
+      "./ox-input-key-values.js": [
+        "./dist/src/ox-input-key-values.d.ts"
+      ],
+      "./ox-select.js": [
+        "./dist/src/ox-select.d.ts"
+      ],
+      "./ox-input-file.js": [
+        "./dist/src/ox-input-file.d.ts"
+      ],
+      "./ox-input-image.js": [
+        "./dist/src/ox-input-image.d.ts"
+      ],
+      "./ox-input-options.js": [
+        "./dist/src/ox-input-options.d.ts"
+      ],
+      "./ox-input-select-buttons.js": [
+        "./dist/src/ox-input-select-buttons.d.ts"
+      ],
+      "./ox-input-search.js": [
+        "./dist/src/ox-input-search.d.ts"
+      ],
+      "./ox-input-value-map.js": [
+        "./dist/src/ox-input-value-map.d.ts"
+      ],
+      "./ox-input-value-ranges.js": [
+        "./dist/src/ox-input-value-ranges.d.ts"
+      ],
+      "./ox-input-partition-keys.js": [
+        "./dist/src/ox-input-partition-keys.d.ts"
+      ],
+      "./ox-input-table.js": [
+        "./dist/src/ox-input-table.d.ts"
+      ],
+      "./ox-input-scene-component-id.js": [
+        "./dist/src/ox-input-scene-component-id.d.ts"
+      ],
+      "./ox-input-work-shift.js": [
+        "./dist/src/ox-input-work-shift.d.ts"
+      ],
+      "./ox-input-hashtags.js": [
+        "./dist/src/ox-input-hashtags.d.ts"
+      ],
+      "./ox-input-mass-fraction.js": [
+        "./dist/src/ox-input-mass-fraction.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "clean": "npx rimraf dist",
     "analyze": "cem analyze --litelement",
@@ -68,9 +171,9 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/color-picker": "^1.2.0",
     "@operato/i18n": "^1.2.0",
-    "@operato/popup": "^1.2.10",
+    "@operato/popup": "^1.2.11",
     "@operato/styles": "^1.2.0",
-    "@operato/utils": "^1.2.4",
+    "@operato/utils": "^1.2.11",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -116,5 +219,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "747fe62f88beeab1fe5ac58f06dfbf06c1ccd988"
+  "gitHead": "73998868ecf0925a0691da776f8fd6df40e7a554"
 }

package/src/ox-input-value-map.ts

@@ -6,6 +6,8 @@ import './ox-input-color'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { OxFormField } from './ox-form-field'
 
@@ -72,10 +74,11 @@ export class OxInputValueMap extends OxFormField {
       color: var(--theme-white-color);
     }
 
-    input,
-    ox-input-color {
+    [data-key],
+    [data-value] {
       flex: 1;
     }
+
     input {
       border: 0;
       border-bottom: var(--border-dark-color);
@@ -83,10 +86,12 @@ export class OxInputValueMap extends OxFormField {
       font: var(--input-font);
       color: var(--primary-text-color);
     }
+
     input:focus {
       outline: none;
       border-bottom: 1px solid var(--primary-color);
     }
+
     button.hidden {
       opacity: 0;
       cursor: default;
@@ -103,6 +108,7 @@ export class OxInputValueMap extends OxFormField {
     }
 
     input[type='checkbox'] {
+      flex: none;
       width: initial;
     }
   `
@@ -117,72 +123,61 @@ export class OxInputValueMap extends OxFormField {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
   }
 
+  updated() {
+    const inputs = this.renderRoot.querySelectorAll('[data-record-new] > :not([style*="display: none"])') as NodeListOf<
+      HTMLInputElement & { value: any }
+    >
+
+    inputs[0].focus()
+  }
+
+  valueInputTemplate(value?: any) {
+    return this.valuetype == 'boolean'
+      ? html` <input type="checkbox" data-value .checked=${!!value} data-value-type=${this.valuetype} /> `
+      : this.valuetype == 'color'
+      ? html` <ox-input-color data-value value=${ifDefined(value)}> </ox-input-color> `
+      : html`
+          <input
+            type="text"
+            data-value
+            placeholder="value"
+            value=${ifDefined(value)}
+            data-value-type=${this.valuetype}
+          />
+        `
+  }
+
   render() {
     return html`
       ${this._toArray(this.value).map(
         item => html`
           <div data-record>
             <input type="text" data-key placeholder="key" .value=${item.key} />
-            ${this.valuetype == 'boolean'
-              ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
-              : this.valuetype == 'color'
-              ? html` <ox-input-color data-value .value=${item.value} tabindex="-1"> </ox-input-color> `
-              : html`
-                  <input
-                    type="text"
-                    data-value
-                    placeholder="value"
-                    .value=${item.value}
-                    data-value-type=${this.valuetype}
-                  />
-                `}
+            ${this.valueInputTemplate(item.value)}
             <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-
-      <div data-record-new>
-        <input type="text" data-key placeholder="key" value="" /> ${this.valuetype == 'boolean'
-          ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
-          : this.valuetype == 'color'
-          ? html` <ox-input-color data-value value="" tabindex="-1" placeholder="value"> </ox-input-color> `
-          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-      </div>
+      ${keyed(
+        Date.now(),
+        html`
+          <div data-record-new>
+            <input type="text" data-key placeholder="key" value="" />
+
+            ${this.valueInputTemplate()}
+            <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+              <mwc-icon>add</mwc-icon>
+            </button>
+          </div>
+        `
+      )}
 
       <div data-record>
-        <input type="text" data-key data-default="" value="default" disabled /> ${this.valuetype == 'boolean'
-          ? html`
-              <input
-                type="checkbox"
-                data-value
-                .checked=${this.value && this.value.default}
-                data-value-type=${this.valuetype}
-              />
-            `
-          : this.valuetype == 'color'
-          ? html`
-              <ox-input-color
-                data-value
-                .value=${(this.value && this.value.default) || ''}
-                placeholder="value"
-                tabindex="-1"
-              >
-              </ox-input-color>
-            `
-          : html`
-              <input
-                type="text"
-                data-value
-                placeholder="value"
-                .value=${(this.value && this.value.default) || ''}
-                data-value-type=${this.valuetype}
-              />
-            `}
+        <input type="text" data-key data-default="" value="default" disabled />
+
+        ${this.valueInputTemplate(this.value && this.value.default)}
         <button class="record-action" @click=${() => this._sort()} tabindex="-1">
           <mwc-icon>chevron_right</mwc-icon>
         </button>
@@ -220,7 +215,7 @@ export class OxInputValueMap extends OxFormField {
 
     const div = input.parentElement as HTMLDivElement
 
-    if (div.hasAttribute('data-record')) {
+    if (div.hasAttribute('data-record') && input.hasAttribute('data-value')) {
       var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLElement & { value: any }>
 
       for (var i = 0; i < dataList.length; i++) {
@@ -276,6 +271,7 @@ export class OxInputValueMap extends OxFormField {
     }
 
     this.value = newmap
+
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
 
@@ -319,19 +315,6 @@ export class OxInputValueMap extends OxFormField {
 
   _add() {
     this._build(true)
-
-    const inputs = this.renderRoot.querySelectorAll(
-      '[data-record-new] input:not([style*="display: none"])'
-    ) as NodeListOf<HTMLInputElement & { value: any }>
-
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-
-      if (input.type == 'checkbox') input.checked = false
-      else input.value = this._defaultValue(input.type)
-    }
-
-    inputs[0].focus()
   }
 
   _delete(e: MouseEvent) {

package/src/ox-input-value-ranges.ts

@@ -6,6 +6,8 @@ import './ox-input-color'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { OxFormField } from './ox-form-field.js'
 
@@ -72,10 +74,15 @@ export class OxInputValueRange extends OxFormField {
       color: var(--theme-white-color);
     }
 
-    input,
-    ox-input-color {
+    [data-from],
+    [data-to] {
       flex: 1;
     }
+
+    [data-value] {
+      flex: 2;
+    }
+
     input {
       border: 0;
       border-bottom: var(--border-dark-color);
@@ -83,10 +90,12 @@ export class OxInputValueRange extends OxFormField {
       font: var(--input-font);
       color: var(--primary-text-color);
     }
+
     input:focus {
       outline: none;
       border-bottom: 1px solid var(--primary-color);
     }
+
     button.hidden {
       opacity: 0;
       cursor: default;
@@ -108,6 +117,7 @@ export class OxInputValueRange extends OxFormField {
     }
 
     input[type='checkbox'] {
+      flex: none;
       width: initial;
     }
   `
@@ -122,6 +132,30 @@ export class OxInputValueRange extends OxFormField {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
   }
 
+  updated() {
+    const inputs = this.renderRoot.querySelectorAll('[data-record-new] > :not([style*="display: none"])') as NodeListOf<
+      HTMLInputElement & { value: any }
+    >
+
+    inputs[0].focus()
+  }
+
+  valueInputTemplate(value?: any) {
+    return this.valuetype == 'boolean'
+      ? html` <input type="checkbox" data-value .checked=${!!value} data-value-type=${this.valuetype} /> `
+      : this.valuetype == 'color'
+      ? html` <ox-input-color data-value value=${ifDefined(value)}> </ox-input-color> `
+      : html`
+          <input
+            type="text"
+            data-value
+            placeholder="value"
+            value=${ifDefined(value)}
+            data-value-type=${this.valuetype}
+          />
+        `
+  }
+
   render() {
     return html`
       ${this._toArray(this.value).map(
@@ -130,68 +164,33 @@ export class OxInputValueRange extends OxFormField {
             <input type="text" data-from placeholder="<=" .value=${item.from} />
             <input type="text" data-to placeholder="&gt;" .value=${item.to} />
 
-            ${this.valuetype == 'boolean'
-              ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
-              : this.valuetype == 'color'
-              ? html` <ox-input-color data-value .value=${item.value}> </ox-input-color> `
-              : html`
-                  <input
-                    type="text"
-                    data-value
-                    placeholder="value"
-                    .value=${item.value}
-                    data-value-type=${this.valuetype}
-                  />
-                `}
+            ${this.valueInputTemplate(item.value)}
             <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-
-      <div data-record-new>
-        <input type="text" data-from placeholder="<=" value="" />
-        <input type="text" data-to placeholder="&gt;" value="" />
-
-        ${this.valuetype == 'boolean'
-          ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
-          : this.valuetype == 'color'
-          ? html` <ox-input-color data-value value="" placeholder="value"> </ox-input-color> `
-          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-      </div>
+      ${keyed(
+        Date.now(),
+        html`
+          <div data-record-new>
+            <input type="text" data-from placeholder="<=" value="" />
+            <input type="text" data-to placeholder="&gt;" value="" />
+
+            ${this.valueInputTemplate()}
+            <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+              <mwc-icon>add</mwc-icon>
+            </button>
+          </div>
+        `
+      )}
 
       <div data-record>
         <input type="text" data-from data-default="" disabled value="default" />
         <input type="text" data-to placeholder="&gt;" value="" hidden />
 
-        ${this.valuetype == 'boolean'
-          ? html`
-              <input
-                type="checkbox"
-                data-value
-                .checked=${this.value && this.value.default}
-                data-value-type=${this.valuetype}
-              />
-            `
-          : this.valuetype == 'color'
-          ? html`
-              <ox-input-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
-              </ox-input-color>
-            `
-          : html`
-              <input
-                type="text"
-                data-value
-                .value=${(this.value && this.value.default) || ''}
-                placeholder="value"
-                class="default-value"
-                data-value-type=${this.valuetype}
-              />
-            `}
+        ${this.valueInputTemplate(this.value && this.value.default)}
         <button class="record-action" @click=${(e: Event) => this._sort()}><mwc-icon>chevron_right</mwc-icon></button>
       </div>
     `
@@ -220,7 +219,7 @@ export class OxInputValueRange extends OxFormField {
     var value = input.type === 'checkbox' ? Boolean(input.checked) : input.value
 
     const div = input.parentElement as HTMLDivElement
-    if (input.hasAttribute('data-value')) {
+    if (input.hasAttribute('data-value') && input.hasAttribute('data-value')) {
       const dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLElement & { value: any }>
 
       for (var i = 0; i < dataList.length; i++) {
@@ -260,6 +259,7 @@ export class OxInputValueRange extends OxFormField {
       }
 
       var input = inputs[inputs.length - 1]
+
       var value
 
       if (input.type == 'checkbox') {
@@ -324,21 +324,6 @@ export class OxInputValueRange extends OxFormField {
 
   _add() {
     this._build(true)
-
-    const inputs = this.renderRoot.querySelectorAll(
-      '[data-record-new] input:not([style*="display: none"])'
-    ) as NodeListOf<HTMLInputElement & { value: any; type: string }>
-
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-      if (input.type == 'checkbox') {
-        input.checked = false
-      } else {
-        input.value = this._defaultValue(input.type)
-      }
-    }
-
-    inputs[0].focus()
   }
 
   _delete(e: Event) {