@operato/data-grist 1.5.17 → 1.5.20

package/dist/src/renderers/ox-grist-renderer-text copy.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import { detectOverflow, format as formatter } from '@operato/utils';
+function onmouseover(e) {
+    const element = e.target;
+    if (detectOverflow(element)) {
+        element.setAttribute('data-tooltip', element.textContent);
+    }
+}
+function onmouseout(e) {
+    const element = e.target;
+    element.removeAttribute('data-tooltip');
+}
+export const OxGristRendererText = (value, column, record, rowIndex, field) => {
+    var { format } = column.record || {};
+    var text = value == null ? '' : value;
+    if (format) {
+        text = formatter(format, text);
+    }
+    return html `<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}&nbsp;</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-text%20copy.js.map

package/dist/src/renderers/ox-grist-renderer-text copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-text copy.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-text copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAIpE,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3D;AACH,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;IAEpC,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IACrC,IAAI,MAAM,EAAE;QACV,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;KAC/B;IAED,OAAO,IAAI,CAAA,oBAAoB,WAAW,cAAc,UAAU,IAAI,IAAI,eAAe,CAAA;AAC3F,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { detectOverflow, format as formatter } from '@operato/utils'\n\nimport { FieldRenderer } from '../types'\n\nfunction onmouseover(e: Event) {\n  const element = e.target as HTMLSpanElement\n  if (detectOverflow(element)) {\n    element.setAttribute('data-tooltip', element.textContent!)\n  }\n}\n\nfunction onmouseout(e: Event) {\n  const element = e.target as HTMLSpanElement\n  element.removeAttribute('data-tooltip')\n}\n\nexport const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {\n  var { format } = column.record || {}\n\n  var text = value == null ? '' : value\n  if (format) {\n    text = formatter(format, text)\n  }\n\n  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}&nbsp;</span>`\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-textarea.d.ts

@@ -0,0 +1,2 @@
+import { FieldRenderer } from '../types';
+export declare const OxGristRendererTextarea: FieldRenderer;

package/dist/src/renderers/ox-grist-renderer-textarea.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const OxGristRendererTextarea = (value, column, record, rowIndex, field) => {
+    return html `<span style="height:auto;white-space: pre-wrap;word-wrap:break-word;">${value}&nbsp;</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-textarea.js.map

package/dist/src/renderers/ox-grist-renderer-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-textarea.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,uBAAuB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC/F,OAAO,IAAI,CAAA,yEAAyE,KAAK,eAAe,CAAA;AAC1G,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererTextarea: FieldRenderer = (value, column, record, rowIndex, field) => {\n  return html`<span style=\"height:auto;white-space: pre-wrap;word-wrap:break-word;\">${value}&nbsp;</span>`\n}\n"]}

package/dist/src/renderers/registry.js

@@ -9,12 +9,14 @@ import { OxGristRendererPassword } from './ox-grist-renderer-password.js';
 import { OxGristRendererProgress } from './ox-grist-renderer-progress.js';
 import { OxGristRendererSelect } from './ox-grist-renderer-select.js';
 import { OxGristRendererText } from './ox-grist-renderer-text.js';
