@operato/data-grist 9.0.0-beta.61 → 9.0.0-beta.63

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

@@ -0,0 +1,197 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
+import { getDefaultValue } from '@operato/time-calculator';
+const STYLE = css `
+  :host {
+    display: flex;
+
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+
+    overflow: hidden;
+    justify-content: var(--data-grid-field-justify-content, flex-start);
+  }
+
+  :host > * {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+
+    box-sizing: border-box;
+
+    align-items: center;
+  }
+
+  :host > style {
+    display: none;
+  }
+
+  :host > input {
+    color: var(--md-sys-color-on-background);
+  }
+
+  :host > input[type='checkbox'] {
+    width: initial;
+    margin: 0;
+  }
+  *:focus {
+    outline: none;
+  }
+
+  input[type='file'] {
+    opacity: 0%;
+  }
+
+  @media screen and (max-width: 460px) {
+    :host > * {
+      border: initial;
+      background-color: initial;
+    }
+
+    *:focus {
+      outline: none;
+    }
+
+    input,
+    select,
+    textarea {
+      font-size: 16px;
+    }
+  }
+`;
+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;
+    }
+    get inlineEditable() {
+        return false;
+    }
+    async firstUpdated() {
+        var _a;
+        this.renderRoot.addEventListener('change', this._onchange.bind(this));
+        this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
+        this.addEventListener('click', this._onclick.bind(this));
+        this.addEventListener('dblclick', this._ondblclick.bind(this));
+        this.addEventListener('keydown', this._onkeydown.bind(this));
+        /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */
+        this.addEventListener('pointerdown', (e) => e.stopPropagation());
+        this.addEventListener('pointermove', (e) => e.stopPropagation());
+        this.addEventListener('pointerup', (e) => e.stopPropagation());
+        const { name = '' } = this.column;
+        const { align, defaultValue } = this.column.record;
+        if (align) {
+            this.style.textAlign = align;
+            this.style.textAlignLast = align; /* for select */
+        }
+        var currentValue = this.record[name];
+        if (typeof currentValue == 'undefined' && defaultValue) {
+            currentValue = getDefaultValue(defaultValue, this.record);
+        }
+        this.value = this._dirtyValue = this.formatForEditor(currentValue);
+        // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
+        const valueWith = this.inlineEditable && ((_a = this.field) === null || _a === void 0 ? void 0 : _a.valueWith);
+        this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue);
+        requestAnimationFrame(() => {
+            this.focus();
+            !valueWith && this.select();
+        });
+    }
+    select() {
+        const editor = this.editor;
+        if (editor === null || editor === void 0 ? void 0 : editor.select) {
+            return editor.select();
+        }
+    }
+    focus() {
+        const editor = this.editor;
+        if (editor) {
+            editor.focus();
+        }
+    }
+    formatForEditor(value) {
+        return value == null ? '' : value;
+    }
+    formatFromEditor(value) {
+        return value;
+    }
+    _onfocusout() {
+        var _a;
+        // paste시 field-change는 Body에서 하므로 X
+        if (((_a = this.field) === null || _a === void 0 ? void 0 : _a.isWorking) === true)
+            return;
+        const { name = '' } = this.column;
+        var currentValue = this.record[name] || '';
+        if (this._dirtyValue !== currentValue) {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: currentValue,
+                    after: this._dirtyValue,
+                    column: this.column,
+                    record: this.record,
+                    row: this.row
+                }
+            }));
+        }
+    }
+    _onchange(e) {
+        var _a;
+        e.stopPropagation();
+        const value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+        this._dirtyValue = this.formatFromEditor(value);
+    }
+    _onkeydown(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 { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\nimport { getDefaultValue } from '@operato/time-calculator'\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    overflow: hidden;\n    justify-content: var(--data-grid-field-justify-content, flex-start);\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    align-items: center;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input {\n    color: var(--md-sys-color-on-background);\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: 0;\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\n    *:focus {\n      outline: none;\n    }\n\n    input,\n    select,\n    textarea {\n      font-size: 16px;\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  get inlineEditable() {\n    return false\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.addEventListener('click', this._onclick.bind(this))\n    this.addEventListener('dblclick', this._ondblclick.bind(this))\n    this.addEventListener('keydown', this._onkeydown.bind(this))\n\n    /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */\n    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())\n    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())\n\n    const { name = '' } = this.column\n    const { align, defaultValue } = this.column.record\n\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    var currentValue = this.record[name]\n\n    if (typeof currentValue == 'undefined' && defaultValue) {\n      currentValue = getDefaultValue(defaultValue, this.record)\n    }\n\n    this.value = this._dirtyValue = this.formatForEditor(currentValue)\n\n    // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환\n    const valueWith = this.inlineEditable && this.field?.valueWith\n    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)\n\n    requestAnimationFrame(() => {\n      this.focus()\n      !valueWith && this.select()\n    })\n  }\n\n  select() {\n    const editor = this.editor\n    if ((editor as HTMLInputElement)?.select) {\n      return (editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    const editor = this.editor\n    if (editor) {\n      editor.focus()\n    }\n  }\n\n  formatForEditor(value: any): any {\n    return value == null ? '' : value\n  }\n\n  formatFromEditor(value: any): any {\n    return value\n  }\n\n  _onfocusout() {\n    // paste시 field-change는 Body에서 하므로 X\n    if (this.field?.isWorking === true) return\n\n    const { name = '' } = this.column\n    var currentValue = this.record[name] || ''\n\n    if (this._dirtyValue !== currentValue) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: currentValue,\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    const value = (e.target as any)?.value\n\n    this._dirtyValue = this.formatFromEditor(value)\n  }\n\n  _onkeydown(e: Event): void {}\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/ox-input-tree.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyValues } from 'lit';
+import { OxFormField } from '@operato/input';
+import { GristRecord } from '../types.js';
+export declare class OxInputTree extends OxFormField {
+    static styles: import("lit").CSSResult;
+    record: GristRecord;
+    selectable?: boolean;
+    private checked?;
+    private expanded?;
+    input: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    focus(): void;
+    select(): void;
+    onClickCheckbox(e: MouseEvent): void;
+    onClickExpander(e: MouseEvent): void;
+}

package/dist/src/editors/ox-input-tree.js

@@ -0,0 +1,221 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { OxFormField } from '@operato/input';
+let OxInputTree = class OxInputTree extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+    }
+    render() {
+        var { __children__ } = this.record;
+        const expandable = __children__ && __children__.length > 0;
+        return html `
+      <div wrap>
+        ${expandable
+            ? html `
+              <span
+                expander
+                @click=${this.onClickExpander.bind(this)}
+                ?expanded=${this.expanded}
+                ?collapsed=${!this.expanded}
+              ></span>
+            `
+            : html `<span expander></span>`}
+        ${this.selectable
+            ? html ` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`
+            : nothing}
+
+        <span label
+          ><input
+            value=${ifDefined(this.value)}
+            @change=${(e) => {
+            e.stopPropagation();
+            this.value = e.target.value;
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        }}
+            focus
+        /></span>
+
+        <!-- <span label>${this.value}</span> -->
+      </div>
+    `;
+    }
+    updated(changes) {
+        var { __depth__, __check_in_tree__, __expanded__ } = this.record;
+        this.checked = __check_in_tree__;
+        this.expanded = __expanded__;
+        this.style.setProperty('--tree-depth', String(__depth__));
+    }
+    focus() {
+        this.input.focus();
+    }
+    select() {
+        this.input.select();
+    }
+    onClickCheckbox(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('check-in-tree', {
+            bubbles: true,
+            composed: true,
+            detail: this.record
+        }));
+        this.requestUpdate();
+    }
+    onClickExpander(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
+            bubbles: true,
+            composed: true,
+            detail: this.record
+        }));
+        this.requestUpdate();
+    }
+};
+OxInputTree.styles = css `
+    :host {
+      overflow: hidden;
+    }
+
+    div[wrap] {
+      flex: 1;
+
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      padding-left: calc(var(--tree-depth, 0) * 18px);
+    }
+
+    span[expander] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[expander][collapsed]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-25%, -50%) rotate(-90deg);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
+    }
+
+    span[expander][expanded]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -25%);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
+    }
+
+    span[checkbox] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[checkbox]::before {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      display: block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
+      border-radius: 2px;
+    }
+
+    span[checkbox][checked='checked']::before {
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
+    }
+
+    span[checkbox][checked='checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 7px;
+      border: 2px solid #fff;
+      border-top: none;
+      border-left: none;
+      -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    span[checkbox][checked='half-checked']::before {
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
+    }
+
+    span[checkbox][checked='half-checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+      height: 2px;
+      background-color: var(--md-sys-color-surface);
+    }
+
+    span[label] {
+      flex: 1;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background-color: transparent;
+      box-sizing: border-box;
+    }
+
+    input:focus {
+      outline: none;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputTree.prototype, "record", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputTree.prototype, "selectable", void 0);
+__decorate([
+    state()
+], OxInputTree.prototype, "checked", void 0);
+__decorate([
+    state()
+], OxInputTree.prototype, "expanded", void 0);
+__decorate([
+    query('input')
+], OxInputTree.prototype, "input", void 0);
+OxInputTree = __decorate([
+    customElement('ox-input-tree')
+], OxInputTree);
+export { OxInputTree };
+//# sourceMappingURL=ox-input-tree.js.map

package/dist/src/editors/ox-input-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-tree.js","sourceRoot":"","sources":["../../../src/editors/ox-input-tree.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxFormField } from '@operato/input'\nimport { GristRecord } from '../types.js'\n\n@customElement('ox-input-tree')\nexport class OxInputTree extends OxFormField {\n  static styles = css`\n    :host {\n      overflow: hidden;\n    }\n\n    div[wrap] {\n      flex: 1;\n\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      padding-left: calc(var(--tree-depth, 0) * 18px);\n    }\n\n    span[expander] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[expander][collapsed]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-25%, -50%) rotate(-90deg);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);\n    }\n\n    span[expander][expanded]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -25%);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);\n    }\n\n    span[checkbox] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[checkbox]::before {\n      cursor: pointer;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: ' ';\n      display: block;\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);\n      border-radius: 2px;\n    }\n\n    span[checkbox][checked='checked']::before {\n      background-color: var(--md-sys-color-on-primary-container, #1890ff);\n      border-color: var(--md-sys-color-on-primary-container, #1890ff);\n    }\n\n    span[checkbox][checked='checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      width: 3px;\n      height: 7px;\n      border: 2px solid #fff;\n      border-top: none;\n      border-left: none;\n      -webkit-transform: translate(-50%, -50%) rotate(45deg);\n      -ms-transform: translate(-50%, -50%) rotate(45deg);\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    span[checkbox][checked='half-checked']::before {\n      background-color: var(--md-sys-color-on-primary-container, #1890ff);\n      border-color: var(--md-sys-color-on-primary-container, #1890ff);\n    }\n\n    span[checkbox][checked='half-checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 10px;\n      height: 2px;\n      background-color: var(--md-sys-color-surface);\n    }\n\n    span[label] {\n      flex: 1;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      border: 0;\n      background-color: transparent;\n      box-sizing: border-box;\n    }\n\n    input:focus {\n      outline: none;\n    }\n  `\n\n  @property({ type: Object }) record!: GristRecord\n  @property({ type: Boolean }) selectable?: boolean\n\n  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'\n  @state() private expanded?: boolean = false\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    var { __children__ } = this.record\n\n    const expandable = __children__ && __children__.length > 0\n\n    return html`\n      <div wrap>\n        ${expandable\n          ? html`\n              <span\n                expander\n                @click=${this.onClickExpander.bind(this)}\n                ?expanded=${this.expanded}\n                ?collapsed=${!this.expanded}\n              ></span>\n            `\n          : html`<span expander></span>`}\n        ${this.selectable\n          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`\n          : nothing}\n\n        <span label\n          ><input\n            value=${ifDefined(this.value)}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n              this.value = (e.target as HTMLInputElement).value\n              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n            }}\n            focus\n        /></span>\n\n        <!-- <span label>${this.value}</span> -->\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var { __depth__, __check_in_tree__, __expanded__ } = this.record\n    this.checked = __check_in_tree__\n    this.expanded = __expanded__\n\n    this.style.setProperty('--tree-depth', String(__depth__))\n  }\n\n  focus() {\n    this.input.focus()\n  }\n\n  select() {\n    this.input.select()\n  }\n\n  onClickCheckbox(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent('check-in-tree', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { FieldEditor } from '../types.js';
+import { OxGristEditor } from './ox-grist-editor.js';
+export declare function registerEditor(type: string, editor: {
+    new (): OxGristEditor;
+}): void;
+export declare function unregisterEditor(type: string): void;
+export declare function getEditors(): {
+    [name: string]: {
+        new (): OxGristEditor;
+    };
+};
+export declare function getEditor(type: string): FieldEditor;

package/dist/src/editors/registry.js

@@ -0,0 +1,71 @@
+import { OxGristEditorCheckbox } from './ox-grist-editor-checkbox.js';
+import { OxGristEditorColor } from './ox-grist-editor-color.js';
+import { OxGristEditorDate } from './ox-grist-editor-date.js';
+import { OxGristEditorDateTime } from './ox-grist-editor-datetime.js';
+import { OxGristEditorEmail } from './ox-grist-editor-email.js';
+import { OxGristEditorFile } from './ox-grist-editor-file.js';
+import { OxGristEditorImage } from './ox-grist-editor-image.js';
+import { OxGristEditorMonth } from './ox-grist-editor-month.js';
+import { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select.js';
+import { OxGristEditorNumber } from './ox-grist-editor-number.js';
+import { OxGristEditorPassword } from './ox-grist-editor-password.js';
+import { OxGristEditorSelect } from './ox-grist-editor-select.js';
+import { OxGristEditorTel } from './ox-grist-editor-tel.js';
+import { OxGristEditorText } from './ox-grist-editor-text.js';
+import { OxGristEditorTextarea } from './ox-grist-editor-textarea.js';
+import { OxGristEditorTime } from './ox-grist-editor-time.js';
+import { OxGristEditorTree } from './ox-grist-editor-tree.js';
+import { OxGristEditorWeek } from './ox-grist-editor-week.js';
+import { OxGristEditorVarname } from './ox-grist-editor-varname.js';
+var EDITORS = {
+    string: OxGristEditorText,
+    text: OxGristEditorText,
+    textarea: OxGristEditorTextarea,
+    email: OxGristEditorEmail,
+    tel: OxGristEditorTel,
+    password: OxGristEditorPassword,
+    integer: OxGristEditorNumber,
+    float: OxGristEditorNumber,
+    number: OxGristEditorNumber,
+    select: OxGristEditorSelect,
+    boolean: OxGristEditorCheckbox,
+    checkbox: OxGristEditorCheckbox,
+    month: OxGristEditorMonth,
+    week: OxGristEditorWeek,
+    date: OxGristEditorDate,
+    time: OxGristEditorTime,
+    datetime: OxGristEditorDateTime,
+    color: OxGristEditorColor,
+    progress: OxGristEditorNumber,
+    link: OxGristEditorText,
+    image: OxGristEditorImage,
+    file: OxGristEditorFile,
+    'string[]': OxGristEditorMultipleSelect,
+    tree: OxGristEditorTree,
+    varname: OxGristEditorVarname
+};
+export function registerEditor(type, editor) {
+    EDITORS[type] = editor;
+}
+export function unregisterEditor(type) {
+    delete EDITORS[type];
+}
+export function getEditors() {
+    return { ...EDITORS };
+}
+export function getEditor(type) {
+    if (typeof type == 'function') {
+        return type;
+    }
+    return function (value, column, record, rowIndex, field) {
+        var clazz = EDITORS[type || 'text'] || OxGristEditorText;
+        var element = new clazz();
+        element.value = value;
+        element.record = record;
+        element.column = column;
+        element.row = rowIndex;
+        element.field = field;
+        return element;
+    };
+}
+//# sourceMappingURL=registry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field.js'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types.js'\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox.js'\nimport { OxGristEditorColor } from './ox-grist-editor-color.js'\nimport { OxGristEditorDate } from './ox-grist-editor-date.js'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime.js'\nimport { OxGristEditorEmail } from './ox-grist-editor-email.js'\nimport { OxGristEditorFile } from './ox-grist-editor-file.js'\nimport { OxGristEditorImage } from './ox-grist-editor-image.js'\nimport { OxGristEditorMonth } from './ox-grist-editor-month.js'\nimport { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select.js'\nimport { OxGristEditorNumber } from './ox-grist-editor-number.js'\nimport { OxGristEditorPassword } from './ox-grist-editor-password.js'\nimport { OxGristEditorSelect } from './ox-grist-editor-select.js'\nimport { OxGristEditorTel } from './ox-grist-editor-tel.js'\nimport { OxGristEditorText } from './ox-grist-editor-text.js'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea.js'\nimport { OxGristEditorTime } from './ox-grist-editor-time.js'\nimport { OxGristEditorTree } from './ox-grist-editor-tree.js'\nimport { OxGristEditorWeek } from './ox-grist-editor-week.js'\nimport { OxGristEditorVarname } from './ox-grist-editor-varname.js'\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  'string[]': OxGristEditorMultipleSelect,\n  tree: OxGristEditorTree,\n  varname: OxGristEditorVarname\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/empty-note.d.ts

@@ -0,0 +1,9 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+export declare class EmptyNote extends LitElement {
+    static styles: import("lit").CSSResult;
+    icon?: string;
+    title: string;
+    description?: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/empty-note.js

@@ -0,0 +1,53 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let EmptyNote = class EmptyNote extends LitElement {
+    render() {
+        return html `
+      ${this.icon ? html `<md-icon>${this.icon}</md-icon>` : html ``}
+      <div titler>${this.title}</div>
+      ${this.description ? html `<div description>${this.description}</div>` : html ``}
+    `;
+    }
+};
+EmptyNote.styles = css `
+    :host {
+      display: block;
+      text-align: center;
+    }
+
+    md-icon {
+      font: var(--oops-note-icon-font);
+      color: var(--oops-note-icon-color);
+      border: var(--oops-note-icon-border);
+      border-radius: var(--oops-note-icon-border-radius);
+      padding: var(--oops-note-icon-padding);
+    }
+
+    [titler] {
+      margin: var(--oops-note-title-margin);
+      font: var(--oops-note-title-font);
+      color: var(--oops-note-title-color);
+      text-transform: capitalize;
+    }
+
+    [description] {
+      font: var(--oops-note-description-font);
+      color: var(--oops-note-description-color);
+    }
+  `;
+__decorate([
+    property()
+], EmptyNote.prototype, "icon", void 0);
+__decorate([
+    property()
+], EmptyNote.prototype, "title", void 0);
+__decorate([
+    property()
+], EmptyNote.prototype, "description", void 0);
+EmptyNote = __decorate([
+    customElement('ox-empty-note')
+], EmptyNote);
+export { EmptyNote };
+//# sourceMappingURL=empty-note.js.map

package/dist/src/empty-note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-note.js","sourceRoot":"","sources":["../../src/empty-note.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAgCvC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;oBAC9C,IAAI,CAAC,KAAK;QACtB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;KAC/E,CAAA;IACH,CAAC;;AArCM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,AAzBY,CAyBZ;AAEW;IAAX,QAAQ,EAAE;uCAAc;AACb;IAAX,QAAQ,EAAE;wCAAe;AACd;IAAX,QAAQ,EAAE;8CAAqB;AA9BrB,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC;GAClB,SAAS,CAuCrB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-empty-note')\nexport class EmptyNote extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      text-align: center;\n    }\n\n    md-icon {\n      font: var(--oops-note-icon-font);\n      color: var(--oops-note-icon-color);\n      border: var(--oops-note-icon-border);\n      border-radius: var(--oops-note-icon-border-radius);\n      padding: var(--oops-note-icon-padding);\n    }\n\n    [titler] {\n      margin: var(--oops-note-title-margin);\n      font: var(--oops-note-title-font);\n      color: var(--oops-note-title-color);\n      text-transform: capitalize;\n    }\n\n    [description] {\n      font: var(--oops-note-description-font);\n      color: var(--oops-note-description-color);\n    }\n  `\n\n  @property() icon?: string\n  @property() title!: string\n  @property() description?: string\n\n  render() {\n    return html`\n      ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : html``}\n      <div titler>${this.title}</div>\n      ${this.description ? html`<div description>${this.description}</div>` : html``}\n    `\n  }\n}\n"]}

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

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