@operato/input 2.0.0-alpha.0 → 2.0.0-alpha.100

package/src/ox-input-data.ts

@@ -4,11 +4,13 @@
 
 import './ox-input-code'
 
-import { css, html, PropertyValues } from 'lit'
+import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
+import { isEqual } from 'lodash-es'
 
 /**
 WEB Component for code-mirror based data editor.
@@ -36,7 +38,7 @@ export class OxInputData extends OxFormField {
         font-size: small;
       }
 
-      div[datatype] mwc-icon {
+      div[datatype] md-icon {
         margin-left: auto;
       }
 
@@ -49,38 +51,56 @@ export class OxInputData extends OxFormField {
   ]
 
   render() {
+    const valueType = typeof this.value
+
     return html`
       <div datatype>
         <input
+          id="string"
           type="radio"
           name="data-type"
           data-value="string"
-          .checked=${typeof this.value == 'string'}
+          .checked=${live(valueType == 'string')}
           @click=${() => this._setDataType('string')}
           ?disabled=${this.disabled}
-        />string
+        />
+        <label for="string">string</label>
 
         <input
+          id="number"
           type="radio"
           name="data-type"
           data-value="number"
-          .checked=${typeof this.value == 'number'}
+          .checked=${live(valueType == 'number')}
           @click=${() => this._setDataType('number')}
           ?disabled=${this.disabled}
-        />number
+        />
+        <label for="number">number</label>
 
         <input
+          id="object"
           type="radio"
           name="data-type"
           data-value="object"
-          .checked=${typeof this.value == 'object'}
+          .checked=${live(valueType == 'object')}
           @click=${() => this._setDataType('object')}
           ?disabled=${this.disabled}
-        />object
-        <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
+        />
+        <label for="object">object</label>
+
+        <md-icon @click=${() => this._clearData()} title="delete">delete_forever</md-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code
+        .value=${this._getStringData(this.value)}
+        language="text"
+        editor
+        ?disabled=${this.disabled}
+        @change=${(e: CustomEvent) => {
+          e.stopPropagation()
+          this._setDataTypeAndValue(valueType, (e.target as any).value)
+        }}
+      >
       </ox-input-code>
     `
   }
@@ -88,45 +108,75 @@ export class OxInputData extends OxFormField {
   firstUpdated() {
     this.renderRoot.addEventListener('change', e => {
       e.stopPropagation()
+
       const target = e.target as OxInputCode
       if (target.hasAttribute('editor')) {
+        if (this.value === undefined && target.value == '') {
+          return
+        }
         this.value = target.value
       }
-
-      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')
-      this._setDataType(type)
     })
   }
 
-  udpated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.value = this._getData(this.value)
+  _setDataTypeAndValue(type: string | undefined | null, value: any) {
+    /* value must be a string */
+    try {
+      switch (type) {
+        case 'number':
+          if (!isNaN(Number(value))) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
+      }
+    } catch (e) {}
+
+    if (isEqual(this.value, value)) {
+      return
     }
