@operato/data-grist 0.3.21 → 0.3.27

package/dist/src/data-provider.js

@@ -21,6 +21,7 @@ export class DataProvider {
         this._pageChangeHandler = this.onPageChange.bind(this);
         this._limitChangeHandler = this.onLimitChange.bind(this);
         this._sortersChangeHandler = this.onSortersChange.bind(this);
+        this._filtersChangeHandler = this.onFiltersChange.bind(this);
         this._recordChangeHandler = this.onRecordChange.bind(this);
         this._attachPageHandler = this.onAttachPage.bind(this);
         this.consumer = consumer;
@@ -29,15 +30,17 @@ export class DataProvider {
         this.consumer.addEventListener('page-change', this._pageChangeHandler);
         this.consumer.addEventListener('limit-change', this._limitChangeHandler);
         this.consumer.addEventListener('sorters-change', this._sortersChangeHandler);
+        this.consumer.addEventListener('filters-change', this._filtersChangeHandler);
         this.consumer.addEventListener('record-change', this._recordChangeHandler);
     }
     dispose() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         (_a = this.consumer) === null || _a === void 0 ? void 0 : _a.removeEventListener('attach-page', this._attachPageHandler);
         (_b = this.consumer) === null || _b === void 0 ? void 0 : _b.removeEventListener('page-change', this._pageChangeHandler);
         (_c = this.consumer) === null || _c === void 0 ? void 0 : _c.removeEventListener('limit-change', this._limitChangeHandler);
         (_d = this.consumer) === null || _d === void 0 ? void 0 : _d.removeEventListener('sorters-change', this._sortersChangeHandler);
-        (_e = this.consumer) === null || _e === void 0 ? void 0 : _e.removeEventListener('record-change', this._recordChangeHandler);
+        (_e = this.consumer) === null || _e === void 0 ? void 0 : _e.removeEventListener('filters-change', this._filtersChangeHandler);
+        (_f = this.consumer) === null || _f === void 0 ? void 0 : _f.removeEventListener('record-change', this._recordChangeHandler);
     }
     onAttachPage() {
         this.attach();
@@ -54,6 +57,10 @@ export class DataProvider {
         this.sorters = e.detail;
         this.fetch();
     }
+    onFiltersChange(e) {
+        this.filters = e.detail;
+        this.fetch();
+    }
     onRecordChange(e) {
         var _a;
         (_a = this.consumer) === null || _a === void 0 ? void 0 : _a.checkDirties();
@@ -93,6 +100,19 @@ export class DataProvider {
     set sorters(sorters) {
         this._sorters = sorters;
     }
+    /* alias for sorters */
+    get sortings() {
+        return this._sorters;
+    }
+    set sortings(sorters) {
+        this._sorters = sorters;
+    }
+    get filters() {
+        return this._filters;
+    }
+    set filters(filters) {
+        this._filters = filters;
+    }
     async attach(reset = false) {
         var _a;
         var { page = 0, limit = 20 } = this;
@@ -121,9 +141,12 @@ export class DataProvider {
             }))
         }, reset);
     }
-    async fetch({ page = this.page, limit = this.limit, sorters = this.sorters } = {}) {
+    async fetch({ page = this.page, limit = this.limit, sorters, sortings, filters } = {}) {
+        /* sortings property is only for things-factory server-side list parameter convention */
         /* fetchHandler should reture { page, limit, total, records } */
         this.records = ZERO_RECORDS;
+        sorters = sorters || sortings || this.sorters;
+        filters = filters || this.filters;
         this.sorters = sorters;
         return this._update({
             /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */
@@ -133,6 +156,8 @@ export class DataProvider {
                 page,
                 limit,
                 sorters,
+                sortings: sorters,
+                filters,
                 options: this.fetchOptions
             }))
         });

