@operato/data-grist 1.11.13 → 1.11.16

package/dist/stories/tree-column.stories.js

@@ -0,0 +1,309 @@
+import '../src/index.js';
+import '../src/filters/filters-form.js';
+import '../src/sorters/sorters-control.js';
+import '../src/record-view/record-creator.js';
+import '@operato/popup/ox-popup-list.js';
+import '@material/mwc-icon';
+import { html } from 'lit';
+const fetchHandler = async ({ page, limit }) => {
+    var total = 120993;
+    var start = (page - 1) * limit;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    var records = Array(limit * page > total ? total % limit : limit)
+        .fill('')
+        .map((item, idx) => {
+        return {
+            id: String(idx),
+            name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+            description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+            active: Math.round(Math.random() * 2) % 2 ? true : false,
+            createdAt: Date.now(),
+            updatedAt: Date.now(),
+            children: [
+                ...Array.from({ length: 3 }, (_, idx) => {
+                    return {
+                        id: `sub:${idx}`,
+                        name: 'subitem' + idx,
+                        description: 'sub items...',
+                        active: Math.round(Math.random() * 2) % 2 ? true : false,
+                        children: [
+                            ...Array.from({ length: 3 }, (_, idx2) => {
+                                return {
+                                    id: `sub-sub:${idx}:${idx2}`,
+                                    name: 'sub-subitem:' + idx2,
+                                    description: 'sub sub items...',
+                                    active: Math.round(Math.random() * 2) % 2 ? true : false,
+                                    children: [],
+                                    createdAt: Date.now(),
+                                    updatedAt: Date.now()
+                                };
+                            })
+                        ],
+                        createdAt: Date.now(),
+                        updatedAt: Date.now()
+                    };
+                })
+            ]
+        };
+    });
+    return {
+        total,
+        records
+    };
+};
+const config = {
+    list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['role', 'email']
+    },
+    columns: [
+        {
+            type: 'gutter',
+            gutterName: 'dirty',
+            fixed: true
+        },
+        // {
+        //   type: 'gutter',
+        //   gutterName: 'sequence',
+        //   fixed: true
+        // },
+        {
+            type: 'tree',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+                editable: false,
+                childrenProperty: 'children'
+            },
+            filter: 'search',
+            sortable: true,
+            width: 200,
+            fixed: true
+        },
+        // {
+        //   type: 'gutter',
+        //   gutterName: 'row-selector',
+        //   multiple: true
+        // },
+        {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+                editable: true,
+                align: 'left'
+            },
+            width: 200
+        },
+        {
+            type: 'boolean',
+            name: 'active',
+            header: 'active',
+            record: {
+                editable: true
+            },
+            filter: true,
+            sortable: true,
+            width: 60
+        },
+        {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+                editable: true,
+                defaultValue: {
+                    name: 'now'
+                }
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+        }
+    ],
+    rows: {
+        selectable: {
+            multiple: true
+        },
+        handlers: {
+        // focus: 'select-row-toggle'
+        },
+        classifier: function (record, rowIndex) {
+            const rate = record['rate'];
+            const emphasized = rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined;
+            return {
+                emphasized
+            };
+        }
+    },
+    sorters: [
+        {
+            name: 'name',
+            desc: true
+        },
+        {
+            name: 'email'
+        }
+    ],
+    pagination: {
+        pages: [20, 30, 50, 100, 200]
+    }
+};
+export default {
+    title: 'tree column',
+    component: 'ox-grist',
+    argTypes: {
+        config: { control: 'object' }
+    }
+};
+const Template = ({ config }) => 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" />
+
+  <style>
+    ox-grist {
+      width: 100%;
+      height: 600px;
+    }
+
+    [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);
+
+      --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;
+    }
+
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
+      }
+    }
+  </style>
+
+  <ox-grist
+    mode="GRID"
+    .config=${config}
+    .fetchHandler=${fetchHandler}
+    @filters-change=${(e) => console.log('filters', e.target.filters)}
+  >
+    <div slot="headroom">
+      <div id="filters">
+        <ox-filters-form autofocus></ox-filters-form>
+      </div>
+
+      <div id="sorters">
+        Sort
+        <mwc-icon
+          @click=${(e) => {
+    const target = e.currentTarget;
+    target.closest('#sorters').querySelector('#sorter-control').open({
+        right: 0,
+        top: target.offsetTop + target.offsetHeight
+    });
+}}
+          >expand_more</mwc-icon
+        >
+        <ox-popup id="sorter-control">
+          <ox-sorters-control> </ox-sorters-control>
+        </ox-popup>
+      </div>
+
+      <ox-record-creator id="add" light-popup>
+        <button><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {
+    config
+};
+//# sourceMappingURL=tree-column.stories.js.map

