@operato/data-grist 0.4.1 → 0.4.4

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

@@ -0,0 +1,159 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
+import { customElement, property } from 'lit/decorators.js';
+const STYLE = css `
+  :host {
+    display: flex;
+
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+  }
+
+  :host > * {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+
+    box-sizing: border-box;
+
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  :host > style {
+    display: none;
+  }
+
+  :host > input[type='checkbox'] {
+    width: initial;
+    margin: auto;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    zoom: var(--grist-input-zoom);
+  }
+  *:focus {
+    outline: none;
+  }
+
+  input[type='file'] {
+    opacity: 0%;
+  }
+
+  @media screen and (max-width: 460px) {
+    :host > * {
+      border: initial;
+      background-color: initial;
+    }
+    *:focus {
+      outline: none;
+    }
+  }
+`;
+let OxGristEditor = class OxGristEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.column = ZERO_COLUMN;
+        this.record = ZERO_RECORD;
+    }
+    render() {
+        return this.editorTemplate;
+    }
+    get editor() {
+        return this.renderRoot.firstElementChild;
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onchange.bind(this));
+        this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
+        this.renderRoot.addEventListener('click', this._onclick.bind(this));
+        this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
+        const align = this.column.record.align;
+        if (align) {
+            this.style.textAlign = align;
+            this.style.textAlignLast = align; /* for select */
+        }
+        const name = this.column.name || '';
+        this.value = this._dirtyValue = this.formatForEditor(this.record[name]);
+        this.focus();
+        await this.updateComplete;
+        this.select();
+    }
+    select() {
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
+            return this.editor.select();
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    formatForEditor(value) {
+        return value === undefined ? '' : value;
+    }
+    formatFromEditor(e) {
+        return e.target.value;
+    }
+    _onfocusout() {
+        if (this._dirtyValue !== this.value) {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: this._dirtyValue,
+                    column: this.column,
+                    record: this.record,
+                    row: this.row
+                }
+            }));
+        }
+    }
+    _onchange(e) {
+        e.stopPropagation();
+        this._dirtyValue = this.formatFromEditor(e);
+    }
+    _onclick(e) {
+        e.stopPropagation();
+    }
+    _ondblclick(e) {
+        e.stopPropagation();
+    }
+    get editorTemplate() {
+        return html ``;
+    }
+};
+OxGristEditor.styles = STYLE;
+__decorate([
+    property({ type: Object })
+], OxGristEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], OxGristEditor.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristEditor.prototype, "field", void 0);
+__decorate([
+    property({ type: Number })
+], OxGristEditor.prototype, "row", void 0);
+OxGristEditor = __decorate([
+    customElement('ox-grist-editor')
+], OxGristEditor);
+export { OxGristEditor };
+//# sourceMappingURL=ox-grist-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value === undefined ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}

package/dist/src/editors/registry.d.ts

@@ -1,5 +1,5 @@
-import { FieldEditor } from '../types';
 import { InputEditor } from './input-editors';
+import { FieldEditor } from '../types';
 export declare function registerEditor(type: string, editor: {
     new (): InputEditor;
 }): void;

package/dist/src/editors/registry.js

@@ -1,5 +1,5 @@
-import { ImageInput } from './image-input';
 import { CheckboxInput, ColorInput, DateInput, DateTimeInput, EmailInput, MonthInput, NumberInput, PasswordInput, Select, TelInput, TextInput, TimeInput, WeekInput } from './input-editors';
+import { ImageInput } from './image-input';
 var EDITORS = {
     string: TextInput,
     text: TextInput,

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

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,aAAa,EACb,UAAU,EAEV,UAAU,EACV,WAAW,EACX,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,IAAI,OAAO,GAAgD;IACzD,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,QAAQ;IACb,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAA+B;IAC1E,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,SAAS,CAAA;QAEhD,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 { ImageInput } from './image-input'\nimport {\n  CheckboxInput,\n  ColorInput,\n  DateInput,\n  DateTimeInput,\n  EmailInput,\n  InputEditor,\n  MonthInput,\n  NumberInput,\n  PasswordInput,\n  Select,\n  TelInput,\n  TextInput,\n  TimeInput,\n  WeekInput\n} from './input-editors'\n\nvar EDITORS: { [name: string]: { new (): InputEditor } } = {\n  string: TextInput,\n  text: TextInput,\n  email: EmailInput,\n  tel: TelInput,\n  password: PasswordInput,\n  integer: NumberInput,\n  float: NumberInput,\n  number: NumberInput,\n  select: Select,\n  boolean: CheckboxInput,\n  checkbox: CheckboxInput,\n  month: MonthInput,\n  week: WeekInput,\n  date: DateInput,\n  time: TimeInput,\n  datetime: DateTimeInput,\n  color: ColorInput,\n  progress: NumberInput,\n  link: TextInput,\n  image: ImageInput\n}\n\nexport function registerEditor(type: string, editor: { new (): InputEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): InputEditor } } {\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'] || TextInput\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":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,aAAa,EACb,UAAU,EAEV,UAAU,EACV,WAAW,EACX,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,iBAAiB,CAAA;AAIxB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,IAAI,OAAO,GAAgD;IACzD,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,QAAQ;IACb,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAA+B;IAC1E,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,SAAS,CAAA;QAEhD,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 {\n  CheckboxInput,\n  ColorInput,\n  DateInput,\n  DateTimeInput,\n  EmailInput,\n  InputEditor,\n  MonthInput,\n  NumberInput,\n  PasswordInput,\n  Select,\n  TelInput,\n  TextInput,\n  TimeInput,\n  WeekInput\n} from './input-editors'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ImageInput } from './image-input'\n\nvar EDITORS: { [name: string]: { new (): InputEditor } } = {\n  string: TextInput,\n  text: TextInput,\n  email: EmailInput,\n  tel: TelInput,\n  password: PasswordInput,\n  integer: NumberInput,\n  float: NumberInput,\n  number: NumberInput,\n  select: Select,\n  boolean: CheckboxInput,\n  checkbox: CheckboxInput,\n  month: MonthInput,\n  week: WeekInput,\n  date: DateInput,\n  time: TimeInput,\n  datetime: DateTimeInput,\n  color: ColorInput,\n  progress: NumberInput,\n  link: TextInput,\n  image: ImageInput\n}\n\nexport function registerEditor(type: string, editor: { new (): InputEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): InputEditor } } {\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'] || TextInput\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/record-view/record-view.js

@@ -60,8 +60,6 @@ RecordView.styles = [
         display: flex;
         flex-direction: column;
         background-color: var(--record-view-background-color);
-
-        max-height: 80vh;
       }
 
       ox-record-view-body {

package/dist/src/record-view/record-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAkD6B,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;QACQ,gBAAW,GAAY,KAAK,CAAA;IAoDvF,CAAC;IAlDC,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,WAAW;;;;yBAIhB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;yBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;yBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;IACpC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAxGQ,iBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;CACF,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AACQ;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CAA6B;AArD1E,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAyGtB;SAzGY,UAAU","sourcesContent":["import '@material/mwc-icon'\nimport './record-view-body'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--record-view-background-color);\n\n        max-height: 80vh;\n      }\n\n      ox-record-view-body {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      [footer] {\n        display: flex;\n        text-align: right;\n        background-color: var(--record-view-footer-background);\n        box-shadow: var(--context-toolbar-shadow-line);\n      }\n\n      [footer] button {\n        flex: 1;\n        background-color: transparent;\n        border: var(--record-view-footer-button-border);\n        border-width: var(--record-view-footer-button-border-width);\n        color: var(--record-view-footer-button-color);\n        font-size: var(--record-view-footer-button-font);\n        line-height: 3;\n      }\n\n      [footer] button * {\n        vertical-align: middle;\n      }\n\n      [footer] button mwc-icon {\n        margin-top: -3px;\n        margin-right: 5px;\n        font-size: var(--record-view-footer-iconbutton-size);\n      }\n\n      [footer] button[ok] {\n        background-color: var(--record-view-footer-focus-background);\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false\n\n  render() {\n    return html`\n      <ox-record-view-body\n        .columns=${this.columns}\n        .record=${this.record}\n        .rowIndex=${this.rowIndex}\n        ?only-for-edit=${this.onlyForEdit}\n      >\n      </ox-record-view-body>\n      <div footer>\n        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>\n        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>\n        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon>OK</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n  }\n\n  onReset() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('reset', {\n        detail: this.record\n      })\n    )\n  }\n\n  onCancel() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        detail: this.record\n      })\n    )\n  }\n\n  onOK() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('ok', {\n        detail: this.record\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAgD6B,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;QACQ,gBAAW,GAAY,KAAK,CAAA;IAoDvF,CAAC;IAlDC,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,WAAW;;;;yBAIhB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;yBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;yBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;IACpC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAtGQ,iBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;CACF,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AACQ;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CAA6B;AAnD1E,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAuGtB;SAvGY,UAAU","sourcesContent":["import '@material/mwc-icon'\nimport './record-view-body'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--record-view-background-color);\n      }\n\n      ox-record-view-body {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      [footer] {\n        display: flex;\n        text-align: right;\n        background-color: var(--record-view-footer-background);\n        box-shadow: var(--context-toolbar-shadow-line);\n      }\n\n      [footer] button {\n        flex: 1;\n        background-color: transparent;\n        border: var(--record-view-footer-button-border);\n        border-width: var(--record-view-footer-button-border-width);\n        color: var(--record-view-footer-button-color);\n        font-size: var(--record-view-footer-button-font);\n        line-height: 3;\n      }\n\n      [footer] button * {\n        vertical-align: middle;\n      }\n\n      [footer] button mwc-icon {\n        margin-top: -3px;\n        margin-right: 5px;\n        font-size: var(--record-view-footer-iconbutton-size);\n      }\n\n      [footer] button[ok] {\n        background-color: var(--record-view-footer-focus-background);\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false\n\n  render() {\n    return html`\n      <ox-record-view-body\n        .columns=${this.columns}\n        .record=${this.record}\n        .rowIndex=${this.rowIndex}\n        ?only-for-edit=${this.onlyForEdit}\n      >\n      </ox-record-view-body>\n      <div footer>\n        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>\n        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>\n        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon>OK</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n  }\n\n  onReset() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('reset', {\n        detail: this.record\n      })\n    )\n  }\n\n  onCancel() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        detail: this.record\n      })\n    )\n  }\n\n  onOK() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('ok', {\n        detail: this.record\n      })\n    )\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+export const OxGristRendererBoolean = (value, column, record, rowIndex, field) => {
+    return html `
+    <input
+      type="checkbox"
+      .checked=${!!value}
+      ?disabled=${!column.record.editable}
+      @click=${(e) => {
+        /*
+         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.
+         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.
+         *
+         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.
+         */
+        field.dispatchEvent(new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: value,
+                after: e.target.checked,
+                column: column,
+                record: record,
+                row: rowIndex
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=ox-grist-renderer-boolean.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-boolean.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-boolean.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,OAAO,IAAI,CAAA;;;iBAGI,CAAC,CAAC,KAAK;kBACN,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ;eAC1B,CAAC,CAAQ,EAAE,EAAE;QACpB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {\n  return html`\n    <input\n      type=\"checkbox\"\n      .checked=${!!value}\n      ?disabled=${!column.record.editable}\n      @click=${(e: Event) => {\n        /*\n         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n         *\n         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n         */\n        field.dispatchEvent(\n          new CustomEvent('field-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              before: value,\n              after: (e.target as HTMLInputElement).checked,\n              column: column,\n              record: record,\n              row: rowIndex\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

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

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

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

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+export const OxGristRendererColor = (value, column, record, rowIndex, field) => {
+    value = value === undefined ? '#000' : value;
+    return html `
+    <div
+      style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};"
+    >
+      <p>${value}</p>
+    </div>
+  `;
+};
+//# sourceMappingURL=ox-grist-renderer-color.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-color.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-color.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAE5C,OAAO,IAAI,CAAA;;8GAEiG,KAAK;;WAExG,KAAK;;GAEb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererColor: FieldRenderer = (value, column, record, rowIndex, field) => {\n  value = value === undefined ? '#000' : value\n\n  return html`\n    <div\n      style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};\"\n    >\n      <p>${value}</p>\n    </div>\n  `\n}\n"]}

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

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

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

@@ -0,0 +1,53 @@
+import { html } from 'lit';
+// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
+const DATETIME_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false
+};
+const DATE_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+};
+const TIME_OPTIONS = {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric'
+};
+const OPTIONS = {
+    datetime: DATETIME_OPTIONS,
+    time: TIME_OPTIONS,
+    date: DATE_OPTIONS
+};
+function getsec(time) {
+    var arr = time.split(':');
+    return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0);
+}
+/*
+  TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다.
+  따라서, 이 경우는 타임존에 대한 처리가 불필요하다.
+*/
+export const OxGristRendererDate = (value, column, record, rowIndex, field) => {
+    if (!value) {
+        return '';
+    }
+    if (!isNaN(Number(value)))
+        value = Number(value);
+    var options = column.record.options || OPTIONS[column.type];
+    var formatter = new Intl.DateTimeFormat(navigator.language, options);
+    switch (column.type) {
+        case 'datetime':
+        case 'date':
+            value = formatter.format(new Date(value));
+            break;
+        case 'time':
+        default:
+    }
+    return html `<span>${value}</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-date.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-date.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-date.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,kCAAkC;AAClC,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;CACf,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,gBAAgB;IAC1B,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED,SAAS,MAAM,CAAC,IAAY;IAC1B,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACzB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AAC5E,CAAC;AAED;;;EAGE;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAAE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEhD,IAAI,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAoC,CAAC,CAAA;IAC3F,IAAI,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAEpE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,UAAU,CAAC;QAChB,KAAK,MAAM;YACT,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;YACzC,MAAK;QACP,KAAK,MAAM,CAAC;QACZ,QAAQ;KACT;IAED,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst DATETIME_OPTIONS = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n}\n\nconst DATE_OPTIONS = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric'\n}\n\nconst TIME_OPTIONS = {\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric'\n}\n\nconst OPTIONS = {\n  datetime: DATETIME_OPTIONS,\n  time: TIME_OPTIONS,\n  date: DATE_OPTIONS\n}\n\nfunction getsec(time: string): number {\n  var arr = time.split(':')\n  return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0)\n}\n\n/* \n  TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다. \n  따라서, 이 경우는 타임존에 대한 처리가 불필요하다.\n*/\nexport const OxGristRendererDate: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) {\n    return ''\n  }\n\n  if (!isNaN(Number(value))) value = Number(value)\n\n  var options = column.record.options || OPTIONS[column.type as 'datetime' | 'date' | 'time']\n  var formatter = new Intl.DateTimeFormat(navigator.language, options)\n\n  switch (column.type) {\n    case 'datetime':\n    case 'date':\n      value = formatter.format(new Date(value))\n      break\n    case 'time':\n    default:\n  }\n\n  return html`<span>${value}</span>`\n}\n"]}

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

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

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

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href;
+export const OxGristRendererImage = (value, column, record, rowIndex, field) => {
+    let src;
+    if (!value) {
+        src = IMAGE_FALLBACK;
+    }
+    else if (typeof value === 'string') {
+        src = value;
+    }
+    else {
+        src = URL.createObjectURL(value);
+        requestAnimationFrame(() => URL.revokeObjectURL(src));
+    }
+    const { width, height } = column.record.options || {};
+    return html ` <img
+    src=${src}
+    width=${width}
+    height=${height}
+    style="object-fit: contain; max-width: 100%;"
+    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
+  />`;
+};
+//# sourceMappingURL=ox-grist-renderer-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-image.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-image.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3F,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,IAAI,GAAW,CAAA;IAEf,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,GAAG,cAAc,CAAA;KACrB;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA;UACH,GAAG;YACD,KAAK;aACJ,MAAM;;6BAEU,cAAc,qBAAqB,cAAc;KACzE,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nconst IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href\n\nexport const OxGristRendererImage: FieldRenderer = (value, column, record, rowIndex, field) => {\n  let src: string\n\n  if (!value) {\n    src = IMAGE_FALLBACK\n  } else if (typeof value === 'string') {\n    src = value\n  } else {\n    src = URL.createObjectURL(value)\n    requestAnimationFrame(() => URL.revokeObjectURL(src))\n  }\n\n  const { width, height } = column.record.options || {}\n\n  return html` <img\n    src=${src}\n    width=${width}\n    height=${height}\n    style=\"object-fit: contain; max-width: 100%;\"\n    onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\n  />`\n}\n"]}

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

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

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

