@operato/attribute 1.2.41

package/dist/src/ox-attribute-form.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxAttributeForm = class OxAttributeForm extends LitElement {
+    render() {
+        var _a, _b;
+        return html ` <form @change=${(e) => this.onChange(e)}>
+      <h2>${((_a = this.attributeSet) === null || _a === void 0 ? void 0 : _a.entity) || ''}</h2>
+      <h3>${((_b = this.attributeSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
+      ${this.buildInputs()}
+    </form>`;
+    }
+    onChange(e) {
+        this.value = this.buildValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+    buildInputs() {
+        var _a;
+        const items = (_a = this.attributeSet) === null || _a === void 0 ? void 0 : _a.items.filter(item => item.active);
+        return (items || []).map(item => {
+            const { name, description, tag, type, options = {} } = item;
+            const value = this.value && this.value[tag];
+            switch (type) {
+                case 'select':
+                    var element = html ` <select .name=${tag}>
+            <option value=""></option>
+            ${(options.options || []).map(option => html `<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`)}
+          </select>`;
+                    break;
+                case 'boolean':
+                    var element = html ` <input type="checkbox" name=${tag} .checked=${value} />`;
+                    break;
+                case 'number':
+                    var element = html ` <input type="number" name=${tag} value=${value} />`;
+                    break;
+                case 'date':
+                    var element = html ` <input type="date" name=${tag} value=${value} />`;
+                    break;
+                case 'datetime':
+                    var element = html ` <input type="datetime-local" name=${tag} value=${value} />`;
+                    break;
+                case 'file':
+                    var element = html `<ox-input-file
+            name=${tag}
+            label="Attach Files"
+            accept="*/*"
+            multiple="true"
+            hide-filelist
+          ></ox-input-file>`;
+                case 'string':
+                default:
+                    var element = html ` <input type="text" name=${tag} value=${value} />`;
+            }
+            return html ` <label .title=${description}>
+        <div name>${name}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div elements>${element}</div>
+      </label>`;
+        });
+    }
+    buildValue() {
+        const items = this.attributeSet.items;
+        return (items || []).reduce((sum, item) => {
+            const { tag, type } = item;
+            const editors = Array.prototype.slice.call(this.renderRoot.querySelectorAll(`[name=${tag}]`));
+            if (editors.length > 0) {
+                sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
+            }
+            return sum;
+        }, {});
+    }
+};
+OxAttributeForm.styles = css `
+    :host {
+      display: flex;
+      flex-direction: row;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    form {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      display: grid;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+
+    label:nth-child(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-area: name;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+
+    div[description] * {
+      vertical-align: middle;
+    }
+
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
+
+    div[elements] {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    div[elements] * {
+      flex: 1;
+    }
+
+    div[elements] input,
+    div[elements] select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
+      }
+
+      div[name] {
+        text-align: left;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxAttributeForm.prototype, "attributeSet", void 0);
+__decorate([
+    property({ type: Object })
+], OxAttributeForm.prototype, "value", void 0);
+OxAttributeForm = __decorate([
+    customElement('ox-attribute-form')
+], OxAttributeForm);
+export { OxAttributeForm };
+//# sourceMappingURL=ox-attribute-form.js.map

package/dist/src/ox-attribute-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attribute-form.js","sourceRoot":"","sources":["../../src/ox-attribute-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-form')\nexport class OxAttributeForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n\n    label:nth-child(odd) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n\n    div[description] * {\n      vertical-align: middle;\n    }\n\n    div[description] mwc-icon {\n      margin-top: -3px;\n      font-size: 0.9rem;\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    div[elements] * {\n      flex: 1;\n    }\n\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--margin-default);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html` <form @change=${(e: Event) => this.onChange(e)}>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildInputs()}\n    </form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const items = this.attributeSet?.items.filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag}>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} />`\n          break\n\n        case 'date':\n          var element = html` <input type=\"date\" name=${tag} value=${value} />`\n          break\n\n        case 'datetime':\n          var element = html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n          ></ox-input-file>`\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const items = this.attributeSet!.items\n\n    return (items || []).reduce((sum, item) => {\n      const { tag, type } = item\n\n      const editors = Array.prototype.slice.call(\n        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n      ) as HTMLInputElement[]\n\n      if (editors.length > 0) {\n        sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n      }\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}

package/dist/src/ox-attribute-view.d.ts

