@operato/attribute 9.0.0-beta.7 → 9.0.0-beta.85

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/attribute",
   "description": "WebApplication attribute supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.85",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -59,16 +59,16 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/data-grist": "^9.0.0-beta.7",
-    "@operato/graphql": "^9.0.0-beta.6",
-    "@operato/grist-editor": "^9.0.0-beta.7",
-    "@operato/i18n": "^9.0.0-beta.5",
-    "@operato/input": "^9.0.0-beta.7",
-    "@operato/popup": "^9.0.0-beta.6",
-    "@operato/property-editor": "^9.0.0-beta.7",
-    "@operato/shell": "^9.0.0-beta.6",
-    "@operato/styles": "^9.0.0-beta.6",
-    "@operato/utils": "^9.0.0-beta.6",
+    "@operato/data-grist": "^9.0.0-beta.85",
+    "@operato/graphql": "^9.0.0-beta.38",
+    "@operato/grist-editor": "^9.0.0-beta.85",
+    "@operato/i18n": "^9.0.0-beta.37",
+    "@operato/input": "^9.0.0-beta.85",
+    "@operato/popup": "^9.0.0-beta.52",
+    "@operato/property-editor": "^9.0.0-beta.85",
+    "@operato/shell": "^9.0.0-beta.52",
+    "@operato/styles": "^9.0.0-beta.47",
+    "@operato/utils": "^9.0.0-beta.38",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -103,5 +103,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5651545395e34a4ffa3e915d09fc2d2b9c433df3"
+  "gitHead": "eee693c95a8d12322e12fa13282e6646eff9f124"
 }

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

@@ -1,18 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/i18n';
-import '../src/ox-attribute-form.js';
-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

@@ -1,92 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/i18n';
-import '../src/ox-attribute-form.js';
-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/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>
-    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