+
+    this.value = value
+
+    this.requestUpdate()
+    this._onAfterValueChange()
   }
 
   _setDataType(type: string | undefined | null) {
-    if (typeof this.value !== type) {
-      var value = this.value
-
-      try {
-        switch (type) {
-          case 'string':
-            this.value = String(value || '')
-            break
-          case 'number':
-            if (!isNaN(value)) {
-              this.value = Number(value)
-            }
-            break
-          case 'object':
-            this.value = eval('(' + value + ')')
-            break
-        }
-      } catch (e) {
-        console.log(e)
+    if (typeof this.value == type) {
+      return
+    }
+
+    var value = this.value
+
+    try {
+      switch (type) {
+        case 'string':
+          value = this._getStringData(value)
+          break
+        case 'number':
+          if (!isNaN(value)) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
       }
+    } catch (e) {
+      console.log(e)
     }
 
+    if (isEqual(this.value, value)) {
+      this.requestUpdate()
+      return
+    }
+
+    this.value = value
+
+    this.requestUpdate()
     this._onAfterValueChange()
   }
 
@@ -135,11 +185,20 @@ export class OxInputData extends OxFormField {
     this._onAfterValueChange()
   }
 
-  _getData(data: any) {
-    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
+  _getStringData(data: any) {
+    const type = typeof data
+
+    switch (type) {
+      case 'object':
+        return JSON.stringify(data, null, 1)
+      case 'undefined':
+        return ''
+      default:
+        return String(data) || ''
+    }
   }
 
-  _onAfterValueChange() {
+  async _onAfterValueChange() {
     this.dispatchEvent(
       new CustomEvent('change', {
         bubbles: true,

package/src/ox-input-duration.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
@@ -28,9 +26,14 @@ export class OxInputDuration extends OxFormField {
     }
 
     form {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+    }
+
+    [padding] {
+      min-width: 100px;
     }
 
     input {
@@ -65,18 +68,16 @@ export class OxInputDuration extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       min-height: 35px;
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
     }
+
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -100,6 +101,7 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
+        <div padding></div>
         <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
@@ -148,8 +150,9 @@ export class OxInputDuration extends OxFormField {
           }}
           ?disabled=${this.disabled}
         >
-          <mwc-icon>backspace</mwc-icon>
+          <md-icon>backspace</md-icon>
         </button>
+        <div padding></div>
       </form>
     `
   }

package/src/ox-input-file.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -32,9 +32,10 @@ export class OxInputFile extends OxFormField {
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }
-      :host > mwc-icon {
+
+      :host > md-icon {
         color: var(--file-uploader-icon-color);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
       :host(.candrop) {
@@ -75,14 +76,14 @@ export class OxInputFile extends OxFormField {
         border-bottom: var(--file-uploader-li-border-bottom);
         font: normal 14px var(--theme-font);
       }
-      li mwc-icon {
+      li md-icon {
         float: right;
         cursor: pointer;
         margin: var(--file-uploader-li-icon-margin);
         font-size: 1em;
       }
-      li mwc-icon:hover,
-      li mwc-icon:active {
+      li md-icon:hover,
+      li md-icon:active {
         color: var(--file-uploader-li-icon-focus-color);
       }
     `
@@ -104,7 +105,7 @@ export class OxInputFile extends OxFormField {
     var files: File[] = this.value || []
 
     return html`
-      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
+      <md-icon>${this.icon || 'upload'}</md-icon>
 
       <span>${this.description || 'drop files here!'}</span>
 
@@ -127,7 +128,7 @@ export class OxInputFile extends OxFormField {
               file => html`
                 <li>
                   - ${file.name}
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       if (this.disabled) {
                         return
@@ -136,7 +137,7 @@ export class OxInputFile extends OxFormField {
                       this.value = [...files]
                       this._notifyChange()
                     }}
-                    >delete_outline</mwc-icon
+                    >delete_outline</md-icon
                   >
                 </li>
               `

package/src/ox-input-i18n-label.ts

@@ -0,0 +1,140 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type I18nLabel = { [code: string]: string }
+
+const LANGUAGES = [
+  {
+    code: 'en',
+    display: 'English'
+  }
+]
+
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label 
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+@customElement('ox-input-i18n-label')
+export class OxInputI18nLabels extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      gap: 10px;
+    }
+
+    [data-record] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 10px;
+    }
+
+    label {
+      width: 80px;
+      text-align: end;
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      min-width: 100px;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input[type='hidden'] {
+      flex: 0;
+    }
+  `
+
+  @property({ type: Object }) value: I18nLabel = {}
+  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  private changing: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onChange.bind(this))
+  }
+
+  render() {
+    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
+    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES
+
+    return html`
+      ${languages.map(
+        ({ display, code }) => html`
+          <div data-record>
+            <label>${display}</label>
+            <input type="hidden" data-code value=${code} />
+            <input
+              type="text"
+              data-label
+              placeholder="label"
+              .value=${value?.[code] || ''}
+              ?disabled=${this.disabled}
+            />
+          </div>
+        `
+      )}
+    `
+  }
+
+  private onChange(e: Event) {
+    e.stopPropagation()
+
+    if (this.changing) {
+      return
+    }
+
+    this.changing = true
+
+    this.build()
+
+    this.changing = false
+  }
+
+  private build() {
+    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+
+    var newmap: I18nLabel = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const code = (record.querySelector('[data-code]') as HTMLInputElement).value
+      const label = (record.querySelector('[data-label]') as HTMLInputElement).value
+
+      if (code) {
+        newmap[code] = label || ''
+      }
+    }
+
+    this.value = { ...this.value, ...newmap }
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/ox-input-image.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
@@ -76,11 +76,11 @@ export class OxInputImage extends OxFormField {
         place-content: center;
       }
 
-      mwc-icon {
+      md-icon {
         align-self: center;
 
         color: var(--file-uploader-icon-color, black);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
     `
   ]
@@ -118,7 +118,7 @@ export class OxInputImage extends OxFormField {
             @change=${(e: Event) => this._onChangeValue(e)}
             ?disabled=${this.disabled}
           />
-          <mwc-icon>upload</mwc-icon>
+          <md-icon>upload</md-icon>
         </label>
       </div>
     `

package/src/ox-input-key-values.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
@@ -29,6 +29,8 @@ export class OxInputKeyValues extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: 14px;
     }
 
     div {
@@ -50,9 +52,6 @@ export class OxInputKeyValues extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -112,7 +111,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button
               class="record-action"
@@ -120,7 +119,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button
               class="record-action"
@@ -128,7 +127,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -140,10 +139,10 @@ export class OxInputKeyValues extends OxFormField {
               <input type="text" data-key placeholder="key" value="" />
               <input type="text" data-value placeholder="value" value="" list="value-template" />
               <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
             </div>
           `}
 
@@ -260,13 +259,16 @@ export class OxInputKeyValues extends OxFormField {
     const deleted = array.splice(index, 1)
     array.splice(index + 1, 0, ...deleted)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
@@ -283,13 +285,16 @@ export class OxInputKeyValues extends OxFormField {
     array.splice(index, 1)
     array.splice(index + 1, 0, record)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }