@operato/input 1.0.0-alpha.11 → 1.0.0-alpha.14

package/dist/src/ox-input-table.js

@@ -0,0 +1,379 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
+import '@polymer/paper-item/paper-item';
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-color.js';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+/**
+ * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.
+ * Example:
+ * <ox-input-table value=${border}>
+ * </ox-input-table>
+ */
+let OxInputTable = class OxInputTable extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.borderWidth = 1;
+        this.borderColor = 'black';
+        this.borderStyle = 'solid';
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          display: block;
+        }
+
+        fieldset {
+          border: none;
+          border-bottom: 1px solid #cfd8dc;
+          color: var(--primary-text-color);
+          font-size: 12px;
+          padding: 0 0 10px 0;
+          margin: 0 0 10px 0;
+        }
+
+        fieldset legend {
+          padding: 5px 0 0 5px;
+          font-size: 11px;
+          color: #e46c2e;
+          font-weight: bold;
+          text-transform: capitalize;
+        }
+
+        .icon-only-label {
+          background: url(/assets/images/icon-properties-label.png) no-repeat;
+          width: 30px;
+          height: 24px;
+        }
+
+        .property-grid {
+          display: grid;
+          grid-template-columns: repeat(10, 1fr);
+          grid-gap: 5px;
+          grid-auto-rows: minmax(24px, auto);
+          margin: 10px 0 0 0;
+        }
+
+        .property-grid > * {
+          line-height: 1.5;
+        }
+
+        #border-set > mwc-icon {
+          grid-column: span 2;
+          margin: 0 0 0 8px;
+          width: 32px;
+          height: 32px;
+        }
+
+        .property-grid > label {
+          grid-column: span 3;
+          text-align: right;
+          text-transform: capitalize;
+        }
+
+        .property-grid > label.icon-only-label {
+          grid-column: span 1;
+        }
+
+        .property-grid > ox-input-color,
+        .property-grid > input[type='number'] {
+          grid-column: span 4;
+          padding: 0;
+          margin: 0;
+        }
+
+        .property-grid > paper-dropdown-menu {
+          grid-column: span 7;
+          padding: 0;
+          margin: 0;
+        }
+
+        [table-event] {
+          position: relative;
+          background: url('/assets/images/icon-properties-table.png') no-repeat;
+          grid-column: span 2;
+          min-height: 65px;
+        }
+
+        [table-event] span {
+          position: absolute;
+          bottom: 0;
+          font-size: 0.9em;
+          line-height: 1.2;
+          text-transform: capitalize;
+          text-align: center;
+          vertical-align: bottom;
+        }
+
+        #merge-cells {
+          background-position: 50% 3px;
+        }
+
+        #split-cells {
+          background-position: 50% -97px;
+        }
+
+        #delete-row {
+          background-position: 50% -197px;
+        }
+
+        #delete-column {
+          background-position: 50% -297px;
+        }
+
+        #insert-above {
+          background-position: 50% -397px;
+        }
+
+        #insert-below {
+          background-position: 50% -497px;
+        }
+
+        #insert-left {
+          background-position: 50% -597px;
+        }
+
+        #insert-right {
+          background-position: 50% -697px;
+        }
+
+        #distribute-horizontal {
+          background-position: 50% -797px;
+        }
+
+        #distribute-vertical {
+          background-position: 50% -897px;
+        }
+
+        .line-type paper-item {
+          background: no-repeat url(/assets/images/icon-properties-line-type.png);
+          width: 80px;
+          min-height: 25px;
+        }
+        .line-type paper-item.solid {
+          background-position: 50% 12px;
+        }
+        .line-type paper-item.round-dot {
+          background-position: 50% -38px;
+        }
+        .line-type paper-item.square-dot {
+          background-position: 50% -88px;
+        }
+        .line-type paper-item.dash {
+          background-position: 50% -138px;
+        }
+        .line-type paper-item.dash-dot {
+          background-position: 50% -188px;
+        }
+        .line-type paper-item.long-dash {
+          background-position: 50% -238px;
+        }
+        .line-type paper-item.long-dash-dot {
+          background-position: 50% -288px;
+        }
+        .line-type paper-item.long-dash-dot-dot {
+          background-position: 50% -338px;
+        }
+      `
+        ];
+    }
+    firstUpdated() {
+        this.borderFieldSet.addEventListener('change', this._onClickType.bind(this));
+    }
+    render() {
+        return html `
+      <fieldset id="border-fieldset">
+        <legend><ox-i18n msgid="label.border-style">border style</ox-i18n></legend>
+
+        <div
+          id="border-set"
+          class="property-grid
+          border-style-btn"
+          @click=${(e) => this._onClickType(e)}
+        >
+          <mwc-icon data-value="out">border_outer</mwc-icon>
+          <mwc-icon data-value="in">border_inner</mwc-icon>
+          <mwc-icon data-value="all">border_all</mwc-icon>
+          <mwc-icon data-value="left">border_left</mwc-icon>
+          <mwc-icon data-value="center">border_vertical</mwc-icon>
+          <mwc-icon data-value="right">border_right</mwc-icon>
+          <mwc-icon data-value="top">border_top</mwc-icon>
+          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
+          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
+          <mwc-icon data-value="clear">border_clear</mwc-icon>
+        </div>
+
+        <div class="property-grid">
+          <label class="icon-only-label linewidth"> </label>
+          <input
+            type="number"
+            id="border-width"
+            @change=${(e) => (this.borderWidth = Number(e.target.value))}
+            .value=${this.borderWidth}
+          />
+
+          <label class="icon-only-label color"> </label>
+          <ox-input-color
+            id="border-color"
+            @change=${(e) => (this.borderColor = e.target.value)}
+            .value=${this.borderColor}
+          >
+          </ox-input-color>
+
+          <label> <ox-i18n msgid="label.border-type">border type</ox-i18n> </label>
+          <paper-dropdown-menu no-label-float="true" class="line-type solid">
+            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
+            <paper-listbox
+              id="border-style"
+              @iron-select=${(e) => (this.borderStyle = e.target.selected)}
+              slot="dropdown-content"
+              .selected=${this.borderStyle}
+              attr-for-selected="name"
+            >
+              <paper-item class="solid" name="solid"></paper-item>
+              <paper-item class="round-dot" name="round-dot"></paper-item>
+              <paper-item class="square-dot" name="square-dot"></paper-item>
+              <paper-item class="dash" name="dash"></paper-item>
+              <paper-item class="dash-dot" name="dash-dot"></paper-item>
+              <paper-item class="long-dash" name="long-dash"></paper-item>
+              <paper-item class="long-dash-dot" name="long-dash-dot"></paper-item>
+              <paper-item class="long-dash-dot-dot" name="long-dash-dot-dot"></paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+      </fieldset>
+
+      <fieldset id="cell-fieldset" @click=${(e) => this._onClickCell(e)}>
+        <div class="property-grid">
+          <div id="merge-cells" table-event><span>merge cells</span></div>
+          <div id="split-cells" table-event><span>split cells</span></div>
+          <div id="delete-row" table-event><span>delete row</span></div>
+          <div id="delete-column" table-event><span>delete column</span></div>
+          <div id="insert-above" table-event><span>insert above</span></div>
+          <div id="insert-below" table-event><span>insert below</span></div>
+          <div id="insert-left" table-event><span>insert left</span></div>
+          <div id="insert-right" table-event><span>insert right</span></div>
+          <div id="distribute-horizontal" table-event><span>distribute horizontal</span></div>
+          <div id="distribute-vertical" table-event><span>distribute vertical</span></div>
+        </div>
+      </fieldset>
+    `;
+    }
+    _onClickCell(e) {
+        var target = e.target;
+        const event = target?.closest('[table-event]')?.getAttribute('id');
+        if (!event) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const table = selected[0].parent;
+                    switch (event) {
+                        case 'delete-row':
+                            table.deleteRows(selected);
+                            break;
+                        case 'delete-column':
+                            table.deleteColumns(selected);
+                            break;
+                        case 'insert-above':
+                            table.insertCellsAbove(selected);
+                            break;
+                        case 'insert-below':
+                            table.insertCellsBelow(selected);
+                            break;
+                        case 'insert-left':
+                            table.insertCellsLeft(selected);
+                            break;
+                        case 'insert-right':
+                            table.insertCellsRight(selected);
+                            break;
+                        case 'merge-cells':
+                            table.mergeCells(selected);
+                            break;
+                        case 'split-cells':
+                            table.splitCells(selected);
+                            break;
+                        case 'distribute-horizontal':
+                            table.distributeHorizontal(selected);
+                            break;
+                        case 'distribute-vertical':
+                            table.distributeVertical(selected);
+                            break;
+                    }
+                }
+            }
+        }));
+        this.value = {
+            borderWidth: this.borderWidth,
+            borderColor: this.borderColor,
+            borderStyle: this.borderStyle
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.value,
+            bubbles: true,
+            composed: true
+        }));
+        e.stopPropagation();
+    }
+    _onClickType(e) {
+        var target = e.target;
+        const where = target?.closest('[data-value]')?.getAttribute('data-value');
+        if (!where) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const table = selected[0].parent;
+                    table.setCellsStyle(selected, {
+                        strokeStyle: this.borderColor,
+                        lineDash: this.borderStyle,
+                        lineWidth: this.borderWidth
+                    }, where);
+                }
+            }
+        }));
+        this.value = {
+            borderWidth: this.borderWidth,
+            borderColor: this.borderColor,
+            borderStyle: this.borderStyle
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.value,
+            bubbles: true,
+            composed: true
+        }));
+        e.stopPropagation();
+    }
+};
+__decorate([
+    property({ type: Number })
+], OxInputTable.prototype, "borderWidth", void 0);
+__decorate([
+    property({ type: String })
+], OxInputTable.prototype, "borderColor", void 0);
+__decorate([
+    property({ type: String })
+], OxInputTable.prototype, "borderStyle", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputTable.prototype, "value", void 0);
+__decorate([
+    query('#border-fieldset')
+], OxInputTable.prototype, "borderFieldSet", void 0);
+OxInputTable = __decorate([
+    customElement('ox-input-table')
+], OxInputTable);
+//# sourceMappingURL=ox-input-table.js.map

package/dist/src/ox-input-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype BorderStyle =\n  | 'solid'\n  | 'round-dot'\n  | 'square-dot'\n  | 'dash'\n  | 'dash-dot'\n  | 'long-dash'\n  | 'long-dash-dot'\n  | 'long-dash-dot-dot'\n\n/**\n * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nclass OxInputTable extends OxFormField {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: block;\n        }\n\n        fieldset {\n          border: none;\n          border-bottom: 1px solid #cfd8dc;\n          color: var(--primary-text-color);\n          font-size: 12px;\n          padding: 0 0 10px 0;\n          margin: 0 0 10px 0;\n        }\n\n        fieldset legend {\n          padding: 5px 0 0 5px;\n          font-size: 11px;\n          color: #e46c2e;\n          font-weight: bold;\n          text-transform: capitalize;\n        }\n\n        .icon-only-label {\n          background: url(/assets/images/icon-properties-label.png) no-repeat;\n          width: 30px;\n          height: 24px;\n        }\n\n        .property-grid {\n          display: grid;\n          grid-template-columns: repeat(10, 1fr);\n          grid-gap: 5px;\n          grid-auto-rows: minmax(24px, auto);\n          margin: 10px 0 0 0;\n        }\n\n        .property-grid > * {\n          line-height: 1.5;\n        }\n\n        #border-set > mwc-icon {\n          grid-column: span 2;\n          margin: 0 0 0 8px;\n          width: 32px;\n          height: 32px;\n        }\n\n        .property-grid > label {\n          grid-column: span 3;\n          text-align: right;\n          text-transform: capitalize;\n        }\n\n        .property-grid > label.icon-only-label {\n          grid-column: span 1;\n        }\n\n        .property-grid > ox-input-color,\n        .property-grid > input[type='number'] {\n          grid-column: span 4;\n          padding: 0;\n          margin: 0;\n        }\n\n        .property-grid > paper-dropdown-menu {\n          grid-column: span 7;\n          padding: 0;\n          margin: 0;\n        }\n\n        [table-event] {\n          position: relative;\n          background: url('/assets/images/icon-properties-table.png') no-repeat;\n          grid-column: span 2;\n          min-height: 65px;\n        }\n\n        [table-event] span {\n          position: absolute;\n          bottom: 0;\n          font-size: 0.9em;\n          line-height: 1.2;\n          text-transform: capitalize;\n          text-align: center;\n          vertical-align: bottom;\n        }\n\n        #merge-cells {\n          background-position: 50% 3px;\n        }\n\n        #split-cells {\n          background-position: 50% -97px;\n        }\n\n        #delete-row {\n          background-position: 50% -197px;\n        }\n\n        #delete-column {\n          background-position: 50% -297px;\n        }\n\n        #insert-above {\n          background-position: 50% -397px;\n        }\n\n        #insert-below {\n          background-position: 50% -497px;\n        }\n\n        #insert-left {\n          background-position: 50% -597px;\n        }\n\n        #insert-right {\n          background-position: 50% -697px;\n        }\n\n        #distribute-horizontal {\n          background-position: 50% -797px;\n        }\n\n        #distribute-vertical {\n          background-position: 50% -897px;\n        }\n\n        .line-type paper-item {\n          background: no-repeat url(/assets/images/icon-properties-line-type.png);\n          width: 80px;\n          min-height: 25px;\n        }\n        .line-type paper-item.solid {\n          background-position: 50% 12px;\n        }\n        .line-type paper-item.round-dot {\n          background-position: 50% -38px;\n        }\n        .line-type paper-item.square-dot {\n          background-position: 50% -88px;\n        }\n        .line-type paper-item.dash {\n          background-position: 50% -138px;\n        }\n        .line-type paper-item.dash-dot {\n          background-position: 50% -188px;\n        }\n        .line-type paper-item.long-dash {\n          background-position: 50% -238px;\n        }\n        .line-type paper-item.long-dash-dot {\n          background-position: 50% -288px;\n        }\n        .line-type paper-item.long-dash-dot-dot {\n          background-position: 50% -338px;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Number }) borderWidth: number = 1\n  @property({ type: String }) borderColor: string = 'black'\n  @property({ type: String }) borderStyle: BorderStyle = 'solid'\n  @property({ type: Object }) value: any\n\n  @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n  firstUpdated() {\n    this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset id=\"border-fieldset\">\n        <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n        <div\n          id=\"border-set\"\n          class=\"property-grid\n          border-style-btn\"\n          @click=${(e: Event) => this._onClickType(e)}\n        >\n          <mwc-icon data-value=\"out\">border_outer</mwc-icon>\n          <mwc-icon data-value=\"in\">border_inner</mwc-icon>\n          <mwc-icon data-value=\"all\">border_all</mwc-icon>\n          <mwc-icon data-value=\"left\">border_left</mwc-icon>\n          <mwc-icon data-value=\"center\">border_vertical</mwc-icon>\n          <mwc-icon data-value=\"right\">border_right</mwc-icon>\n          <mwc-icon data-value=\"top\">border_top</mwc-icon>\n          <mwc-icon data-value=\"middle\">border_horizontal</mwc-icon>\n          <mwc-icon data-value=\"bottom\">border_bottom</mwc-icon>\n          <mwc-icon data-value=\"clear\">border_clear</mwc-icon>\n        </div>\n\n        <div class=\"property-grid\">\n          <label class=\"icon-only-label linewidth\"> </label>\n          <input\n            type=\"number\"\n            id=\"border-width\"\n            @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n            .value=${this.borderWidth}\n          />\n\n          <label class=\"icon-only-label color\"> </label>\n          <ox-input-color\n            id=\"border-color\"\n            @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n            .value=${this.borderColor}\n          >\n          </ox-input-color>\n\n          <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              id=\"border-style\"\n              @iron-select=${(e: Event) => (this.borderStyle = (e.target as any).selected)}\n              slot=\"dropdown-content\"\n              .selected=${this.borderStyle}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n        </div>\n      </fieldset>\n\n      <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n        <div class=\"property-grid\">\n          <div id=\"merge-cells\" table-event><span>merge cells</span></div>\n          <div id=\"split-cells\" table-event><span>split cells</span></div>\n          <div id=\"delete-row\" table-event><span>delete row</span></div>\n          <div id=\"delete-column\" table-event><span>delete column</span></div>\n          <div id=\"insert-above\" table-event><span>insert above</span></div>\n          <div id=\"insert-below\" table-event><span>insert below</span></div>\n          <div id=\"insert-left\" table-event><span>insert left</span></div>\n          <div id=\"insert-right\" table-event><span>insert right</span></div>\n          <div id=\"distribute-horizontal\" table-event><span>distribute horizontal</span></div>\n          <div id=\"distribute-vertical\" table-event><span>distribute vertical</span></div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  _onClickCell(e: Event) {\n    var target = e.target as HTMLElement\n\n    const event = target?.closest('[table-event]')?.getAttribute('id')\n    if (!event) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            switch (event) {\n              case 'delete-row':\n                table.deleteRows(selected)\n                break\n              case 'delete-column':\n                table.deleteColumns(selected)\n                break\n              case 'insert-above':\n                table.insertCellsAbove(selected)\n                break\n              case 'insert-below':\n                table.insertCellsBelow(selected)\n                break\n              case 'insert-left':\n                table.insertCellsLeft(selected)\n                break\n              case 'insert-right':\n                table.insertCellsRight(selected)\n                break\n              case 'merge-cells':\n                table.mergeCells(selected)\n                break\n              case 'split-cells':\n                table.splitCells(selected)\n                break\n              case 'distribute-horizontal':\n                table.distributeHorizontal(selected)\n                break\n              case 'distribute-vertical':\n                table.distributeVertical(selected)\n                break\n            }\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n\n  _onClickType(e: Event) {\n    var target = e.target as HTMLElement\n\n    const where = target?.closest('[data-value]')?.getAttribute('data-value')\n    if (!where) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n\n            table.setCellsStyle(\n              selected,\n              {\n                strokeStyle: this.borderColor,\n                lineDash: this.borderStyle,\n                lineWidth: this.borderWidth\n              },\n              where\n            )\n          }\n        }\n      })\n    )\n\n    this.value = {\n      borderWidth: this.borderWidth,\n      borderColor: this.borderColor,\n      borderStyle: this.borderStyle\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}

package/dist/src/ox-input-value-map.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-input-color';
+import { LitElement } from 'lit';
+declare type ValueMap = {
+    default?: any;
+    [key: string]: any;
+};
+declare type ArrayedValueMap = {
+    key: string;
+    value: any;
+};
+/**
+key-value map editor element
+
+Example:
+
+  <ox-input-value-map
+    value=${map}
+    keytype=${keytype}
+    valuetype=${valuetype}>
+  </ox-input-value-map>
+*/
+export declare class OxInputValueMap extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: ValueMap;
+    valuetype: 'string' | 'boolean' | 'color' | string;
+    keytype: 'string' | 'boolean' | 'color' | string;
+    private _changingNow;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _defaultValue(type?: 'string' | 'boolean' | 'color' | string): false | "" | "#000000";
+    _onChange(e: Event): void;
+    _build(includeNewRecord?: boolean): void;
+    _toArray(map: ValueMap): ArrayedValueMap[];
+    _sort(): void;
+    _add(): void;
+    _delete(e: MouseEvent): void;
+}
+export {};