@operato/data-grist 1.5.17 → 1.5.19

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.19](https://github.com/hatiolab/operato/compare/v1.5.18...v1.5.19) (2023-11-03)
+
+
+### :bug: Bug Fix
+
+* add textarea input ([eae0449](https://github.com/hatiolab/operato/commit/eae0449d7b3aeb629d2370a0afa83d5ef98aba55))
+
+
+
 ### [1.5.17](https://github.com/hatiolab/operato/compare/v1.5.16...v1.5.17) (2023-11-01)
 
 

package/dist/src/editors/ox-grist-editor-textarea.d.ts

@@ -0,0 +1,5 @@
+import '@operato/input/ox-input-textarea.js';
+import { OxGristEditor } from './ox-grist-editor.js';
+export declare class OxGristEditorTextarea extends OxGristEditor {
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/editors/ox-grist-editor-textarea.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-textarea.js';
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorTextarea = class OxGristEditorTextarea extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <ox-input-textarea .value=${this.value}></ox-input-textarea> `;
+    }
+};
+OxGristEditorTextarea = __decorate([
+    customElement('ox-grist-editor-textarea')
+], OxGristEditorTextarea);
+export { OxGristEditorTextarea };
+//# sourceMappingURL=ox-grist-editor-textarea.js.map

package/dist/src/editors/ox-grist-editor-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-textarea.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-textarea.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAGnB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,aAAa;IACtD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK,wBAAwB,CAAA;IAC7E,CAAC;CACF,CAAA;AAJY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAIjC","sourcesContent":["import '@operato/input/ox-input-textarea.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-textarea')\nexport class OxGristEditorTextarea extends OxGristEditor {\n  get editorTemplate() {\n    return html` <ox-input-textarea .value=${this.value}></ox-input-textarea> `\n  }\n}\n"]}

package/dist/src/editors/registry.js

@@ -11,11 +11,13 @@ import { OxGristEditorPassword } from './ox-grist-editor-password';
 import { OxGristEditorSelect } from './ox-grist-editor-select';
 import { OxGristEditorTel } from './ox-grist-editor-tel';
 import { OxGristEditorText } from './ox-grist-editor-text';
+import { OxGristEditorTextarea } from './ox-grist-editor-textarea';
 import { OxGristEditorTime } from './ox-grist-editor-time';
 import { OxGristEditorWeek } from './ox-grist-editor-week';
 var EDITORS = {
     string: OxGristEditorText,
     text: OxGristEditorText,
+    textarea: OxGristEditorTextarea,
     email: OxGristEditorEmail,
     tel: OxGristEditorTel,
     password: OxGristEditorPassword,

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

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE1D,IAAI,OAAO,GAAkD;IAC3D,MAAM,EAAE,iBAAiB;IACzB,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,kBAAkB;IACzB,GAAG,EAAE,gBAAgB;IACrB,QAAQ,EAAE,qBAAqB;IAC/B,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,qBAAqB;IAC9B,QAAQ,EAAE,qBAAqB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,iBAAiB;IACvB,IAAI,EAAE,iBAAiB;IACvB,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,qBAAqB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,mBAAmB;IAC7B,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,iBAAiB;CACxB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAAiC;IAC5E,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACtB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,UAAU,KAAU,EAAE,MAAoB,EAAE,MAAmB,EAAE,QAAgB,EAAE,KAAoB;QAC5G,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,iBAAiB,CAAA;QAExD,IAAI,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAEzB,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,KAAK,CAAA;QAErB,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\nimport { OxGristEditor } from './ox-grist-editor'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox'\nimport { OxGristEditorColor } from './ox-grist-editor-color'\nimport { OxGristEditorDate } from './ox-grist-editor-date'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime'\nimport { OxGristEditorEmail } from './ox-grist-editor-email'\nimport { OxGristEditorFile } from './ox-grist-editor-file'\nimport { OxGristEditorImage } from './ox-grist-editor-image'\nimport { OxGristEditorMonth } from './ox-grist-editor-month'\nimport { OxGristEditorNumber } from './ox-grist-editor-number'\nimport { OxGristEditorPassword } from './ox-grist-editor-password'\nimport { OxGristEditorSelect } from './ox-grist-editor-select'\nimport { OxGristEditorTel } from './ox-grist-editor-tel'\nimport { OxGristEditorText } from './ox-grist-editor-text'\nimport { OxGristEditorTime } from './ox-grist-editor-time'\nimport { OxGristEditorWeek } from './ox-grist-editor-week'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE1D,IAAI,OAAO,GAAkD;IAC3D,MAAM,EAAE,iBAAiB;IACzB,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,qBAAqB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,GAAG,EAAE,gBAAgB;IACrB,QAAQ,EAAE,qBAAqB;IAC/B,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,qBAAqB;IAC9B,QAAQ,EAAE,qBAAqB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,iBAAiB;IACvB,IAAI,EAAE,iBAAiB;IACvB,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,qBAAqB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,mBAAmB;IAC7B,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,iBAAiB;CACxB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAAiC;IAC5E,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACtB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,UAAU,KAAU,EAAE,MAAoB,EAAE,MAAmB,EAAE,QAAgB,EAAE,KAAoB;QAC5G,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,iBAAiB,CAAA;QAExD,IAAI,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAEzB,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,KAAK,CAAA;QAErB,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\nimport { OxGristEditor } from './ox-grist-editor'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox'\nimport { OxGristEditorColor } from './ox-grist-editor-color'\nimport { OxGristEditorDate } from './ox-grist-editor-date'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime'\nimport { OxGristEditorEmail } from './ox-grist-editor-email'\nimport { OxGristEditorFile } from './ox-grist-editor-file'\nimport { OxGristEditorImage } from './ox-grist-editor-image'\nimport { OxGristEditorMonth } from './ox-grist-editor-month'\nimport { OxGristEditorNumber } from './ox-grist-editor-number'\nimport { OxGristEditorPassword } from './ox-grist-editor-password'\nimport { OxGristEditorSelect } from './ox-grist-editor-select'\nimport { OxGristEditorTel } from './ox-grist-editor-tel'\nimport { OxGristEditorText } from './ox-grist-editor-text'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea'\nimport { OxGristEditorTime } from './ox-grist-editor-time'\nimport { OxGristEditorWeek } from './ox-grist-editor-week'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  textarea: OxGristEditorTextarea,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}

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

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

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/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>;

package/dist/stories/textarea.stories.js

@@ -0,0 +1,291 @@
+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}`,
+                textarea: `
+long long long text
+long long long text
+long long long text
+long long long text
+long long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;
+long long long text
+long long long text
+long long long text
+long long long text
+long long long text
+`,
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+const config = {
+    list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['role', 'email']
+    },
+    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: 'textarea',
+            name: 'textarea',
+            label: true,
+            header: 'textarea',
+            record: {
+                editable: true
+            },
+            filter: 'search',
+            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'
+        }
+    },
+    sorters: [
+        {
+            name: 'name',
+            desc: true
+        },
+        {
+            name: 'email'
+        }
+    ],
+    pagination: {
+        pages: [20, 30, 50, 100, 200]
+    }
+};
+export default {
+    title: 'textarea 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
+    .config=${config}
+    .mode=${mode}
+    .fetchHandler=${fetchHandler}
+    ?url-params-sensitive=${urlParamsSensitive}
+    @filters-change=${(e) => console.log('filters', e.target.filters)}
+  >
+    <div slot="headroom">
+      <div id="filters">
+        <ox-filters-form autofocus></ox-filters-form>
+      </div>
+
+      <ox-record-creator id="add" light-popup>
+        <button><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {
+    config,
+    fetchHandler,
+    mode: 'GRID'
+};
+//# sourceMappingURL=textarea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../stories/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 3\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          textarea: `\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text\n`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'textarea',\n      name: 'textarea',\n      label: true,\n      header: 'textarea',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: false\n    },\n    handlers: {\n      focus: 'select-row'\n    }\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'textarea in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({\n  config,\n  mode = 'GRID',\n  urlParamsSensitive = false,\n  fetchHandler\n}: ArgTypes) => html` <link\n    href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n    rel=\"stylesheet\"\n  />\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    [slot='headroom'] {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--padding-default) var(--padding-wide);\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n\n      --mdc-icon-size: 24px;\n    }\n    #sorters mwc-icon,\n    #modes mwc-icon {\n      --mdc-icon-size: 18px;\n    }\n    #sorters {\n      margin-left: auto;\n      margin-right: var(--margin-default);\n      padding-left: var(--padding-narrow);\n      border-bottom: var(--border-dark-color);\n      position: relative;\n      color: var(--secondary-color);\n      font-size: var(--fontsize-default);\n      user-select: none;\n    }\n\n    #sorters > * {\n      padding: var(--padding-narrow);\n      vertical-align: middle;\n    }\n\n    #modes > * {\n      padding: var(--padding-narrow);\n      opacity: 0.5;\n      color: var(--primary-text-color);\n      cursor: pointer;\n    }\n\n    #modes > mwc-icon[active] {\n      border-radius: 9px;\n      background-color: rgba(var(--primary-color-rgb), 0.05);\n      opacity: 1;\n      color: var(--secondary-text-color);\n      cursor: default;\n    }\n\n    #modes > mwc-icon:hover {\n      opacity: 1;\n      color: var(--secondary-text-color);\n    }\n\n    #add {\n      width: 50px;\n      text-align: right;\n    }\n\n    #add button {\n      background-color: var(--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    .config=${config}\n    .mode=${mode}\n    .fetchHandler=${fetchHandler}\n    ?url-params-sensitive=${urlParamsSensitive}\n    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n  >\n    <div slot=\"headroom\">\n      <div id=\"filters\">\n        <ox-filters-form autofocus></ox-filters-form>\n      </div>\n\n      <ox-record-creator id=\"add\" light-popup>\n        <button><mwc-icon>add</mwc-icon></button>\n      </ox-record-creator>\n    </div>\n  </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}