package/dist/src/data-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZERO_RECORDS } from './configure/zero-config'\nimport { DataConsumer } from './data-consumer'\nimport { FetchHandler, FetchOption, GristRecord, SorterConfig } from './types'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _sortersChangeHandler = this.onSortersChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onSortersChange(e: Event) {\n    this.sorters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({ page = this.page, limit = this.limit, sorters = this.sorters } = {}) {\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}
+{"version":3,"file":"data-provider.js","sourceRoot":"","sources":["../../src/data-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, SortersConfig } from '.'\nimport { ZERO_RECORDS } from './configure/zero-config'\nimport { DataConsumer } from './data-consumer'\nimport { FetchHandler, FetchOption, GristRecord, SorterConfig } from './types'\n\nfunction EMPTY_FETCHHANDLER() {\n  return {\n    total: 0,\n    records: []\n  }\n}\n\nfunction _calculateTotalPage(limit: number, total: number) {\n  /*\n   * total page는 1이상이어야 한다.\n   * 즉, 레코드가 하나도 없어도, 페이지 갯수는 1이 되어야 한다.\n   */\n  return Math.max(1, Math.ceil(total / limit))\n}\n\nexport class DataProvider {\n  page: number = 1\n  limit: number = 20\n  total: number = 0\n  records: GristRecord[] = []\n\n  private consumer?: DataConsumer\n  private _fetchHandler?: FetchHandler\n  private _sorters?: SorterConfig[]\n  private _filters?: FilterConfigObject[]\n\n  private _pageChangeHandler: EventListener = this.onPageChange.bind(this)\n  private _limitChangeHandler = this.onLimitChange.bind(this)\n  private _sortersChangeHandler = this.onSortersChange.bind(this)\n  private _filtersChangeHandler = this.onFiltersChange.bind(this)\n  private _recordChangeHandler = this.onRecordChange.bind(this)\n  private _attachPageHandler: EventListener = this.onAttachPage.bind(this)\n\n  private _fetchHandlerWrap: any\n  private _fetchOptions: any\n\n  constructor(consumer: DataConsumer) {\n    this.consumer = consumer\n\n    this.fetchHandler = consumer.fetchHandler\n\n    this.consumer.addEventListener('attach-page', this._attachPageHandler)\n    this.consumer.addEventListener('page-change', this._pageChangeHandler)\n    this.consumer.addEventListener('limit-change', this._limitChangeHandler)\n    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer.addEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer.addEventListener('record-change', this._recordChangeHandler)\n  }\n\n  dispose() {\n    this.consumer?.removeEventListener('attach-page', this._attachPageHandler)\n    this.consumer?.removeEventListener('page-change', this._pageChangeHandler)\n    this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)\n    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)\n    this.consumer?.removeEventListener('filters-change', this._filtersChangeHandler)\n    this.consumer?.removeEventListener('record-change', this._recordChangeHandler)\n  }\n\n  onAttachPage() {\n    this.attach()\n  }\n\n  onPageChange(e: Event) {\n    var page = (e as CustomEvent).detail\n    this.fetch({ page })\n  }\n\n  onLimitChange(e: Event) {\n    var limit = (e as CustomEvent).detail\n    this.fetch({ limit })\n  }\n\n  onSortersChange(e: Event) {\n    this.sorters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onFiltersChange(e: Event) {\n    this.filters = (e as CustomEvent).detail\n    this.fetch()\n  }\n\n  onRecordChange(e: Event) {\n    this.consumer?.checkDirties()\n  }\n\n  get fetchOptions() {\n    return this._fetchOptions\n  }\n\n  set fetchOptions(fetchOptions) {\n    this._fetchOptions = fetchOptions\n\n    this.fetch()\n  }\n\n  get fetchHandler() {\n    if (!this._fetchHandlerWrap) {\n      this._fetchHandlerWrap = async (options: FetchOption) => {\n        if (!this._fetchHandler) {\n          return\n        }\n\n        try {\n          this.consumer?.showSpinner()\n          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)\n        } finally {\n          this.consumer?.hideSpinner()\n        }\n      }\n    }\n\n    return this._fetchHandlerWrap\n  }\n\n  set fetchHandler(fetchHandler) {\n    this._fetchHandler = fetchHandler\n    delete this._fetchHandlerWrap\n  }\n\n  get sorters() {\n    return this._sorters\n  }\n\n  set sorters(sorters) {\n    this._sorters = sorters\n  }\n\n  /* alias for sorters */\n  get sortings() {\n    return this._sorters\n  }\n\n  set sortings(sorters) {\n    this._sorters = sorters\n  }\n\n  get filters() {\n    return this._filters\n  }\n\n  set filters(filters) {\n    this._filters = filters\n  }\n\n  async attach(reset = false) {\n    var { page = 0, limit = 20 } = this\n\n    /*\n     * page는 0 based index가 아님에 주의한다.\n     * 즉, page 값이 1 은 첫페이지를 의미한다.\n     */\n    if (reset) {\n      this.records = ZERO_RECORDS\n      page = 1\n    } else {\n      /* attach의 경우는 grist data의 변경상태를 유지하기 위해서, grist._data 를 기반으로 한다. */\n      this.records = this.consumer?._data ? this.consumer._data.records : ZERO_RECORDS\n      page = page + 1\n    }\n\n    return this._update(\n      {\n        /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n        limit,\n        page,\n        ...(await this.fetchHandler.call(null, {\n          page,\n          limit,\n          sorters: this.sorters,\n          options: this.fetchOptions\n        }))\n      },\n      reset\n    )\n  }\n\n  async fetch({\n    page = this.page,\n    limit = this.limit,\n    sorters,\n    sortings,\n    filters\n  }: {\n    page?: number\n    limit?: number\n    sorters?: SortersConfig\n    sortings?: SortersConfig\n    filters?: FilterConfigObject[]\n  } = {}) {\n    /* sortings property is only for things-factory server-side list parameter convention */\n    /* fetchHandler should reture { page, limit, total, records } */\n    this.records = ZERO_RECORDS\n\n    sorters = sorters || sortings || this.sorters\n    filters = filters || this.filters\n\n    this.sorters = sorters\n\n    return this._update({\n      /* fetch에서 limit과 page를 제공하지 않는 경우를 대비함. */\n      limit,\n      page,\n      ...(await this.fetchHandler.call(null, {\n        page,\n        limit,\n        sorters,\n        sortings: sorters,\n        filters,\n        options: this.fetchOptions\n      }))\n    })\n  }\n\n  async _update(\n    {\n      page,\n      limit,\n      total,\n      records\n    }: {\n      page: number\n      limit: number\n      total: number\n      records: GristRecord[]\n    },\n    reset?: boolean\n  ): Promise<void> {\n    // total을 감안해서 page가 최대값을 넘지 않도록 한다.\n    var maxpage = _calculateTotalPage(limit, total)\n    if (maxpage < page) {\n      return await this.fetch({ page: maxpage, limit })\n    }\n    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.\n\n    // page와 limit이 없는 경우 records 검사 전에 초기화\n    this.page = this.page || page\n    this.limit = this.limit || limit\n\n    if (!records) {\n      return\n    }\n\n    if (this.records === ZERO_RECORDS) {\n      this.records = records\n    } else if (this.page < page) {\n      // attach인 경우에는 records를 append한다.\n      this.records = [...this.records, ...records]\n    } else {\n      return\n    }\n\n    this.limit = limit\n    this.total = total\n    this.page = page\n\n    this.consumer &&\n      (this.consumer.data = {\n        page: this.page,\n        limit: this.limit,\n        total: this.total,\n\n        records: this.records\n      })\n  }\n}\n"]}

package/dist/src/filters/filter-checkbox.d.ts

@@ -1,2 +1,3 @@
+import '@operato/input/ox-checkbox.js';
 import { FilterSelectRenderer } from '../types';
 export declare const FilterCheckbox: FilterSelectRenderer;

package/dist/src/filters/filter-checkbox.js

@@ -1,31 +1,8 @@
+import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterCheckbox = (column, owner) => {
     const filter = column.filter;
     const options = filter === null || filter === void 0 ? void 0 : filter.options;
-    return html `
-    <input
-      type="checkbox"
-      name="${column.name}"
-      @click=${(e) => {
-        // e.preventDefault()
-        // e.stopPropagation()
-        const checkbox = e.target;
-        // if (checkbox.checked === false && checkbox.indeterminate === false) {
-        //   checkbox.indeterminate = true
-        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {
-        //   checkbox.checked = false
-        // }
-        // if (checkbox.checked) {
-        //   checkbox.checked = false
-        // } else {
-        //   if (checkbox.checked === false) {
-        //     checkbox.indeterminate = true
-        //   } else {
-        //     checkbox.checked = true
-        //   }
-        // }
-    }}
-    />
-  `;
+    return html ` <ox-checkbox name="${column.name}" indeterminatable indeterminate /> `;
 };
 //# sourceMappingURL=filter-checkbox.js.map

package/dist/src/filters/filter-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA;;;cAGC,MAAM,CAAC,IAAI;eACV,CAAC,CAAa,EAAE,EAAE;QACzB,qBAAqB;QACrB,sBAAsB;QAEtB,MAAM,QAAQ,GAAqB,CAAC,CAAC,MAA0B,CAAA;QAE/D,wEAAwE;QACxE,kCAAkC;QAClC,6EAA6E;QAC7E,6BAA6B;QAC7B,IAAI;QAEJ,0BAA0B;QAC1B,6BAA6B;QAC7B,WAAW;QACX,sCAAsC;QACtC,oCAAoC;QACpC,aAAa;QACb,8BAA8B;QAC9B,MAAM;QACN,IAAI;IACN,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html`\n    <input\n      type=\"checkbox\"\n      name=\"${column.name}\"\n      @click=${(e: MouseEvent) => {\n        // e.preventDefault()\n        // e.stopPropagation()\n\n        const checkbox: HTMLInputElement = e.target as HTMLInputElement\n\n        // if (checkbox.checked === false && checkbox.indeterminate === false) {\n        //   checkbox.indeterminate = true\n        // } else if ((checkbox.checked = true && checkbox.indeterminate === true)) {\n        //   checkbox.checked = false\n        // }\n\n        // if (checkbox.checked) {\n        //   checkbox.checked = false\n        // } else {\n        //   if (checkbox.checked === false) {\n        //     checkbox.indeterminate = true\n        //   } else {\n        //     checkbox.checked = true\n        //   }\n        // }\n      }}\n    />\n  `\n}\n"]}
+{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA,uBAAuB,MAAM,CAAC,IAAI,sCAAsC,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html` <ox-checkbox name=\"${column.name}\" indeterminatable indeterminate /> `\n}\n"]}

