@operato/attribute 2.0.0-alpha.64 → 2.0.0-alpha.68

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
 ## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
 
 **Note:** Version bump only for package @operato/attribute

package/dist/src/grist-editor/ox-popup-attributes.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js';
 import '../ox-attribute-form.js';
 import { LitElement } from 'lit';
 import { AttributeSet } from '../types.js';

package/dist/src/grist-editor/ox-popup-attributes.js

@@ -1,4 +1,5 @@
 import { __decorate } from "tslib";
+import '@material/web/button/elevated-button.js';
 import '../ox-attribute-form.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -13,8 +14,8 @@ let OxPopupAttributes = class OxPopupAttributes extends LitElement {
       </ox-attribute-form>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `;
     }

package/dist/src/grist-editor/ox-popup-attributes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-attributes.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-attributes.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAyC/C,MAAM;QACJ,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,kBAAkB,YAAY,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;6BAIjF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA9EM,wBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAlCY,CAkCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAwC;AAvCxD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAgF7B","sourcesContent":["import '../ox-attribute-form.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from '../types.js'\n\n@customElement('ox-popup-attributes')\nexport class OxPopupAttributes extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-attribute-form {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--padding-wide);\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--primary-color);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var attributeSet = this.attributeSet || {}\n\n    return html`\n      <ox-attribute-form .value=${this.value} .attributeSet=${attributeSet} @change=${this.onChange.bind(this)}>\n      </ox-attribute-form>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-attributes.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-attributes.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAyC/C,MAAM;QACJ,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,kBAAkB,YAAY,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;qCAIzE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;qCACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAExF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA9EM,wBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAlCY,CAkCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAwC;AAvCxD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAgF7B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../ox-attribute-form.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from '../types.js'\n\n@customElement('ox-popup-attributes')\nexport class OxPopupAttributes extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-attribute-form {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--padding-wide);\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--primary-color);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var attributeSet = this.attributeSet || {}\n\n    return html`\n      <ox-attribute-form .value=${this.value} .attributeSet=${attributeSet} @change=${this.onChange.bind(this)}>\n      </ox-attribute-form>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>\n        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

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

@@ -58,7 +58,7 @@ let OxAttributeForm = class OxAttributeForm extends LitElement {
             }
             return html ` <label .title=${description}>
         <div name>${name}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info_outline</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`;
         });
@@ -140,7 +140,7 @@ OxAttributeForm.styles = css `
       vertical-align: middle;
     }
 
-    div[description] mwc-icon {
+    div[description] md-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }

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

@@ -1 +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 editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n      sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}
+{"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] md-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><md-icon>info_outline</md-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(\n      (sum, item) => {\n        const { tag, type } = item\n\n        const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n        sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n        return sum\n      },\n      {} as { [tag: string]: any }\n    )\n  }\n}\n"]}

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

@@ -46,7 +46,7 @@ let OxAttributeView = class OxAttributeView extends LitElement {
             }
             return html ` <label .title=${description}>
         <div name>${name}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info_outline</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`;
         });
@@ -125,7 +125,7 @@ OxAttributeView.styles = [
         vertical-align: middle;
       }
 
