@operato/data-grist 2.0.0-alpha.9 → 2.0.0-alpha.90

package/dist/stories/textarea.stories.js

@@ -3,7 +3,7 @@ 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 '@material/web/icon/icon.js';
 import { html } from 'lit';
 const fetchHandler = async ({ page, limit }) => {
     var total = 3;
@@ -161,127 +161,160 @@ export default {
     }
 };
 const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }) => 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" />
+      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>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+        --ox-filters-input-placeholder-color: var(--primary-color);
 
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
 
-    #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;
-    }
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
 
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
+    <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);
 
-    #add {
-      width: 50px;
-      text-align: right;
-    }
+        --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;
+      }
 
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
 
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
+      #modes > md-icon[active] {
+        border-radius: 9px;
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        opacity: 1;
+        color: var(--secondary-text-color);
+        cursor: default;
+      }
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+      #modes > md-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #add {
+        margin-left: auto;
+        text-align: right;
+      }
+
+      #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+      }
+
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
+
+      #add button md-icon {
+        font-size: 1.5em;
+        color: var(--theme-white-color);
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    .config=${config}
-    .mode=${mode}
-    .fetchHandler=${fetchHandler}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @filters-change=${(e) => console.log('filters', e.target.filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form autofocus></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`;
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      .config=${config}
+      .mode=${mode}
+      .fetchHandler=${fetchHandler}
+      ?url-params-sensitive=${urlParamsSensitive}
+      @filters-change=${(e) => console.log('filters', e.target.filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
+
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`;
 export const Regular = Template.bind({});
 Regular.args = {
     config,

package/dist/stories/textarea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../stories/textarea.stories.ts"],"names":[],"mappings":"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","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 = 3\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    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          textarea: `\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text\n`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\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    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\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: 'textarea',\n      name: 'textarea',\n      label: true,\n      header: 'textarea',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130\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      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: false\n    },\n    handlers: {\n      focus: 'select-row'\n    }\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: 'textarea in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({\n  config,\n  mode = 'GRID',\n  urlParamsSensitive = false,\n  fetchHandler\n}: 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    [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    .config=${config}\n    .mode=${mode}\n    .fetchHandler=${fetchHandler}\n    ?url-params-sensitive=${urlParamsSensitive}\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      <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  fetchHandler,\n  mode: 'GRID'\n}\n"]}
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../stories/textarea.stories.ts"],"names":[],"mappings":"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","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/web/icon/icon.js'\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 = 3\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    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          textarea: `\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text\n`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\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    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\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: 'textarea',\n      name: 'textarea',\n      label: true,\n      header: 'textarea',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130\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      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: false\n    },\n    handlers: {\n      focus: 'select-row'\n    }\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: 'textarea in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <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      ox-filters-form {\n        --input-gap-vertical: 8px;\n        --input-gap-horizontal: 16px;\n\n        --ox-filters-input-placeholder-color: var(--primary-color);\n\n        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n        --ox-filters-input-focus-border: 1px solid var(--primary-color);\n        --ox-filters-input-font: normal 14px var(--theme-font);\n        --ox-filters-input-color: var(--primary-text-color);\n        --ox-filters-input-focus-color: var(--primary-color);\n        --ox-filters-label-font: normal 14px var(--theme-font);\n        --ox-filters-label-color: var(--primary-text-color);\n\n        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n        --ox-filters-input-padding: 6px 2px;\n      }\n    </style>\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      #modes > * {\n        padding: var(--padding-narrow);\n        opacity: 0.5;\n        color: var(--primary-text-color);\n        cursor: pointer;\n      }\n\n      #modes > md-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 > md-icon:hover {\n        opacity: 1;\n        color: var(--secondary-text-color);\n      }\n\n      #add {\n        margin-left: auto;\n        text-align: right;\n      }\n\n      #add button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background-color: var(--primary-color);\n        border: 0;\n        border-radius: 50%;\n        padding: 5px;\n        width: 32px;\n        height: 32px;\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 md-icon {\n        font-size: 1.5em;\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      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\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        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}

package/dist/stories/tree-column-with-checkbox.stories.d.ts

@@ -3,7 +3,7 @@ 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 '@material/web/icon/icon.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;

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

@@ -3,7 +3,7 @@ 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 '@material/web/icon/icon.js';
 import { html } from 'lit';
 const fetchHandler = async ({ page, limit }) => {
     var total = 120993;
@@ -187,148 +187,180 @@ export default {
     }
 };
 const Template = ({ config }) => html ` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons"
-    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" />
+      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>
-    ox-grist {
-      width: 100%;
-      height: 600px;
-    }
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-    [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);
+    <style>
+      ox-filters-form {
+        --input-gap-vertical: 8px;
+        --input-gap-horizontal: 16px;
 
-      --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;
-    }
+        --ox-filters-input-placeholder-color: var(--primary-color);
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+        --ox-filters-input-focus-border: 1px solid var(--primary-color);
+        --ox-filters-input-font: normal 14px var(--theme-font);
+        --ox-filters-input-color: var(--primary-text-color);
+        --ox-filters-input-focus-color: var(--primary-color);
+        --ox-filters-label-font: normal 14px var(--theme-font);
+        --ox-filters-label-color: var(--primary-text-color);
 
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
+        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+        --ox-filters-input-padding: 6px 2px;
+      }
+    </style>
 
-    #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;
-    }
+    <style>
+      ox-grist {
+        width: 100%;
+        height: 600px;
+      }
 
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
+      [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);
 
-    #add {
-      width: 50px;
-      text-align: right;
-    }
+        --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;
+      }
 
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
 
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
+      #modes > md-icon[active] {
+        border-radius: 9px;
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        opacity: 1;
+        color: var(--secondary-text-color);
+        cursor: default;
+      }
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+      #modes > md-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #add {
+        text-align: right;
+      }
+
+      #add button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+      }
+
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
+
+      #add button md-icon {
+        font-size: 1.5em;
+        color: var(--theme-white-color);
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </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>
+      @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) => {
+        <div id="sorters">
+          Sort
+          <md-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>
+            >expand_more</md-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>`;
+        <ox-record-creator id="add" light-popup>
+          <button><md-icon>add</md-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`;
 export const Regular = Template.bind({});
 Regular.args = {
     config