@@ -0,0 +1,27 @@
+import JSON5 from 'json5';
+import { html } from 'lit';
+function onmouseover(e) {
+    const element = e.target;
+    var parsed;
+    try {
+        parsed = JSON5.parse(element.textContent);
+    }
+    catch (_a) { }
+    element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2));
+}
+function onmouseout(e) {
+    const element = e.target;
+    element.removeAttribute('data-tooltip');
+}
+export const OxGristRendererJson5 = (value, column, record, rowIndex, field) => {
+    var parsed = value;
+    if (typeof value === 'string') {
+        try {
+            parsed = JSON5.parse(value);
+        }
+        catch (_a) { }
+    }
+    const text = parsed === undefined || parsed === null ? '' : JSON5.stringify(parsed);
+    return html `<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`;
+};
+//# sourceMappingURL=ox-grist-renderer-json5.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-json5.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-json5.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAwB,CAAA;IAC1C,IAAI,MAAM,CAAA;IACV,IAAI;QACF,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3C;IAAC,WAAM,GAAE;IAEV,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;AACxE,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAwB,CAAA;IAC1C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,IAAI,MAAM,GAAQ,KAAK,CAAA;IAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,IAAI;YACF,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;SAC5B;QAAC,WAAM,GAAE;KACX;IAED,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACnF,OAAO,IAAI,CAAA,mBAAmB,WAAW,cAAc,UAAU,IAAI,IAAI,QAAQ,CAAA;AACnF,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport JSON5 from 'json5'\nimport { html } from 'lit'\n\nfunction onmouseover(e: Event) {\n  const element = e.target as HTMLPreElement\n  var parsed\n  try {\n    parsed = JSON5.parse(element.textContent!)\n  } catch {}\n\n  element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))\n}\n\nfunction onmouseout(e: Event) {\n  const element = e.target as HTMLPreElement\n  element.removeAttribute('data-tooltip')\n}\n\nexport const OxGristRendererJson5: FieldRenderer = (value, column, record, rowIndex, field) => {\n  var parsed: any = value\n\n  if (typeof value === 'string') {\n    try {\n      parsed = JSON5.parse(value)\n    } catch {}\n  }\n\n  const text = parsed === undefined || parsed === null ? '' : JSON5.stringify(parsed)\n  return html`<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`\n}\n"]}

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

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

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

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+export const OxGristRendererLink = (value, column, record, rowIndex, field) => {
+    var { href, target } = column.record.options || {};
+    value = value === undefined ? '' : value;
+    if (typeof href == 'function') {
+        href = href(value, column, record, rowIndex, field);
+    }
+    return target
+        ? html ` <a style="text-decoration:none;color:inherit" href=${href || value} target=${target}>${value}</a> `
+        : html ` <a style="text-decoration:none;color:inherit" href=${href || value}>${value}</a> `;
+};
+//# sourceMappingURL=ox-grist-renderer-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-link.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-link.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAElD,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACpD;IAED,OAAO,MAAM;QACX,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,OAAO;QAC3G,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,CAAA;AAC9F,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererLink: FieldRenderer = (value, column, record, rowIndex, field) => {\n  var { href, target } = column.record.options || {}\n\n  value = value === undefined ? '' : value\n\n  if (typeof href == 'function') {\n    href = href(value, column, record, rowIndex, field)\n  }\n\n  return target\n    ? html` <a style=\"text-decoration:none;color:inherit\" href=${href || value} target=${target}>${value}</a> `\n    : html` <a style=\"text-decoration:none;color:inherit\" href=${href || value}>${value}</a> `\n}\n"]}

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

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

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

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const OxGristRendererPassword = (value, column, record, rowIndex, field) => {
+    return html `<span>********</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-password.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-password.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-password.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,uBAAuB,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererPassword: FieldRenderer = (value, column, record, rowIndex, field) => {\n  return html`<span>********</span>`\n}\n"]}

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

@@ -0,0 +1,5 @@
+import { OxGristRenderer } from './ox-grist-renderer';
+export declare class OxGristRendererProgress extends OxGristRenderer {
+    static styles: import("lit").CSSResult;
+    get rendererTemplate(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxGristRenderer } from './ox-grist-renderer';
+let OxGristRendererProgress = class OxGristRendererProgress extends OxGristRenderer {
+    get rendererTemplate() {
+        var { min = 0, max = 100 } = this.column.record.options || {};
+        var value = Number(this.value);
+        var progress = isNaN(value) ? 0 : Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)));
+        return html `
+      <div id="border"></div>
+      <div id="bar" style="width:${progress}%">&nbsp;${progress}</div>
+    `;
+    }
+};
+OxGristRendererProgress.styles = css `
+    :host {
+      display: block;
+      position: relative;
+
+      width: 100%;
+    }
+
+    #border {
+      display: block;
+      position: absolute;
+
+      height: 100%;
+      width: 100%;
+      box-sizing: border-box;
+
+      border: var(--grist-input-progress-border);
+      background-color: var(--grist-input-progress-background);
+    }
+
+    #bar {
+      background-color: var(--grist-input-progress-bar-background);
+      text-align: left;
+      color: var(--grist-input-progress-bar-color);
+    }
+  `;
+OxGristRendererProgress = __decorate([
+    customElement('ox-grist-progress-renderer')
+], OxGristRendererProgress);
+export { OxGristRendererProgress };
+//# sourceMappingURL=ox-grist-renderer-progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-progress.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAGrD,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,eAAe;IA4B1D,IAAI,gBAAgB;QAClB,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAC7D,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QAEjG,OAAO,IAAI,CAAA;;mCAEoB,QAAQ,YAAY,QAAQ;KAC1D,CAAA;IACH,CAAC;CACF,CAAA;AArCQ,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,CAAA;AA1BU,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAsCnC;SAtCY,uBAAuB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxGristRenderer } from './ox-grist-renderer'\n\n@customElement('ox-grist-progress-renderer')\nexport class OxGristRendererProgress extends OxGristRenderer {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n\n      width: 100%;\n    }\n\n    #border {\n      display: block;\n      position: absolute;\n\n      height: 100%;\n      width: 100%;\n      box-sizing: border-box;\n\n      border: var(--grist-input-progress-border);\n      background-color: var(--grist-input-progress-background);\n    }\n\n    #bar {\n      background-color: var(--grist-input-progress-bar-background);\n      text-align: left;\n      color: var(--grist-input-progress-bar-color);\n    }\n  `\n\n  get rendererTemplate() {\n    var { min = 0, max = 100 } = this.column.record.options || {}\n    var value = Number(this.value)\n    var progress = isNaN(value) ? 0 : Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)))\n\n    return html`\n      <div id=\"border\"></div>\n      <div id=\"bar\" style=\"width:${progress}%\">&nbsp;${progress}</div>\n    `\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+export const OxGristRendererSelect = (value, column, record, rowIndex, field) => {
+    if (!value) {
+        return '';
+    }
+    var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField];
+    var options = (rowOptionField === null || rowOptionField === void 0 ? void 0 : rowOptionField.options) ? rowOptionField.options : column.record.options;
+    if (!options) {
+        console.error(`options value for select '${column.name}' column is mandatory.`);
+    }
+    else if (typeof options == 'function') {
+        options = options.call(null, value, column, record, rowIndex, field);
+    }
+    var res = options ? options.filter((option) => option.value == value) : [];
+    if (res.length) {
+        return html `<span>${res[0].display}</span>`;
+    }
+    return html `<span>${value}</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-select.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,qBAAqB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC7F,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IACD,IAAI,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IACzF,IAAI,OAAO,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,EAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;IAEtF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,6BAA6B,MAAM,CAAC,IAAI,wBAAwB,CAAC,CAAA;KAChF;SAAM,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE;QACvC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACrE;IAED,IAAI,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/E,IAAI,GAAG,CAAC,MAAM,EAAE;QACd,OAAO,IAAI,CAAA,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,SAAS,CAAA;KAC5C;IACD,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) {\n    return ''\n  }\n  var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]\n  var options = rowOptionField?.options ? rowOptionField.options : column.record.options\n\n  if (!options) {\n    console.error(`options value for select '${column.name}' column is mandatory.`)\n  } else if (typeof options == 'function') {\n    options = options.call(null, value, column, record, rowIndex, field)\n  }\n\n  var res = options ? options.filter((option: any) => option.value == value) : []\n  if (res.length) {\n    return html`<span>${res[0].display}</span>`\n  }\n  return html`<span>${value}</span>`\n}\n"]}

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

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

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

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import { detectOverflow } 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) => {
+    const text = value === undefined ? '' : value;
+    return html `<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
+};
+//# sourceMappingURL=ox-grist-renderer-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-text.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAI/C,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,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAC7C,OAAO,IAAI,CAAA,oBAAoB,WAAW,cAAc,UAAU,IAAI,IAAI,SAAS,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { detectOverflow } 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  const text = value === undefined ? '' : value\n  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`\n}\n"]}

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

@@ -0,0 +1,15 @@
+import { ColumnConfig, GristRecord } from '../types';
+import { LitElement } from 'lit';
+import { DataGridField } from '../data-grid/data-grid-field';
+export declare class OxGristRenderer extends LitElement {
+    static styles: import("lit").CSSResult;
+    value?: any;
+    column: ColumnConfig;
+    record: GristRecord;
+    rowIndex?: number;
+    field?: DataGridField;
+    row?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    get rendererTemplate(): import("lit-html").TemplateResult<1>;
+}