@operato/input 1.17.2 → 1.17.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.17.2",
+  "version": "1.17.7",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "./ox-input-search.js": "./dist/src/ox-input-search.js",
     "./ox-input-value-map.js": "./dist/src/ox-input-value-map.js",
     "./ox-input-value-ranges.js": "./dist/src/ox-input-value-ranges.js",
+    "./ox-input-i18n-label.js": "./dist/src/ox-input-i18n-label.js",
     "./ox-input-partition-keys.js": "./dist/src/ox-input-partition-keys.js",
     "./ox-input-table.js": "./dist/src/ox-input-table.js",
     "./ox-input-scene-component-id.js": "./dist/src/ox-input-scene-component-id.js",
@@ -143,6 +144,9 @@
       "./ox-input-value-ranges.js": [
         "./dist/src/ox-input-value-ranges.d.ts"
       ],
+      "./ox-input-i18n-label.js": [
+        "./dist/src/ox-input-i18n-label.d.ts"
+      ],
       "./ox-input-partition-keys.js": [
         "./dist/src/ox-input-partition-keys.d.ts"
       ],
@@ -193,8 +197,8 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/color-picker": "^1.4.64",
     "@operato/i18n": "^1.5.14",
-    "@operato/popup": "^1.17.2",
-    "@operato/styles": "^1.12.3",
+    "@operato/popup": "^1.17.7",
+    "@operato/styles": "^1.17.7",
     "@operato/utils": "^1.13.9",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -239,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "953573e87b156ac2ce143009555fb2ec4f1162ee"
+  "gitHead": "4634d814f460d11dc5dcf5b765664e1c68db38ca"
 }

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

@@ -0,0 +1,139 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+
+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;
+    }
+
+    [data-record] {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
+
+    label {
+      width: 80px;
+      align-self: center;
+      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/stories/ox-input-i18n-label.stories.ts

@@ -0,0 +1,73 @@
+import '../src/ox-input-i18n-label.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-i18n-label',
+  component: 'ox-input-i18n-label',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'values', value = {}, disabled }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-i18n-label
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .languages=${[
+      {
+        code: 'ko',
+        display: '한글'
+      },
+      {
+        code: 'en',
+        display: 'English'
+      },
+      {
+        code: 'zh',
+        display: 'Chinese'
+      },
+      {
+        code: 'ja',
+        display: 'Japanese'
+      }
+    ]}
+    ?disabled=${disabled}
+  >
+  </ox-input-i18n-label>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'i18n labels',
+  value: {
+    ko: '한글 코드',
+    en: 'English code',
+    zh: 'Chinese code',
+    ja: 'Japan code'
+  }
+}