@@ -0,0 +1,12 @@
+import '@operato/input/ox-input-file.js';
+import { LitElement } from 'lit';
+import { AttributeSet } from './types.js';
+export declare class OxAttributeView extends LitElement {
+    static styles: import("lit").CSSResult;
+    attributeSet?: AttributeSet;
+    value?: {
+        [tag: string]: any;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    private buildEntryViews;
+}

package/dist/src/ox-attribute-view.js

@@ -0,0 +1,176 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxAttributeView = class OxAttributeView extends LitElement {
+    render() {
+        var _a, _b;
+        return html `<form>
+      <h2>${((_a = this.attributeSet) === null || _a === void 0 ? void 0 : _a.entity) || ''}</h2>
+      <h3>${((_b = this.attributeSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
+      ${this.buildEntryViews()}
+    </form> `;
+    }
+    buildEntryViews() {
+        var _a;
+        const items = (_a = this.attributeSet) === null || _a === void 0 ? void 0 : _a.items.filter(item => item.active);
+        return (items || []).map(item => {
+            const { name, description, tag, type, options = {} } = item;
+            const value = this.value && this.value[tag];
+            switch (type) {
+                case 'select':
+                    var element = html ` <select .name=${tag} disabled>
+            <option value=""></option>
+            ${(options.options || []).map(option => html `<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`)}
+          </select>`;
+                    break;
+                case 'boolean':
+                    var element = html ` <input type="checkbox" name=${tag} .checked=${value} disabled />`;
+                    break;
+                case 'number':
+                    var element = html ` <input type="number" name=${tag} value=${value} disabled />`;
+                    break;
+                case 'file':
+                    var element = html `<ox-input-file
+            name=${tag}
+            label="Attach Files"
+            accept="*/*"
+            multiple="true"
+            hide-filelist
+            disabled
+          ></ox-input-file>`;
+                case 'string':
+                default:
+                    var element = html ` <input type="text" name=${tag} value=${value} disabled />`;
+            }
+            return html ` <label .title=${description}>
+        <div name>${name}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div elements>${element}</div>
+      </label>`;
+        });
+    }
+};
+OxAttributeView.styles = css `
+    :host {
+      display: flex;
+      flex-direction: row;
+
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    form {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      display: grid;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+
+    label:nth-child(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-area: name;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+
+    div[description] * {
+      vertical-align: middle;
+    }
+
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
+
+    div[elements] {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    div[elements] * {
+      flex: 1;
+    }
+
+    div[elements] input,
+    div[elements] select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
+      }
+
+      div[name] {
+        text-align: left;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxAttributeView.prototype, "attributeSet", void 0);
+__decorate([
+    property({ type: Object })
+], OxAttributeView.prototype, "value", void 0);
+OxAttributeView = __decorate([
+    customElement('ox-attribute-view')
+], OxAttributeView);
+export { OxAttributeView };
+//# sourceMappingURL=ox-attribute-view.js.map

package/dist/src/ox-attribute-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attribute-view.js","sourceRoot":"","sources":["../../src/ox-attribute-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAqH7C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,KAAI,EAAE;YAC/B,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,KAAI,EAAE;QACxC,IAAI,CAAC,eAAe,EAAE;aACjB,CAAA;IACX,CAAC;IAEO,eAAe;;QACrB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAElE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;YAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,QAAQ,IAAI,EAAE;gBACZ,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,kBAAkB,GAAG;;cAEnC,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,IAAI,WAAW,CAC1G;oBACO,CAAA;oBACV,MAAK;gBAEP,KAAK,SAAS;oBACZ,IAAI,OAAO,GAAG,IAAI,CAAA,gCAAgC,GAAG,aAAa,KAAK,cAAc,CAAA;oBACrF,MAAK;gBAEP,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,8BAA8B,GAAG,UAAU,KAAK,cAAc,CAAA;oBAChF,MAAK;gBAEP,KAAK,MAAM;oBACT,IAAI,OAAO,GAAG,IAAI,CAAA;mBACT,GAAG;;;;;;4BAMM,CAAA;gBAEpB,KAAK,QAAQ,CAAC;gBACd;oBACE,IAAI,OAAO,GAAG,IAAI,CAAA,4BAA4B,GAAG,UAAU,KAAK,cAAc,CAAA;aACjF;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;6DACqC,WAAW;wBAChD,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;;AA3KM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GlB,AA/GY,CA+GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAnH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6K3B;SA7KY,eAAe","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n\n    label:nth-child(odd) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n\n    div[description] * {\n      vertical-align: middle;\n    }\n\n    div[description] mwc-icon {\n      margin-top: -3px;\n      font-size: 0.9rem;\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    div[elements] * {\n      flex: 1;\n    }\n\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--margin-default);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildEntryViews()}\n    </form> `\n  }\n\n  private buildEntryViews() {\n    const items = this.attributeSet?.items.filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag} disabled>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} disabled />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} disabled />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            disabled\n          ></ox-input-file>`\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} disabled />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,23 @@
+export type SelectOption = {
+    text: string;
+    value: string;
+};
+export type SelectOptions = SelectOption[];
+export type TypeOptions = {
+    options?: SelectOptions;
+    [prop: string]: any;
+};
+export type AttributeItem = {
+    name: string;
+    description: string;
+    tag: string;
+    type: string;
+    active: boolean;
+    hidden: boolean;
+    options: TypeOptions;
+};
+export type AttributeSet = {
+    entity: string;
+    description: string;
+    items: AttributeItem[];
+};

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SelectOption = { text: string; value: string }\nexport type SelectOptions = SelectOption[]\n\nexport type TypeOptions = {\n  options?: SelectOptions\n  [prop: string]: any\n}\n\nexport type AttributeItem = {\n  name: string\n  description: string\n  tag: string\n  type: string\n  active: boolean\n  hidden: boolean\n  options: TypeOptions\n}\n\nexport type AttributeSet = {\n  entity: string\n  description: string\n  items: AttributeItem[]\n}\n"]}

package/dist/stories/ox-attribute-form.stories.d.ts

@@ -0,0 +1,18 @@
+import '@operato/i18n';
+import '../src/ox-attribute-form.js';
+import '@material/mwc-icon';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-attribute-form.stories.js

@@ -0,0 +1,80 @@
+import '@operato/i18n';
+import '../src/ox-attribute-form.js';
+import '@material/mwc-icon';
+import { html } from 'lit';
+export default {
+    title: 'ox-attribute-form',
+    component: 'ox-attribute-form',
+    argTypes: {}
+};
+const attributeSet = {
+    entity: 'Domain',
+    description: 'Attributes for Domain Entity',
+    items: [
+        {
+            name: '등록정보',
+            description: '회사 등록 정보',
+            tag: 'brn',
+            type: 'text',
+            active: true,
+            hidden: false
+        },
+        {
+            name: '주소',
+            description: '회사 주소',
+            tag: 'address',
+            type: 'text',
+            active: true,
+            hidden: false
+        },
+        {
+            name: '신용도',
+            description: '회사의 신용도',
+            tag: 'credit',
+            type: 'select',
+            options: {
+                options: [
+                    { text: '최우수', value: '최우수' },
+                    { text: '우수', value: '우수' },
+                    { text: '보통', value: '보통' },
+                    { text: '미달', value: '미달' }
+                ]
+            },
+            active: true,
+            hidden: false
+        },
+        {
+            name: '정보파일',
+            description: '참조 첨부 파일.',
+            tag: 'file',
+            type: 'file',
+            active: true,
+            hidden: false
+        }
+    ]
+};
+var value = {
+    brn: '1234567890-1234-1',
+    address: '경기도 성남시 분당구.',
+    credit: '최우수'
+};
+const Template = ({}) => 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-attribute-form
+      .attributeSet=${attributeSet}
+      .value=${value}
+      @change=${(e) => {
+    value = e.detail;
+    console.log('change', value);
+}}
+    ></ox-attribute-form>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-attribute-form.stories.js.map

package/dist/stories/ox-attribute-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attribute-form.stories.js","sourceRoot":"","sources":["../../stories/ox-attribute-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AACpC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,YAAY,GAAG;IACnB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,8BAA8B;IAC3C,KAAK,EAAE;QACL;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,UAAU;YACvB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,OAAO;YACpB,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,SAAS;YACtB,GAAG,EAAE,QAAQ;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,OAAO,EAAE;oBACP,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;oBAC7B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;iBAC5B;aACF;YACD,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,WAAW;YACxB,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;KACF;CACF,CAAA;AAED,IAAI,KAAK,GAAG;IACV,GAAG,EAAE,mBAAmB;IACxB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;sBASgB,YAAY;eACnB,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;;GAEJ,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-attribute-form.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-attribute-form',\n  component: 'ox-attribute-form',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst attributeSet = {\n  entity: 'Domain',\n  description: 'Attributes for Domain Entity',\n  items: [\n    {\n      name: '등록정보',\n      description: '회사 등록 정보',\n      tag: 'brn',\n      type: 'text',\n      active: true,\n      hidden: false\n    },\n    {\n      name: '주소',\n      description: '회사 주소',\n      tag: 'address',\n      type: 'text',\n      active: true,\n      hidden: false\n    },\n    {\n      name: '신용도',\n      description: '회사의 신용도',\n      tag: 'credit',\n      type: 'select',\n      options: {\n        options: [\n          { text: '최우수', value: '최우수' },\n          { text: '우수', value: '우수' },\n          { text: '보통', value: '보통' },\n          { text: '미달', value: '미달' }\n        ]\n      },\n      active: true,\n      hidden: false\n    },\n    {\n      name: '정보파일',\n      description: '참조 첨부 파일.',\n      tag: 'file',\n      type: 'file',\n      active: true,\n      hidden: false\n    }\n  ]\n}\n\nvar value = {\n  brn: '1234567890-1234-1',\n  address: '경기도 성남시 분당구.',\n  credit: '최우수'\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  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-attribute-form\n      .attributeSet=${attributeSet}\n      .value=${value}\n      @change=${(e: CustomEvent) => {\n        value = e.detail\n        console.log('change', value)\n      }}\n    ></ox-attribute-form>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-attribute-view.stories.d.ts

@@ -0,0 +1,18 @@
+import '@operato/i18n';
+import '../src/ox-attribute-view.js';
+import '@material/mwc-icon';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-attribute-view.stories.js

@@ -0,0 +1,73 @@
+import '@operato/i18n';
+import '../src/ox-attribute-view.js';
+import '@material/mwc-icon';
+import { html } from 'lit';
+export default {
+    title: 'ox-attribute-view',
+    component: 'ox-attribute-view',
+    argTypes: {}
+};
+const attributeSet = {
+    entity: 'Domain',
+    description: 'Attributes for Domain Entity',
+    items: [
+        {
+            name: '등록정보',
+            description: '회사 등록 정보',
+            tag: 'brn',
+            type: 'text',
+            active: true,
+            hidden: false
+        },
+        {
+            name: '주소',
+            description: '회사 주소',
+            tag: 'address',
+            type: 'text',
+            active: true,
+            hidden: false
+        },
+        {
+            name: '신용도',
+            description: '회사의 신용도',
+            tag: 'credit',
+            type: 'select',
+            options: {
+                options: [
+                    { text: '최우수', value: '최우수' },
+                    { text: '우수', value: '우수' },
+                    { text: '보통', value: '보통' },
+                    { text: '미달', value: '미달' }
+                ]
+            },
+            active: true,
+            hidden: false
+        },
+        {
+            name: '정보파일',
+            description: '참조 첨부 파일.',
+            tag: 'file',
+            type: 'file',
+            active: true,
+            hidden: false
+        }
+    ]
+};
+var value = {
+    brn: '1234567890-1234-1',
+    address: '경기도 성남시 분당구.',
+    credit: '최우수'
+};
+const Template = ({}) => 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-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-attribute-view.stories.js.map

package/dist/stories/ox-attribute-view.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attribute-view.stories.js","sourceRoot":"","sources":["../../stories/ox-attribute-view.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AACpC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,YAAY,GAAG;IACnB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,8BAA8B;IAC3C,KAAK,EAAE;QACL;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,UAAU;YACvB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,OAAO;YACpB,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,SAAS;YACtB,GAAG,EAAE,QAAQ;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,OAAO,EAAE;oBACP,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;oBAC7B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;iBAC5B;aACF;YACD,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;QACD;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,WAAW;YACxB,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;SACd;KACF;CACF,CAAA;AAED,IAAI,KAAK,GAAG;IACV,GAAG,EAAE,mBAAmB;IACxB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;uCAQiC,YAAY,WAAW,KAAK;GAChE,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-attribute-view.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-attribute-view',\n  component: 'ox-attribute-view',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst attributeSet = {\n  entity: 'Domain',\n  description: 'Attributes for Domain Entity',\n  items: [\n    {\n      name: '등록정보',\n      description: '회사 등록 정보',\n      tag: 'brn',\n      type: 'text',\n      active: true,\n      hidden: false\n    },\n    {\n      name: '주소',\n      description: '회사 주소',\n      tag: 'address',\n      type: 'text',\n      active: true,\n      hidden: false\n    },\n    {\n      name: '신용도',\n      description: '회사의 신용도',\n      tag: 'credit',\n      type: 'select',\n      options: {\n        options: [\n          { text: '최우수', value: '최우수' },\n          { text: '우수', value: '우수' },\n          { text: '보통', value: '보통' },\n          { text: '미달', value: '미달' }\n        ]\n      },\n      active: true,\n      hidden: false\n    },\n    {\n      name: '정보파일',\n      description: '참조 첨부 파일.',\n      tag: 'file',\n      type: 'file',\n      active: true,\n      hidden: false\n    }\n  ]\n}\n\nvar value = {\n  brn: '1234567890-1234-1',\n  address: '경기도 성남시 분당구.',\n  credit: '최우수'\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  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-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}