package/dist/src/filters/filter-select.js

@@ -2,9 +2,12 @@ import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterSelect = (column, owner) => {
     const filter = column.filter;
-    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || [];
-    return html `
-    ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
-  `;
+    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
+    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
+    return operator === 'in'
+        ? html `
+        ${options === null || options === void 0 ? void 0 : options.filter((option) => !!option).map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
+      `
+        : html ` ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <div option value=${option}>${option}&nbsp;</div> `)} `;
 };
 //# sourceMappingURL=filter-select.js.map

package/dist/src/filters/filter-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,EAAE,CAAA;IAErC,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA;IACjC,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE9D,OAAO,QAAQ,KAAK,IAAI;QACtB,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EACpC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;OAChG;QACH,CAAC,CAAC,IAAI,CAAA,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,IAAI,MAAM,eAAe,CAAC,GAAG,CAAA;AAC5G,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n  const options = filter?.options || column.record.options || []\n\n  return operator === 'in'\n    ? html`\n        ${options\n          ?.filter((option: string) => !!option)\n          .map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n      `\n    : html` ${options?.map((option: string) => html` <div option value=${option}>${option}&nbsp;</div> `)} `\n}\n"]}

package/dist/src/filters/filters-form.js

@@ -22,8 +22,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                 this.config = e.detail;
             });
             this.renderRoot.addEventListener('change', async (e) => {
-                e.stopPropagation();
-                this.dispatchEvent(new CustomEvent('change', {
+                this.dispatchEvent(new CustomEvent('filters-change', {
                     bubbles: true,
                     composed: true,
                     detail: await this.getQueryFilters()
@@ -50,7 +49,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         ${this.searchColumns.length === 0 ? html `` : html ` <ox-input-search name="search"></ox-input-search> `}
         ${this.filterColumns.map((column) => {
             const { name, label, filter } = column;
-            const placeholder = typeof label === 'string'
+            const labelText = typeof label === 'string'
                 ? name
                 : typeof label !== 'object'
                     ? name
@@ -58,20 +57,27 @@ let FiltersForm = class FiltersForm extends LitElement {
                         ? label.renderer()
                         : name;
             const type = filter.type;
-            const idx = filter.operator === 'between' ? 1 : 0;
+            const operator = filter.operator;
+            const idx = operator === 'between' ? 1 : 0;
             const renderer = getFilterRenderer(type)[idx];
             if (!renderer) {
                 return html ``;
             }
-            return column.type === 'select'
-                ? html `
-                <ox-select name="${name}" placeholder="${placeholder}">
+            return column.type !== 'select'
+                ? html ` <label filter-title><span>${labelText}</span> ${renderer(column, this)} </label> `
+                : operator === 'in'
+                    ? html `
+                <ox-select name=${name} placeholder=${labelText}>
                   <ox-popup-list multiple attr-selected="checked" with-search>
                     ${renderer(column, this)}
                   </ox-popup-list>
                 </ox-select>
               `
-                : html ` <label filter-title>${column.name} ${renderer(column, this)} </label> `;
+                    : html `
+                <ox-select name=${name} placeholder=${labelText}>
+                  <ox-popup-list with-search> ${renderer(column, this)} </ox-popup-list>
+                </ox-select>
+              `;
         })}
       </form>
     `;
@@ -82,7 +88,7 @@ let FiltersForm = class FiltersForm extends LitElement {
         const search = (_a = formData.get('search')) === null || _a === void 0 ? void 0 : _a.toString();
         var filters = this.filterColumns
             .map((column) => {
-            const { name, filter } = column;
+            const { name, type, filter } = column;
             const operator = filter.operator;
             var value = formData.getAll(name);
             if (value.length == 0) {
@@ -91,10 +97,25 @@ let FiltersForm = class FiltersForm extends LitElement {
             if (-1 === value.findIndex(v => v !== '')) {
                 return;
             }
+            const filterValue = value.map(v => {
+                const value = v.toString();
+                /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
+                switch (type) {
+                    case 'integer':
+                    case 'float':
+                    case 'number':
+                    case 'progress':
+                    case 'checkbox':
+                    case 'boolean':
+                        return !value ? undefined : JSON.parse(value);
+                    default:
+                        return value;
+                }
+            });
             return {
                 name,
                 operator,
-                value: value.length === 1 ? value[0] : value
+                value: filterValue.length === 1 ? filterValue[0] : filterValue
             };
         })
             .filter(result => result !== undefined);
@@ -125,6 +146,13 @@ FiltersForm.styles = [
         flex-direction: row;
 
         justify-content: space-between;
+        align-items: center;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     `
 ];