+import { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js';
 function isClass(func) {
     return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
 }
 var RENDERERS = {
     string: OxGristRendererText,
     text: OxGristRendererText,
+    textarea: OxGristRendererTextarea,
     email: OxGristRendererText,
     tel: OxGristRendererText,
     password: OxGristRendererPassword,

package/dist/src/renderers/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAOjE,SAAS,OAAO,CAAC,IAAc;IAC7B,OAAO,OAAO,IAAI,KAAK,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AAC9F,CAAC;AAED,IAAI,SAAS,GAET;IACF,MAAM,EAAE,mBAAmB;IAC3B,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,mBAAmB;IAC1B,GAAG,EAAE,mBAAmB;IACxB,QAAQ,EAAE,uBAAuB;IACjC,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,qBAAqB;IAC7B,OAAO,EAAE,sBAAsB;IAC/B,QAAQ,EAAE,sBAAsB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE,mBAAmB;IAC7B,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,uBAAuB;IACjC,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;CAC5B,CAAA;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY,EAAE,QAAuB;IACpE,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAY;IAC7C,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAA4B;IACtD,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,QAAQ,GAA+C,SAAS,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,mBAAmB,CAAA;IAE3G,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACtB,OAAO,QAAyB,CAAA;KACjC;IAED,OAAO,UACL,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KASW;QAEX,IAAI,OAAO,GAAoB,IAAK,QAAuC,EAAS,CAAA;QAEpF,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,GAAG,GAAG,QAAQ,CAAA;QACtB,OAAO,CAAC,KAAK,GAAG,KAAsB,CAAA;QAEtC,OAAO,OAA0B,CAAA;IACnC,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { DataCardField } from '../data-card/data-card-field.js'\nimport { DataCardGutter } from '../data-card/data-card-gutter.js'\nimport { RecordCard } from '../data-card/record-card.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { DataListField } from '../data-list/data-list-field.js'\nimport { DataListGutter } from '../data-list/data-list-gutter.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { DataReportField } from '../data-report/data-report-field.js'\nimport { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'\nimport { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'\nimport { OxGristRendererColor } from './ox-grist-renderer-color.js'\nimport { OxGristRendererDate } from './ox-grist-renderer-date.js'\nimport { OxGristRendererFile } from './ox-grist-renderer-file.js'\nimport { OxGristRendererImage } from './ox-grist-renderer-image.js'\nimport { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'\nimport { OxGristRendererLink } from './ox-grist-renderer-link.js'\nimport { OxGristRendererPassword } from './ox-grist-renderer-password.js'\nimport { OxGristRendererProgress } from './ox-grist-renderer-progress.js'\nimport { OxGristRendererSelect } from './ox-grist-renderer-select.js'\nimport { OxGristRendererText } from './ox-grist-renderer-text.js'\nimport { OxGristRenderer } from './ox-grist-renderer.js'\n\ninterface OxGristRendererConstructor {\n  new (): OxGristRenderer\n}\n\nfunction isClass(func: Function) {\n  return typeof func === 'function' && /^class\\s/.test(Function.prototype.toString.call(func))\n}\n\nvar RENDERERS: {\n  [name: string]: FieldRenderer | OxGristRendererConstructor\n} = {\n  string: OxGristRendererText,\n  text: OxGristRendererText,\n  email: OxGristRendererText,\n  tel: OxGristRendererText,\n  password: OxGristRendererPassword,\n  integer: OxGristRendererText,\n  float: OxGristRendererText,\n  number: OxGristRendererText,\n  select: OxGristRendererSelect,\n  boolean: OxGristRendererBoolean,\n  checkbox: OxGristRendererBoolean,\n  month: OxGristRendererText,\n  week: OxGristRendererText,\n  date: OxGristRendererDate,\n  time: OxGristRendererDate,\n  datetime: OxGristRendererDate,\n  color: OxGristRendererColor,\n  progress: OxGristRendererProgress,\n  link: OxGristRendererLink,\n  image: OxGristRendererImage,\n  file: OxGristRendererFile,\n  json5: OxGristRendererJson5\n}\n\nexport function registerRenderer(type: string, renderer: FieldRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FieldRenderer): FieldRenderer {\n  if (typeof type === 'function') {\n    return type\n  }\n\n  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText\n\n  if (!isClass(renderer)) {\n    return renderer as FieldRenderer\n  }\n\n  return function (\n    value: any,\n    column: ColumnConfig,\n    record: GristRecord,\n    rowIndex: number,\n    field:\n      | DataGridField\n      | RecordCard\n      | DataCardGutter\n      | DataCardField\n      | DataListGutter\n      | DataListField\n      | RecordPartial\n      | DataReportField\n      | Element\n  ) {\n    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field as DataGridField\n\n    return element as OxGristRenderer\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataCardField } from '../data-card/data-card-field.js'\nimport { DataCardGutter } from '../data-card/data-card-gutter.js'\nimport { RecordCard } from '../data-card/record-card.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { DataListField } from '../data-list/data-list-field.js'\nimport { DataListGutter } from '../data-list/data-list-gutter.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { DataReportField } from '../data-report/data-report-field.js'\nimport { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'\nimport { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'\nimport { OxGristRendererColor } from './ox-grist-renderer-color.js'\nimport { OxGristRendererDate } from './ox-grist-renderer-date.js'\nimport { OxGristRendererFile } from './ox-grist-renderer-file.js'\nimport { OxGristRendererImage } from './ox-grist-renderer-image.js'\nimport { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'\nimport { OxGristRendererLink } from './ox-grist-renderer-link.js'\nimport { OxGristRendererPassword } from './ox-grist-renderer-password.js'\nimport { OxGristRendererProgress } from './ox-grist-renderer-progress.js'\nimport { OxGristRendererSelect } from './ox-grist-renderer-select.js'\nimport { OxGristRendererText } from './ox-grist-renderer-text.js'\nimport { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'\nimport { OxGristRenderer } from './ox-grist-renderer.js'\n\ninterface OxGristRendererConstructor {\n  new (): OxGristRenderer\n}\n\nfunction isClass(func: Function) {\n  return typeof func === 'function' && /^class\\s/.test(Function.prototype.toString.call(func))\n}\n\nvar RENDERERS: {\n  [name: string]: FieldRenderer | OxGristRendererConstructor\n} = {\n  string: OxGristRendererText,\n  text: OxGristRendererText,\n  textarea: OxGristRendererTextarea,\n  email: OxGristRendererText,\n  tel: OxGristRendererText,\n  password: OxGristRendererPassword,\n  integer: OxGristRendererText,\n  float: OxGristRendererText,\n  number: OxGristRendererText,\n  select: OxGristRendererSelect,\n  boolean: OxGristRendererBoolean,\n  checkbox: OxGristRendererBoolean,\n  month: OxGristRendererText,\n  week: OxGristRendererText,\n  date: OxGristRendererDate,\n  time: OxGristRendererDate,\n  datetime: OxGristRendererDate,\n  color: OxGristRendererColor,\n  progress: OxGristRendererProgress,\n  link: OxGristRendererLink,\n  image: OxGristRendererImage,\n  file: OxGristRendererFile,\n  json5: OxGristRendererJson5\n}\n\nexport function registerRenderer(type: string, renderer: FieldRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FieldRenderer): FieldRenderer {\n  if (typeof type === 'function') {\n    return type\n  }\n\n  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText\n\n  if (!isClass(renderer)) {\n    return renderer as FieldRenderer\n  }\n\n  return function (\n    value: any,\n    column: ColumnConfig,\n    record: GristRecord,\n    rowIndex: number,\n    field:\n      | DataGridField\n      | RecordCard\n      | DataCardGutter\n      | DataCardField\n      | DataListGutter\n      | DataListField\n      | RecordPartial\n      | DataReportField\n      | Element\n  ) {\n    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field as DataGridField\n\n    return element as OxGristRenderer\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -76,6 +76,7 @@ export type FetchResult = {
 } | void;
 export type FetchHandler = (param: FetchOption) => Promise<FetchResult>;
 export type GristEventHandler = (columns: ColumnConfig[], data?: GristData, column?: ColumnConfig, record?: GristRecord, rowIndex?: number, target?: any) => void;
+export type AccumulatorFunc = 'sum' | 'avg' | 'count' | 'min' | 'max' | ((data: GristData, column: ColumnConfig) => string | number);
 export type ColumnConfig = {
     type: string;
     name: string;
@@ -90,6 +91,7 @@ export type ColumnConfig = {
     width?: number | string | ColumnWidthCallback;
     forList?: boolean;
     validation?: ValidationCallback;
+    accumulator?: AccumulatorFunc;
     filter?: FilterConfig;
     imex?: ImexConfig | boolean;
     multiple?: boolean;
@@ -148,6 +150,7 @@ export type ImexConfig = {
     type: string;
 };
 export type RowsConfig = {
+    accumulator?: boolean;
     appendable: boolean;
     insertable: boolean;
     selectable?: RowSelectableConfig;

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAmFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n}\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n */\nexport type FiltersConfig = {\n  /**\n   * Specifies whether to provide filtering functionality in the header.\n   */\n  header?: boolean\n}\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  mandatory?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  [extended: string]: any\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAmFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n}\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n */\nexport type FiltersConfig = {\n  /**\n   * Specifies whether to provide filtering functionality in the header.\n   */\n  header?: boolean\n}\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorFunc\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean\n  mandatory?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  [extended: string]: any\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}

package/dist/stories/accumulator.stories.d.ts

@@ -0,0 +1,36 @@
+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 { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        config: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: string[];
+        };
+        urlParamsSensitive: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    config: object;
+    mode: string;
+    urlParamsSensitive: boolean;
+    fetchHandler: object;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/accumulator.stories.js

@@ -0,0 +1,277 @@
+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 = 3;
+    var start = (page - 1) * limit;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return {
+        total,
+        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}`,
+                accval: Math.random(),
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+const config = {
+    columns: [
+        {
+            type: 'gutter',
+            gutterName: 'dirty'
+        },
+        {
+            type: 'gutter',
+            gutterName: 'sequence'
+        },
+        {
+            type: 'gutter',
+            gutterName: 'row-selector',
+            multiple: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            title: 'add',
+            handlers: {
+                click: 'record-copy'
+            }
+        },
+        {
+            type: 'string',
+            name: 'id',
+            hidden: true
+        },
+        {
+            type: 'string',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+                editable: true
+            },
+            filter: 'search',
+            sortable: true,
+            width: 120
+        },
+        {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+                editable: true,
+                align: 'left'
+            },
+            width: 200
+        },
+        {
+            type: 'number',
+            name: 'accval',
+            label: true,
+            header: 'accval',
+            record: {
+                editable: true,
+                align: 'right'
+            },
+            accumulator: 'sum',
+            sortable: true,
+            width: 130
+        },
+        {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+                editable: true,
+                defaultValue: {
+                    name: 'now'
+                }
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+        },
+        {
+            type: 'datetime',
+            name: 'createdAt',
+            header: 'created at',
+            record: {
+                editable: false
+            },
+            sortable: true,
+            width: 180
+        }
+    ],
+    rows: {
+        selectable: {
+            multiple: false
+        },
+        handlers: {
+            focus: 'select-row'
+        },
+        accumulator: true
+    },
+    sorters: [
+        {
+            name: 'name',
+            desc: true
+        },
+        {
+            name: 'email'
+        }
+    ],
+    pagination: {
+        pages: [20, 30, 50, 100, 200]
+    }
+};
+export default {
+    title: 'accumulator in ox-grist',
+    component: 'ox-grist',
+    argTypes: {
+        config: { control: 'object' },
+        mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
+        urlParamsSensitive: { control: 'boolean' }
+    }
+};
+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" />
+
+  <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);
+
+      --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(--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;
+      }
+    }
+  </style>
+
+  <ox-grist
+    mode="GRID"
+    .config=${config}
+    .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><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {
+    config,
+    fetchHandler,
+    mode: 'GRID'
+};
+//# sourceMappingURL=accumulator.stories.js.map

package/dist/stories/accumulator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.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          accval: Math.random(),\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\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: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      accumulator: 'sum',\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    accumulator: true\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: 'accumulator 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(--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  </style>\n\n  <ox-grist\n    mode=\"GRID\"\n    .config=${config}\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"]}

package/dist/stories/textarea.stories.d.ts

@@ -0,0 +1,36 @@
+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 { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        config: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: string[];
+        };
+        urlParamsSensitive: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    config: object;
+    mode: string;
+    urlParamsSensitive: boolean;
+    fetchHandler: object;
+}
+export declare const Regular: Story<ArgTypes>;