package/dist/stories/tree-column.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-column.stories.js","sourceRoot":"","sources":["../../stories/tree-column.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,iCAAiC,CAAA;AACxC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAW1C,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,IAAI,KAAK,GAAG,MAAM,CAAA;IAClB,IAAI,KAAK,GAAG,CAAC,IAAK,GAAG,CAAC,CAAC,GAAG,KAAM,CAAA;IAEhC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;IAEtD,IAAI,OAAO,GAAG,KAAK,CAAC,KAAM,GAAG,IAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACjE,IAAI,CAAC,EAAE,CAAC;SACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;QACjB,OAAO;YACL,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;YACf,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;YAC1E,WAAW,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;YAC5G,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;YACxD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;YACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;YACrB,QAAQ,EAAE;gBACR,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;oBACtC,OAAO;wBACL,EAAE,EAAE,OAAO,GAAG,EAAE;wBAChB,IAAI,EAAE,SAAS,GAAG,GAAG;wBACrB,WAAW,EAAE,cAAc;wBAC3B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;wBACxD,QAAQ,EAAE;4BACR,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;gCACvC,OAAO;oCACL,EAAE,EAAE,WAAW,GAAG,IAAI,IAAI,EAAE;oCAC5B,IAAI,EAAE,cAAc,GAAG,IAAI;oCAC3B,WAAW,EAAE,kBAAkB;oCAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;oCACxD,QAAQ,EAAE,EAAE;oCACZ,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;oCACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;iCACtB,CAAA;4BACH,CAAC,CAAC;yBACH;wBACD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;qBACtB,CAAA;gBACH,CAAC,CAAC;aACH;SACF,CAAA;IACH,CAAC,CAAC,CAAA;IAEJ,OAAO;QACL,KAAK;QACL,OAAO;KACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG;IACb,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;QAC/B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;KAC3B;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,IAAI;SACZ;QACD,IAAI;QACJ,oBAAoB;QACpB,4BAA4B;QAC5B,gBAAgB;QAChB,KAAK;QACL;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,gBAAgB,EAAE,UAAU;aAC7B;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,IAAI;SACZ;QACD,IAAI;QACJ,oBAAoB;QACpB,gCAAgC;QAChC,mBAAmB;QACnB,KAAK;QACL;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,MAAM,EAAE,aAAa;YACrB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,IAAI,EAAE,KAAK;iBACZ;aACF;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,QAAQ,EAAE,IAAI;SACf;QACD,QAAQ,EAAE;QACR,6BAA6B;SAC9B;QACD,UAAU,EAAE,UAAU,MAAM,EAAE,QAAQ;YACpC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;YAC3B,MAAM,UAAU,GACd,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC3G,OAAO;gBACL,UAAU;aACX,CAAA;QACH,CAAoB;KACrB;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,IAAI;SACX;QACD;YACE,IAAI,EAAE,OAAO;SACd;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;KAC9B;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC9B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,MAAM,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgHlD,MAAM;oBACA,YAAY;sBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;;;;mBAUlE,CAAC,CAAQ,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAC5C;IAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAE,CAAC,aAAa,CAAC,iBAAiB,CAAS,CAAC,IAAI,CAAC;QAC1E,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY;KAC5C,CAAC,CAAA;AACJ,CAAC;;;;;;;;;;;;cAYG,CAAA;AAEd,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM;CACP,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  var records = Array(limit! * page! > total ? total % limit! : limit)\n    .fill('')\n    .map((item, idx) => {\n      return {\n        id: String(idx),\n        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n        active: Math.round(Math.random() * 2) % 2 ? true : false,\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: `sub:${idx}`,\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              children: [\n                ...Array.from({ length: 3 }, (_, idx2) => {\n                  return {\n                    id: `sub-sub:${idx}:${idx2}`,\n                    name: 'sub-subitem:' + idx2,\n                    description: 'sub sub items...',\n                    active: Math.round(Math.random() * 2) % 2 ? true : false,\n                    children: [],\n                    createdAt: Date.now(),\n                    updatedAt: Date.now()\n                  }\n                })\n              ],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ]\n      }\n    })\n\n  return {\n    total,\n    records\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty',\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'sequence',\n    //   fixed: true\n    // },\n    {\n      type: 'tree',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: false,\n        childrenProperty: 'children'\n      },\n      filter: 'search',\n      sortable: true,\n      width: 200,\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'row-selector',\n    //   multiple: true\n    // },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      // focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'tree column',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link\n    href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n    rel=\"stylesheet\"\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    ox-grist {\n      width: 100%;\n      height: 600px;\n    }\n\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    #modes > * {\n      padding: var(--padding-narrow);\n      opacity: 0.5;\n      color: var(--primary-text-color);\n      cursor: pointer;\n    }\n\n    #modes > mwc-icon[active] {\n      border-radius: 9px;\n      background-color: rgba(var(--primary-color-rgb), 0.05);\n      opacity: 1;\n      color: var(--secondary-text-color);\n      cursor: default;\n    }\n\n    #modes > mwc-icon:hover {\n      opacity: 1;\n      color: var(--secondary-text-color);\n    }\n\n    #add {\n      width: 50px;\n      text-align: right;\n    }\n\n    #add button {\n      background-color: var(--primary-color);\n      border: 0;\n      border-radius: 50%;\n      padding: 5px;\n      width: 36px;\n      height: 36px;\n      cursor: pointer;\n    }\n\n    #add button:hover {\n      background-color: var(--focus-background-color);\n      box-shadow: var(--box-shadow);\n    }\n\n    #add button mwc-icon {\n      font-size: 2em;\n      color: var(--theme-white-color);\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-grist\n    mode=\"GRID\"\n    .config=${config}\n    .fetchHandler=${fetchHandler}\n    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n  >\n    <div slot=\"headroom\">\n      <div id=\"filters\">\n        <ox-filters-form autofocus></ox-filters-form>\n      </div>\n\n      <div id=\"sorters\">\n        Sort\n        <mwc-icon\n          @click=${(e: Event) => {\n            const target = e.currentTarget as HTMLElement\n            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n              right: 0,\n              top: target.offsetTop + target.offsetHeight\n            })\n          }}\n          >expand_more</mwc-icon\n        >\n        <ox-popup id=\"sorter-control\">\n          <ox-sorters-control> </ox-sorters-control>\n        </ox-popup>\n      </div>\n\n      <ox-record-creator id=\"add\" light-popup>\n        <button><mwc-icon>add</mwc-icon></button>\n      </ox-record-creator>\n    </div>\n  </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}