@@ -1 +0,0 @@
-{"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,18 +0,0 @@
-import '@operato/i18n';
-import '../src/ox-attribute-view.js';
-import '@material/web/icon/icon.js';
-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

@@ -1,85 +0,0 @@
-import '@operato/i18n';
-import '../src/ox-attribute-view.js';
-import '@material/web/icon/icon.js';
-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/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>
-    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 +0,0 @@
-{"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,25 +0,0 @@
-import '@material/web/icon/icon.js';
-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';
-import '@operato/property-editor/ox-property-editor-options.js';
-import '@operato/property-editor/ox-properties-dynamic-view.js';
-import '@operato/data-grist/ox-filters-form.js';
-import '@operato/data-grist/ox-sorters-control.js';
-import '@operato/grist-editor';
-import '../src/grist-editor/index.js';
-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-grist-editor-attributes.stories.js

@@ -1,321 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-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';
-import '@operato/property-editor/ox-property-editor-options.js';
-import '@operato/property-editor/ox-properties-dynamic-view.js';
-import '@operato/data-grist/ox-filters-form.js';
-import '@operato/data-grist/ox-sorters-control.js';
-import '@operato/grist-editor'; /* regiester grist editors */
-/* set grist-editors */
-import '../src/grist-editor/index.js';
-import { css, html, LitElement } from 'lit';
-import { state } from 'lit/decorators.js';
-// import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'
-// import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'
-// import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'
-// // import { OxGristRendererCrontab } from '@operato/grist-editor/ox-grist-renderer-crontab.js'
-// import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'
-import { i18next } from '@operato/i18n';
-import { OxPropertyEditor } from '@operato/property-editor';
-import { CommonGristStyles } from '@operato/styles';
-OxPropertyEditor.register({
-    number: 'ox-property-editor-number',
-    string: 'ox-property-editor-string',
-    boolean: 'ox-property-editor-checkbox',
-    options: 'ox-property-editor-options'
-});
-// registerEditor('parameters', OxGristEditorParameters)
-// registerEditor('crontab', OxGristEditorCrontab)
-// registerEditor('value-map', OxGristEditorValueMap)
-// registerEditor('partition-keys', OxGristEditorPartitionKeys)
-const fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }) => {
-    var total = 10;
-    var start = (page - 1) * limit;
-    return {
-        total,
-        records: Array(limit * page > total ? total % limit : limit)
-            .fill('')
-            .map((item, idx) => {
-            return {
-                id: idx,
-                entity: `entity-${start + idx + 1}`,
-                description: `description-${start + idx + 1}`,
-                attributes: {
-                    brn: '1234567890-1234-1',
-                    address: '경기도 성남시 분당구.',
-                    credit: '최우수'
-                }
-            };
-        })
-    };
-};
-class GristDemo extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = 'CARD';
-        this.config = {
-            list: { fields: ['name', 'description', 'active'] },
-            columns: [
-                { type: 'gutter', gutterName: 'row-selector', multiple: true },
-                {
-                    type: 'gutter',
-                    gutterName: 'button',
-                    icon: 'add',
-                    handlers: {
-                        click: 'record-copy'
-                    }
-                },
-                { type: 'gutter', gutterName: 'sequence' },
-                {
-                    type: 'gutter',
-                    gutterName: 'button',
-                    icon: 'arrow_upward',
-                    handlers: {
-                        click: 'move-up'
-                    }
-                },
-                {
-                    type: 'gutter',
-                    gutterName: 'button',
-                    icon: 'arrow_downward',
-                    handlers: {
-                        click: 'move-down'
-                    }
-                },
-                {
-                    type: 'string',
-                    name: 'id',
-                    hidden: true
-                },
-                {
-                    type: 'string',
-                    name: 'entity',
-                    header: i18next.t('field.entity'),
-                    record: {
-                        editable: true
-                    },
-                    width: 140
-                },
-                {
-                    type: 'string',
-                    name: 'description',
-                    header: i18next.t('field.description'),
-                    record: {
-                        editable: true
-                    },
-                    width: 180
-                },
-                {
-                    type: 'select',
-                    name: 'type',
-                    header: i18next.t('field.type'),
-                    record: {
-                        options: ['', 'number', 'text', 'select', 'boolean', 'file'],
-                        editable: true
-                    },
-                    width: 120
-                },
-                {
-                    type: 'attributes',
-                    name: 'attributes',
-                    header: i18next.t('field.attributes'),
-                    record: {
-                        editable: true,
-                        options: {
-                            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
-                                    }
-                                ]
-                            }
-                        }
-                    },
-                    width: 200
-                }
-            ],
-            rows: {
-                selectable: {
-                    multiple: true
-                }
-            },
-            pagination: {
-                infinite: true
-            },
-            sorters: [
-                {
-                    name: 'sequence'
-                }
-            ]
-        };
-    }
-    get grist() {
-        return this.renderRoot.querySelector('ox-grist');
-    }
-    render() {
-        const mode = this.mode || 'CARD';
-        return html `
-      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
-        <div id="filters" slot="headroom">
-          <ox-filters-form @filters-change=${(e) => console.log('changed', e.detail)}></ox-filters-form>
-        </div>
-
-        <div slot="headroom" id="headroom">
-          <div id="modes">
-            <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>
-    `;
-    }
-}
-GristDemo.styles = [
-    CommonGristStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-
-      #tailer {
-        display: flex;
-        flex-direction: row;
-        margin: 0 var(--spacing-medium);
-      }
-
-      #tailer a {
-        padding: 0 var(--padding-default) 0 var(--padding-default);
-        margin: 0 var(--spacing-small);
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
-        font-size: var(--fontsize-default);
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-];
-__decorate([
-    state()
-], GristDemo.prototype, "mode", void 0);
-customElements.define('ox-attributes', GristDemo);
-export default {
-    title: 'ox-grist-editor-attributes',
-    component: 'ox-grist-editor-attributes',
-    argTypes: {}
-};
-const Template = ({}) => html `
-  <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"
-  />
-
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-
-  <style>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--spacing-large);
-      background-color: var(--md-sys-color-surface);
-      box-shadow: var(--box-shadow);
-
-      --md-icon-size: 24px;
-    }
-    #sorters md-icon,
-    #modes md-icon {
-      --md-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--spacing-medium);
-      padding-left: var(--spacing-small);
-      border-bottom: var(--border-dim-color);
-      position: relative;
-      color: var(--md-sys-color-on-secondary-container);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
-
-    #sorters > * {
-      padding: var(--spacing-small);
-      vertical-align: middle;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #filters * {
-      margin-right: var(--spacing-medium);
-    }
-
-    @media only screen and (max-width: 460px) {
-      #filters {
-        flex-direction: column;
-      }
-
-      #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 +0,0 @@
-{"version":3,"file":"ox-grist-editor-attributes.stories.js","sourceRoot":"","sources":["../../stories/ox-grist-editor-attributes.stories.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yDAAyD,CAAA;AAChE,OAAO,uDAAuD,CAAA;AAC9D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,wDAAwD,CAAA;AAC/D,OAAO,wDAAwD,CAAA;AAC/D,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2CAA2C,CAAA;AAClD,OAAO,uBAAuB,CAAA,CAAC,6BAA6B;AAC5D,uBAAuB;AACvB,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzC,0FAA0F;AAC1F,gGAAgG;AAChG,uGAAuG;AACvG,iGAAiG;AACjG,6FAA6F;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,gBAAgB,CAAC,QAAQ,CAAC;IACxB,MAAM,EAAE,2BAA2B;IACnC,MAAM,EAAE,2BAA2B;IACnC,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,4BAA4B;CACtC,CAAC,CAAA;AAEF,wDAAwD;AACxD,kDAAkD;AAClD,qDAAqD;AACrD,+DAA+D;AAE/D,MAAM,YAAY,GAAG,KAAK,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe,EAAE,EAAE;IACjG,IAAI,KAAK,GAAG,EAAE,CAAA;IACd,IAAI,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAA;IAE9B,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;aACzD,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACjB,OAAO;gBACL,EAAE,EAAE,GAAG;gBACP,MAAM,EAAE,UAAU,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBACnC,WAAW,EAAE,eAAe,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC7C,UAAU,EAAE;oBACV,GAAG,EAAE,mBAAmB;oBACxB,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE,KAAK;iBACd;aACF,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAyBW,SAAI,GAAW,MAAM,CAAA;QAM9B,WAAM,GAAQ;YACZ,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE;YACnD,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAC9D;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,KAAK;oBACX,QAAQ,EAAE;wBACR,KAAK,EAAE,aAAa;qBACrB;iBACF;gBACD,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,cAAc;oBACpB,QAAQ,EAAE;wBACR,KAAK,EAAE,SAAS;qBACjB;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,gBAAgB;oBACtB,QAAQ,EAAE;wBACR,KAAK,EAAE,WAAW;qBACnB;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE,IAAI;iBACb;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;qBACf;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;qBACf;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE;wBACN,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;wBAC5D,QAAQ,EAAE,IAAI;qBACf;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACP,YAAY,EAAE;gCACZ,MAAM,EAAE,QAAQ;gCAChB,WAAW,EAAE,8BAA8B;gCAC3C,KAAK,EAAE;oCACL;wCACE,IAAI,EAAE,MAAM;wCACZ,WAAW,EAAE,UAAU;wCACvB,GAAG,EAAE,KAAK;wCACV,IAAI,EAAE,MAAM;wCACZ,MAAM,EAAE,IAAI;wCACZ,MAAM,EAAE,KAAK;qCACd;oCACD;wCACE,IAAI,EAAE,IAAI;wCACV,WAAW,EAAE,OAAO;wCACpB,GAAG,EAAE,SAAS;wCACd,IAAI,EAAE,MAAM;wCACZ,MAAM,EAAE,IAAI;wCACZ,MAAM,EAAE,KAAK;qCACd;oCACD;wCACE,IAAI,EAAE,KAAK;wCACX,WAAW,EAAE,SAAS;wCACtB,GAAG,EAAE,QAAQ;wCACb,IAAI,EAAE,QAAQ;wCACd,OAAO,EAAE;4CACP,OAAO,EAAE;gDACP,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gDAC7B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gDAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gDAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;6CAC5B;yCACF;wCACD,MAAM,EAAE,IAAI;wCACZ,MAAM,EAAE,KAAK;qCACd;oCACD;wCACE,IAAI,EAAE,MAAM;wCACZ,WAAW,EAAE,WAAW;wCACxB,GAAG,EAAE,MAAM;wCACX,IAAI,EAAE,MAAM;wCACZ,MAAM,EAAE,IAAI;wCACZ,MAAM,EAAE,KAAK;qCACd;iCACF;6BACF;yBACF;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf;aACF;YACD,UAAU,EAAE;gBACV,QAAQ,EAAE,IAAI;aACf;YACD,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,UAAU;iBACjB;aACF;SACF,CAAA;IAqBH,CAAC;IA9JC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAClD,CAAC;IAyID,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,CAAA;QAEhC,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,MAAM,UAAU,IAAI,6BAA6B,YAAY;;6CAE/C,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;8BAKnE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;8BACpD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;8BACpD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;;;;KAI7E,CAAA;IACH,CAAC;;AAvLM,gBAAM,GAAG;IACd,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;CACF,AAtBY,CAsBZ;AAEQ;IAAR,KAAK,EAAE;uCAAsB;AAkKhC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;AAEjD,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,4BAA4B;IACvC,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEvD,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/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(--spacing-medium);\n      }\n\n      #tailer a {\n        padding: 0 var(--padding-default) 0 var(--padding-default);\n        margin: 0 var(--spacing-small);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: var(--fontsize-default);\n        color: var(--md-sys-color-on-primary-container);\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(--spacing-large);\n      background-color: var(--md-sys-color-surface);\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(--spacing-medium);\n      padding-left: var(--spacing-small);\n      border-bottom: var(--border-dim-color);\n      position: relative;\n      color: var(--md-sys-color-on-secondary-container);\n      font-size: var(--fontsize-default);\n      user-select: none;\n    }\n\n    #sorters > * {\n      padding: var(--spacing-small);\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(--spacing-medium);\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"]}