package/dist/src/filters/filters-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        e.stopPropagation()\n\n        this.dispatchEvent(\n          new CustomEvent('change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const idx = (filter as FilterConfigObject).operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n}\n"]}
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('filters-change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const labelText =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const operator = (filter as FilterConfigObject).operator\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type !== 'select'\n            ? html` <label filter-title><span>${labelText}</span> ${renderer(column, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select name=${name} placeholder=${labelText}>\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select name=${name} placeholder=${labelText}>\n                  <ox-popup-list with-search> ${renderer(column, this)} </ox-popup-list>\n                </ox-select>\n              `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -8,3 +8,6 @@ export * from './handlers';
 export * from './formatters';
 export * from './gutters';
 export * from './filters';
+export * from './sorters/sorters-control';
+export * from './record-view';
+export * from './styles/common-grist-styles';

package/dist/src/index.js

@@ -8,4 +8,7 @@ export * from './handlers';
 export * from './formatters';
 export * from './gutters';
 export * from './filters';
+export * from './sorters/sorters-control';
+export * from './record-view';
+export * from './styles/common-grist-styles';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAE7B,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\n\nexport * from './styles/common-grist-styles'\n"]}

package/dist/src/styles/common-grist-styles.d.ts

@@ -0,0 +1 @@
+export declare const CommonGristStyles: import("lit").CSSResult;

package/dist/src/styles/common-grist-styles.js

@@ -0,0 +1,98 @@
+import { css } from 'lit';
+export const CommonGristStyles = css `
+  ox-grist {
+    flex: 1;
+    overflow-y: auto;
+
+    --grid-record-emphasized-background-color: red;
+    --grid-record-emphasized-color: yellow;
+  }
+
+  [slot='headroom'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--padding-default) var(--padding-wide);
+    border-top: 2px solid rgba(0, 0, 0, 0.2);
+    background-color: var(--theme-white-color);
+    box-shadow: var(--box-shadow);
+
+    --mdc-icon-size: 24px;
+  }
+
+  #sorters {
+    margin-left: auto;
+    position: relative;
+  }
+
+  #sorters > * {
+    padding: var(--padding-narrow);
+    margin-right: var(--margin-default);
+  }
+
+  #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(--status-success-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;
+    }
+  }
+`;
+//# sourceMappingURL=common-grist-styles.js.map

package/dist/src/styles/common-grist-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../../src/styles/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonGristStyles = css`\n  ox-grist {\n    flex: 1;\n    overflow-y: auto;\n\n    --grid-record-emphasized-background-color: red;\n    --grid-record-emphasized-color: yellow;\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    border-top: 2px solid rgba(0, 0, 0, 0.2);\n    background-color: var(--theme-white-color);\n    box-shadow: var(--box-shadow);\n\n    --mdc-icon-size: 24px;\n  }\n\n  #sorters {\n    margin-left: auto;\n    position: relative;\n  }\n\n  #sorters > * {\n    padding: var(--padding-narrow);\n    margin-right: var(--margin-default);\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(--status-success-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`\n"]}