@operato/input 1.14.3 → 1.17.5

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.17.5](https://github.com/hatiolab/operato/compare/v1.17.4...v1.17.5) (2024-03-18)
+
+
+### :bug: Bug Fix
+
+* multilingual common-code ([339ef8d](https://github.com/hatiolab/operato/commit/339ef8d38feb6e1384eeb8d0622e2c627808d828))
+* multilingual common-code ([5ff959d](https://github.com/hatiolab/operato/commit/5ff959db975313ebc2af40d3e9e9e0ad51e5cc53))
+
+
+
+### [1.17.2](https://github.com/hatiolab/operato/compare/v1.17.1...v1.17.2) (2024-02-28)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ### [1.14.3](https://github.com/hatiolab/operato/compare/v1.14.2...v1.14.3) (2024-02-05)
 
 

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

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import { OxFormField } from './ox-form-field';
+type I18nLabel = {
+    [code: string]: string;
+};
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+export declare class OxInputI18nLabels extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: I18nLabel;
+    languages: {
+        display: string;
+        code: string;
+    }[];
+    records: NodeListOf<HTMLElement>;
+    private changing;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private onChange;
+    private build;
+}
+export {};

package/dist/src/ox-input-i18n-label.js

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import { css, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+const LANGUAGES = [
+    {
+        code: 'en',
+        display: 'English'
+    }
+];
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+let OxInputI18nLabels = class OxInputI18nLabels extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.languages = LANGUAGES;
+        this.changing = false;
+    }
+    static { this.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;
+    }
+  `; }
+    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>
+        `)}
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        if (this.changing) {
+            return;
+        }
+        this.changing = true;
+        this.build();
+        this.changing = false;
+    }
+    build() {
+        var records = this.renderRoot.querySelectorAll('[data-record]');
+        var newmap = {};
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            const code = record.querySelector('[data-code]').value;
+            const label = record.querySelector('[data-label]').value;
+            if (code) {
+                newmap[code] = label || '';
+            }
+        }
+        this.value = { ...this.value, ...newmap };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputI18nLabels.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], OxInputI18nLabels.prototype, "languages", void 0);
+__decorate([
+    queryAll('[data-record]')
+], OxInputI18nLabels.prototype, "records", void 0);
+OxInputI18nLabels = __decorate([
+    customElement('ox-input-i18n-label')
+], OxInputI18nLabels);
+export { OxInputI18nLabels };
+//# sourceMappingURL=ox-input-i18n-label.js.map

package/dist/src/ox-input-i18n-label.js.map

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

package/dist/stories/ox-input-i18n-label.stories.d.ts

@@ -0,0 +1,29 @@
+import '../src/ox-input-i18n-label.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: object;
+    disabled?: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-i18n-label.stories.js

@@ -0,0 +1,58 @@
+import '../src/ox-input-i18n-label.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-i18n-label',
+    component: 'ox-input-i18n-label',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'object' },
+        disabled: { control: 'boolean' }
+    }
+};
+const Template = ({ name = 'values', value = {}, disabled }) => 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) => {
+    console.log(e.target.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'
+    }
+};
+//# sourceMappingURL=ox-input-i18n-label.stories.js.map

package/dist/stories/ox-input-i18n-label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-i18n-label.stories.js","sourceRoot":"","sources":["../../stories/ox-input-i18n-label.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASjF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;iBACD;IACX;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,UAAU;KACpB;CACF;gBACW,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,YAAY;KACjB;CACF,CAAA","sourcesContent":["import '../src/ox-input-i18n-label.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-i18n-label',\n  component: 'ox-input-i18n-label',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'values', value = {}, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-i18n-label\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .languages=${[\n      {\n        code: 'ko',\n        display: '한글'\n      },\n      {\n        code: 'en',\n        display: 'English'\n      },\n      {\n        code: 'zh',\n        display: 'Chinese'\n      },\n      {\n        code: 'ja',\n        display: 'Japanese'\n      }\n    ]}\n    ?disabled=${disabled}\n  >\n  </ox-input-i18n-label>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'i18n labels',\n  value: {\n    ko: '한글 코드',\n    en: 'English code',\n    zh: 'Chinese code',\n    ja: 'Japan code'\n  }\n}\n"]}