-      div[description] mwc-icon {
+      div[description] md-icon {
         margin-top: -3px;
         font-size: 0.9rem;
       }

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

@@ -1 +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;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2H7C,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,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1E,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,CAAC;gBACb,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;YAClF,CAAC;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;6DACqC,WAAW;wBAChD,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;;AAjLM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHF;CACF,AArHY,CAqHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAzH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmL3B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    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        overflow-y: auto;\n        padding: var(--padding-default);\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\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"]}
+{"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;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2H7C,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,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1E,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,CAAC;gBACb,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;YAClF,CAAC;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;2DACmC,WAAW;wBAC9C,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;;AAjLM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHF;CACF,AArHY,CAqHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAzH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmL3B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    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        overflow-y: auto;\n        padding: var(--padding-default);\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] md-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\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><md-icon>info_outline</md-icon> ${description}</div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
+import '@material/web/icon/icon.js';
 import '@operato/i18n';
 import '../src/ox-attribute-form.js';
-import '@material/mwc-icon';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;

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

@@ -1,6 +1,6 @@
+import '@material/web/icon/icon.js';
 import '@operato/i18n';
 import '../src/ox-attribute-form.js';
-import '@material/mwc-icon';
 import { html } from 'lit';
 export default {
     title: 'ox-attribute-form',
@@ -59,22 +59,34 @@ var value = {
     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>
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <ox-attribute-form
-      .attributeSet=${attributeSet}
-      .value=${value}
-      @change=${(e) => {
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-attribute-form
+    .attributeSet=${attributeSet}
+    .value=${value}
+    @change=${(e) => {
     value = e.detail;
     console.log('change', value);
 }}
-    ></ox-attribute-form>
-  `;
+  ></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

@@ -1 +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"]}
+{"version":3,"file":"ox-attribute-form.stories.js","sourceRoot":"","sources":["../../stories/ox-attribute-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AAEpC,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,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;oBAqBpC,YAAY;aACnB,KAAK;cACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IAChB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC;;CAEJ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n'\nimport '../src/ox-attribute-form.js'\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) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\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

@@ -1,6 +1,6 @@
 import '@operato/i18n';
 import '../src/ox-attribute-view.js';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;

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

@@ -1,6 +1,6 @@
 import '@operato/i18n';
 import '../src/ox-attribute-view.js';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { html } from 'lit';
 export default {
     title: 'ox-attribute-view',
@@ -59,15 +59,27 @@ var value = {
     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>
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <ox-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>
-  `;
+  <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

@@ -1 +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"]}
+{"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,4BAA4B,CAAA;AAEnC,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,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;qCAoBnB,YAAY,WAAW,KAAK;CAChE,CAAA;AAED,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/web/icon/icon.js'\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) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\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"]}

package/dist/stories/ox-grist-editor-attributes.stories.d.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/md-icon';
 import '@operato/property-editor/ox-property-editor-checkbox.js';
 import '@operato/property-editor/ox-property-editor-number.js';
 import '@operato/property-editor/ox-property-editor-string.js';

package/dist/stories/ox-grist-editor-attributes.stories.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/md-icon';
 import '@operato/property-editor/ox-property-editor-checkbox.js';
 import '@operato/property-editor/ox-property-editor-number.js';
 import '@operato/property-editor/ox-property-editor-string.js';
@@ -203,9 +203,9 @@ class GristDemo extends LitElement {
 
         <div slot="headroom" id="headroom">
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -245,65 +245,77 @@ export default {
     argTypes: {}
 };
 const Template = ({}) => html `
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <style>
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-        --mdc-icon-size: 24px;
-      }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
 
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
+      --md-icon-size: 24px;
+    }
+    #sorters md-icon,
+    #modes md-icon {
+      --md-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
 
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
 
-      #filters * {
-        margin-right: var(--margin-default);
-      }
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
 
-        #modes {
-          display: none;
-        }
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
       }
-    </style>
 
-    <ox-attributes mode="LIST"></ox-attributes>
-  `;
+      #modes {
+        display: none;
+      }
+    }
+  </style>
+
+  <ox-attributes mode="LIST"></ox-attributes>
+`;
 export const Regular = Template.bind({});
 Regular.args = {};
 //# sourceMappingURL=ox-grist-editor-attributes.stories.js.map

package/dist/stories/ox-grist-editor-attributes.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-editor-attributes.stories.js","sourceRoot":"","sources":["../../stories/ox-grist-editor-attributes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-property-editor-options.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/data-grist/ox-sorters-control.js'\nimport '@operato/grist-editor' /* regiester grist editors */\n/* set grist-editors */\nimport '../src/grist-editor/index.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { state } from 'lit/decorators.js'\n\nimport { FetchOption, GristRecord } from '@operato/data-grist'\n// import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'\n// import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'\n// import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'\n// // import { OxGristRendererCrontab } from '@operato/grist-editor/ox-grist-renderer-crontab.js'\n// import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'\nimport { i18next } from '@operato/i18n'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { CommonGristStyles } from '@operato/styles'\n\nOxPropertyEditor.register({\n  number: 'ox-property-editor-number',\n  string: 'ox-property-editor-string',\n  boolean: 'ox-property-editor-checkbox',\n  options: 'ox-property-editor-options'\n})\n\n// registerEditor('parameters', OxGristEditorParameters)\n// registerEditor('crontab', OxGristEditorCrontab)\n// registerEditor('value-map', OxGristEditorValueMap)\n// registerEditor('partition-keys', OxGristEditorPartitionKeys)\n\nconst fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) => {\n  var total = 10\n  var start = (page - 1) * limit\n\n  return {\n    total,\n    records: Array(limit * page > total ? total % limit : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: idx,\n          entity: `entity-${start + idx + 1}`,\n          description: `description-${start + idx + 1}`,\n          attributes: {\n            brn: '1234567890-1234-1',\n            address: '경기도 성남시 분당구.',\n            credit: '최우수'\n          }\n        }\n      })\n  }\n}\n\nclass GristDemo extends LitElement {\n  static styles = [\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      #tailer {\n        display: flex;\n        flex-direction: row;\n        margin: 0 var(--margin-default);\n      }\n\n      #tailer a {\n        padding: 0 var(--padding-default) 0 var(--padding-default);\n        margin: 0 var(--margin-narrow);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: var(--fontsize-default);\n        color: var(--primary-color);\n      }\n    `\n  ]\n\n  @state() mode: String = 'CARD'\n\n  get grist() {\n    return this.renderRoot.querySelector('ox-grist')\n  }\n\n  config: any = {\n    list: { fields: ['name', 'description', 'active'] },\n    columns: [\n      { type: 'gutter', gutterName: 'row-selector', multiple: true },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      { type: 'gutter', gutterName: 'sequence' },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_upward',\n        handlers: {\n          click: 'move-up'\n        }\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_downward',\n        handlers: {\n          click: 'move-down'\n        }\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'entity',\n        header: i18next.t('field.entity'),\n        record: {\n          editable: true\n        },\n        width: 140\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'select',\n        name: 'type',\n        header: i18next.t('field.type'),\n        record: {\n          options: ['', 'number', 'text', 'select', 'boolean', 'file'],\n          editable: true\n        },\n        width: 120\n      },\n      {\n        type: 'attributes',\n        name: 'attributes',\n        header: i18next.t('field.attributes'),\n        record: {\n          editable: true,\n          options: {\n            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          }\n        },\n        width: 200\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: true\n      }\n    },\n    pagination: {\n      infinite: true\n    },\n    sorters: [\n      {\n        name: 'sequence'\n      }\n    ]\n  }\n\n  render() {\n    const mode = this.mode || 'CARD'\n\n    return html`\n      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form @filters-change=${(e: CustomEvent) => console.log('changed', e.detail)}></ox-filters-form>\n        </div>\n\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"modes\">\n            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n}\n\ncustomElements.define('ox-attributes', GristDemo)\n\nexport default {\n  title: 'ox-grist-editor-attributes',\n  component: 'ox-grist-editor-attributes',\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 Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html`\n    <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      [slot='headroom'] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n\n        --mdc-icon-size: 24px;\n      }\n      #sorters mwc-icon,\n      #modes mwc-icon {\n        --mdc-icon-size: 18px;\n      }\n      #sorters {\n        margin-left: auto;\n        margin-right: var(--margin-default);\n        padding-left: var(--padding-narrow);\n        border-bottom: var(--border-dark-color);\n        position: relative;\n        color: var(--secondary-color);\n        font-size: var(--fontsize-default);\n        user-select: none;\n      }\n\n      #sorters > * {\n        padding: var(--padding-narrow);\n        vertical-align: middle;\n      }\n\n      #filters {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n\n        #modes {\n          display: none;\n        }\n      }\n    </style>\n\n    <ox-attributes mode=\"LIST\"></ox-attributes>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-grist-editor-attributes.stories.js","sourceRoot":"","sources":["../../stories/ox-grist-editor-attributes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/md-icon'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-property-editor-options.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/data-grist/ox-sorters-control.js'\nimport '@operato/grist-editor' /* regiester grist editors */\n/* set grist-editors */\nimport '../src/grist-editor/index.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { state } from 'lit/decorators.js'\n\nimport { FetchOption, GristRecord } from '@operato/data-grist'\n// import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'\n// import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'\n// import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'\n// // import { OxGristRendererCrontab } from '@operato/grist-editor/ox-grist-renderer-crontab.js'\n// import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'\nimport { i18next } from '@operato/i18n'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { CommonGristStyles } from '@operato/styles'\n\nOxPropertyEditor.register({\n  number: 'ox-property-editor-number',\n  string: 'ox-property-editor-string',\n  boolean: 'ox-property-editor-checkbox',\n  options: 'ox-property-editor-options'\n})\n\n// registerEditor('parameters', OxGristEditorParameters)\n// registerEditor('crontab', OxGristEditorCrontab)\n// registerEditor('value-map', OxGristEditorValueMap)\n// registerEditor('partition-keys', OxGristEditorPartitionKeys)\n\nconst fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) => {\n  var total = 10\n  var start = (page - 1) * limit\n\n  return {\n    total,\n    records: Array(limit * page > total ? total % limit : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: idx,\n          entity: `entity-${start + idx + 1}`,\n          description: `description-${start + idx + 1}`,\n          attributes: {\n            brn: '1234567890-1234-1',\n            address: '경기도 성남시 분당구.',\n            credit: '최우수'\n          }\n        }\n      })\n  }\n}\n\nclass GristDemo extends LitElement {\n  static styles = [\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      #tailer {\n        display: flex;\n        flex-direction: row;\n        margin: 0 var(--margin-default);\n      }\n\n      #tailer a {\n        padding: 0 var(--padding-default) 0 var(--padding-default);\n        margin: 0 var(--margin-narrow);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: var(--fontsize-default);\n        color: var(--primary-color);\n      }\n    `\n  ]\n\n  @state() mode: String = 'CARD'\n\n  get grist() {\n    return this.renderRoot.querySelector('ox-grist')\n  }\n\n  config: any = {\n    list: { fields: ['name', 'description', 'active'] },\n    columns: [\n      { type: 'gutter', gutterName: 'row-selector', multiple: true },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      { type: 'gutter', gutterName: 'sequence' },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_upward',\n        handlers: {\n          click: 'move-up'\n        }\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_downward',\n        handlers: {\n          click: 'move-down'\n        }\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'entity',\n        header: i18next.t('field.entity'),\n        record: {\n          editable: true\n        },\n        width: 140\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'select',\n        name: 'type',\n        header: i18next.t('field.type'),\n        record: {\n          options: ['', 'number', 'text', 'select', 'boolean', 'file'],\n          editable: true\n        },\n        width: 120\n      },\n      {\n        type: 'attributes',\n        name: 'attributes',\n        header: i18next.t('field.attributes'),\n        record: {\n          editable: true,\n          options: {\n            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          }\n        },\n        width: 200\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: true\n      }\n    },\n    pagination: {\n      infinite: true\n    },\n    sorters: [\n      {\n        name: 'sequence'\n      }\n    ]\n  }\n\n  render() {\n    const mode = this.mode || 'CARD'\n\n    return html`\n      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form @filters-change=${(e: CustomEvent) => console.log('changed', e.detail)}></ox-filters-form>\n        </div>\n\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"modes\">\n            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>\n            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>\n            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n}\n\ncustomElements.define('ox-attributes', GristDemo)\n\nexport default {\n  title: 'ox-grist-editor-attributes',\n  component: 'ox-grist-editor-attributes',\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 Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    [slot='headroom'] {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--padding-default) var(--padding-wide);\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n\n      --md-icon-size: 24px;\n    }\n    #sorters md-icon,\n    #modes md-icon {\n      --md-icon-size: 18px;\n    }\n    #sorters {\n      margin-left: auto;\n      margin-right: var(--margin-default);\n      padding-left: var(--padding-narrow);\n      border-bottom: var(--border-dark-color);\n      position: relative;\n      color: var(--secondary-color);\n      font-size: var(--fontsize-default);\n      user-select: none;\n    }\n\n    #sorters > * {\n      padding: var(--padding-narrow);\n      vertical-align: middle;\n    }\n\n    #filters {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    #filters * {\n      margin-right: var(--margin-default);\n    }\n\n    @media only screen and (max-width: 460px) {\n      #filters {\n        flex-direction: column;\n      }\n\n      #modes {\n        display: none;\n      }\n    }\n  </style>\n\n  <ox-attributes mode=\"LIST\"></ox-attributes>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}