@fmsim/layout-view 0.0.49

package/dist-client/pages/board-viewer-page.js

@@ -0,0 +1,205 @@
+import { __decorate, __metadata } from "tslib";
+import './things-scene-components.import';
+import '@fmsim/board/ox-board-viewer.js';
+import './fmb-unit-info.js';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { BoardViewer } from '@fmsim/board';
+import { store, PageView } from '@operato/shell';
+import { fetchBoardById } from '@fmsim/api';
+import { provider } from '../board-provider';
+let BoardViewerPage = class BoardViewerPage extends connect(store)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.showFMBUnitInfoHandler = this.showFMBUnitInfo.bind(this);
+    }
+    get oopsNote() {
+        return {
+            icon: 'insert_chart_outlined',
+            title: 'EMPTY BOARD',
+            description: 'There are no board to be shown'
+        };
+    }
+    get context() {
+        return {
+            /* can set the page title with the 'title' parameter. */
+            title: this.lifecycle.params['title'] ||
+                (this._board ? this._board.name : this.preparing ? 'Fetching board...' : 'Board Not Found')
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler);
+    }
+    render() {
+        var oops = !this.preparing && !this._board && this.oopsNote;
+        return oops
+            ? html ` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+            : html `
+          <ox-board-viewer
+            .board=${this._board}
+            .provider=${provider}
+            ?hide-fullscreen=${this._interactive}
+            ?hide-navigation=${this._interactive}
+          ></ox-board-viewer>
+
+          <slot></slot>
+        `;
+    }
+    updated(changes) {
+        if (changes.has('_boardId')) {
+            this.refresh();
+        }
+    }
+    pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.hidePopup();
+            this._boardId = lifecycle.resourceId;
+            this._interactive = lifecycle.params['interactive'] === 'true';
+        }
+        else {
+            /*
+             * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.
+             * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,
+             * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.
+             */
+            if (this._boardId) {
+                let boardViewer = this.boardViewer;
+                boardViewer && boardViewer.closeScene();
+            }
+            this._boardId = '';
+        }
+    }
+    stateChanged(state) {
+        this._baseUrl = state.app.baseUrl;
+    }
+    async refresh() {
+        if (!this._boardId) {
+            this._board = null;
+            return;
+        }
+        try {
+            this.preparing = true;
+            this.updateContext();
+            var { board, themes } = (await fetchBoardById(this._boardId)) || {};
+            const style = themes === null || themes === void 0 ? void 0 : themes.items.reduce((style, theme) => {
+                style[theme.name] = theme.value;
+                return style;
+            }, {});
+            if (!board) {
+                this._board = null;
+                throw 'board not found';
+            }
+            this._board = Object.assign(Object.assign({}, board), { model: Object.assign({}, JSON.parse(board.model)), style });
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+            this.updateContext();
+        }
+    }
+    showFMBUnitInfo(e) {
+        var _a, _b;
+        e.stopPropagation();
+        const { type: etype, model, event, data } = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || {};
+        const { id, type } = model || {};
+        console.log(`${id}:${type} ${etype}`);
+        if (etype == 'hover') {
+            return;
+        }
+        const unit = ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.value) || {};
+        if (!this.popup) {
+            const popup = document.createElement('fmb-unit-info');
+            popup.addEventListener('close', e => {
+                e.stopPropagation();
+                this.hidePopup();
+            });
+            this.appendChild(popup);
+            this.popup = popup;
+        }
+        this.popup.unit = unit;
+    }
+    hidePopup() {
+        if (this.popup) {
+            this.removeChild(this.popup);
+            delete this.popup;
+        }
+    }
+};
+BoardViewerPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      ox-board-viewer {
+        flex: 1;
+      }
+
+      ::slotted(fmb-unit-info) {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 200px;
+        opacity: 0.9;
+        box-shadow: 2px 2px 4px gray;
+      }
+
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardViewerPage.prototype, "_board", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardViewerPage.prototype, "_boardId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardViewerPage.prototype, "_baseUrl", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardViewerPage.prototype, "_interactive", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardViewerPage.prototype, "preparing", void 0);
+__decorate([
+    query('ox-board-viewer'),
+    __metadata("design:type", BoardViewer)
+], BoardViewerPage.prototype, "boardViewer", void 0);
+BoardViewerPage = __decorate([
+    customElement('board-viewer-page')
+], BoardViewerPage);
+export { BoardViewerPage };
+//# sourceMappingURL=board-viewer-page.js.map

package/dist-client/pages/board-viewer-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-viewer-page.js","sourceRoot":"","sources":["../../client/pages/board-viewer-page.ts"],"names":[],"mappings":"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","sourcesContent":["import './things-scene-components.import'\nimport '@fmsim/board/ox-board-viewer.js'\nimport './fmb-unit-info.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { BoardViewer } from '@fmsim/board'\nimport { store, PageView } from '@operato/shell'\nimport { fetchBoardById } from '@fmsim/api'\n\nimport { provider } from '../board-provider'\nimport { FMBUnitInfo } from './fmb-unit-info'\n\n@customElement('board-viewer-page')\nexport class BoardViewerPage extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        overflow: hidden;\n        position: relative;\n      }\n\n      ox-board-viewer {\n        flex: 1;\n      }\n\n      ::slotted(fmb-unit-info) {\n        position: absolute;\n        right: 10px;\n        top: 10px;\n        width: 200px;\n        opacity: 0.9;\n        box-shadow: 2px 2px 4px gray;\n      }\n\n      oops-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: Object }) _board: any\n  @property({ type: String }) _boardId?: string\n  @property({ type: String }) _baseUrl?: string\n  @property({ type: Boolean }) _interactive?: boolean\n  @property({ type: Boolean }) preparing?: boolean\n\n  private showFMBUnitInfoHandler = this.showFMBUnitInfo.bind(this)\n  private popup?: FMBUnitInfo\n\n  @query('ox-board-viewer') boardViewer!: BoardViewer\n\n  get oopsNote() {\n    return {\n      icon: 'insert_chart_outlined',\n      title: 'EMPTY BOARD',\n      description: 'There are no board to be shown'\n    }\n  }\n\n  get context() {\n    return {\n      /* can set the page title with the 'title' parameter. */\n      title:\n        this.lifecycle.params['title'] ||\n        (this._board ? this._board.name : this.preparing ? 'Fetching board...' : 'Board Not Found')\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    window.addEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    window.removeEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler)\n  }\n\n  render() {\n    var oops = !this.preparing && !this._board && this.oopsNote\n\n    return oops\n      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `\n      : html`\n          <ox-board-viewer\n            .board=${this._board}\n            .provider=${provider}\n            ?hide-fullscreen=${this._interactive}\n            ?hide-navigation=${this._interactive}\n          ></ox-board-viewer>\n\n          <slot></slot>\n        `\n  }\n\n  updated(changes) {\n    if (changes.has('_boardId')) {\n      this.refresh()\n    }\n  }\n\n  pageUpdated(changes, lifecycle) {\n    if (this.active) {\n      this.hidePopup()\n      this._boardId = lifecycle.resourceId\n      this._interactive = lifecycle.params['interactive'] === 'true'\n    } else {\n      /*\n       * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.\n       * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,\n       * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.\n       */\n      if (this._boardId) {\n        let boardViewer = this.boardViewer\n        boardViewer && boardViewer.closeScene()\n      }\n\n      this._boardId = ''\n    }\n  }\n\n  stateChanged(state) {\n    this._baseUrl = state.app.baseUrl\n  }\n\n  async refresh() {\n    if (!this._boardId) {\n      this._board = null\n      return\n    }\n\n    try {\n      this.preparing = true\n      this.updateContext()\n\n      var { board, themes } = (await fetchBoardById(this._boardId)) || {}\n      const style = themes?.items.reduce((style, theme) => {\n        style[theme.name] = theme.value\n        return style\n      }, {})\n\n      if (!board) {\n        this._board = null\n        throw 'board not found'\n      }\n\n      this._board = {\n        ...board,\n        model: {\n          ...JSON.parse(board.model)\n        },\n        style\n      }\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n      this.updateContext()\n    }\n  }\n\n  showFMBUnitInfo(e: Event) {\n    e.stopPropagation()\n\n    const { type: etype, model, event, data } = (e as CustomEvent).detail?.value || {}\n    const { id, type } = model || {}\n\n    console.log(`${id}:${type} ${etype}`)\n\n    if (etype == 'hover') {\n      return\n    }\n\n    const unit = (e as CustomEvent).detail?.value || {}\n\n    if (!this.popup) {\n      const popup = document.createElement('fmb-unit-info') as FMBUnitInfo\n      popup.addEventListener('close', e => {\n        e.stopPropagation()\n        this.hidePopup()\n      })\n\n      this.appendChild(popup)\n      this.popup = popup\n    }\n\n    this.popup.unit = unit\n  }\n\n  hidePopup() {\n    if (this.popup) {\n      this.removeChild(this.popup)\n      delete this.popup\n    }\n  }\n}\n"]}

package/dist-client/pages/fmb-unit-info.d.ts

@@ -0,0 +1,18 @@
+import '@material/mwc-icon';
+import '@material/mwc-button';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/markdown';
+import { LitElement } from 'lit';
+export declare class FMBUnitInfo extends LitElement {
+    static styles: import("lit").CSSResult[];
+    unit?: any;
+    private dragEndHandler;
+    private dragMoveHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private dragStart?;
+    onDragStart(e: MouseEvent): boolean;
+    onDragMove(e: Event): boolean;
+    onDragEnd(e: Event): void;
+}

package/dist-client/pages/fmb-unit-info.js

@@ -0,0 +1,170 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import '@material/mwc-button';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/markdown';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+let FMBUnitInfo = class FMBUnitInfo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dragEndHandler = this.onDragEnd.bind(this);
+        this.dragMoveHandler = this.onDragMove.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mouseup', this.dragEndHandler);
+        document.addEventListener('mousemove', this.dragMoveHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mouseup', this.dragEndHandler);
+        document.removeEventListener('mousemove', this.dragMoveHandler);
+    }
+    render() {
+        const { model: state, data } = this.unit || {};
+        const { id, type } = state || {};
+        return html `
+      <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
+        Object Information<mwc-icon @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</mwc-icon>
+      </div>
+      <div content>
+        <table>
+          <tr>
+            <td subTh>${i18next.t('label.id')}</td>
+            <td>
+              ${id
+            ? html `<a
+                    @click=${() => {
+                window.dispatchEvent(new CustomEvent('fetchIFactsData', { detail: { value: id } }));
+                return false;
+            }}
+                    >${id}</a
+                  >`
+            : html ``}
+            </td>
+          </tr>
+          <tr>
+            <td subTh>${i18next.t('label.type')}</td>
+            <td>${type}</td>
+          </tr>
+
+          <tr>
+            <td colspan="2">
+              <pre>${JSON.stringify(data, null, 2)}</pre>
+            </td>
+          </tr>
+        </table>
+      </div>
+    `;
+    }
+    onDragStart(e) {
+        e.stopPropagation();
+        if (e.button == 0) {
+            this.dragStart = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        }
+        return false;
+    }
+    onDragMove(e) {
+        if (!this.dragStart) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        var x = e.clientX, y = e.clientY;
+        const dragStart = { x, y };
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
+        this.style.left =
+            Math.min(this.parentElement.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px';
+        this.style.top =
+            Math.min(this.parentElement.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px';
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+};
+FMBUnitInfo.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        background-color: white;
+        font-size: 12px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        border: 2px solid var(--primary-color);
+        border-radius: 3px;
+
+        --mdc-icon-size: 12px;
+      }
+
+      [header] {
+        background-color: var(--primary-color);
+        user-select: none;
+        align-items: center;
+        color: #eee;
+        padding: 0 2px;
+
+        display: flex;
+      }
+
+      [header] mwc-icon {
+        margin-left: auto;
+        align-self: center;
+      }
+
+      [content] {
+        overflow: auto;
+      }
+
+      table {
+        border-collapse: collapse;
+        background-color: #fff;
+        width: 100%;
+        margin: auto;
+      }
+      tr {
+        border-bottom: var(--border-dark-color);
+      }
+
+      td {
+        padding: var(--padding-narrow);
+        border-right: var(--border-dark-color);
+        font-size: 0.8em;
+      }
+
+      [subTh] {
+        text-align: center !important;
+        font-weight: bold;
+        min-width: 60px;
+        text-transform: capitalize;
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      tr:hover,
+      [formation]:hover {
+        background-color: var(--focus-background-color) !important;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FMBUnitInfo.prototype, "unit", void 0);
+FMBUnitInfo = __decorate([
+    customElement('fmb-unit-info')
+], FMBUnitInfo);
+export { FMBUnitInfo };
+//# sourceMappingURL=fmb-unit-info.js.map

package/dist-client/pages/fmb-unit-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmb-unit-info.js","sourceRoot":"","sources":["../../client/pages/fmb-unit-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('fmb-unit-info')\nexport class FMBUnitInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        background-color: white;\n        font-size: 12px;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        border: 2px solid var(--primary-color);\n        border-radius: 3px;\n\n        --mdc-icon-size: 12px;\n      }\n\n      [header] {\n        background-color: var(--primary-color);\n        user-select: none;\n        align-items: center;\n        color: #eee;\n        padding: 0 2px;\n\n        display: flex;\n      }\n\n      [header] mwc-icon {\n        margin-left: auto;\n        align-self: center;\n      }\n\n      [content] {\n        overflow: auto;\n      }\n\n      table {\n        border-collapse: collapse;\n        background-color: #fff;\n        width: 100%;\n        margin: auto;\n      }\n      tr {\n        border-bottom: var(--border-dark-color);\n      }\n\n      td {\n        padding: var(--padding-narrow);\n        border-right: var(--border-dark-color);\n        font-size: 0.8em;\n      }\n\n      [subTh] {\n        text-align: center !important;\n        font-weight: bold;\n        min-width: 60px;\n        text-transform: capitalize;\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      tr:hover,\n      [formation]:hover {\n        background-color: var(--focus-background-color) !important;\n      }\n    `\n  ]\n\n  @property({ type: Object }) unit?: any\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    document.removeEventListener('mouseup', this.dragEndHandler)\n    document.removeEventListener('mousemove', this.dragMoveHandler)\n  }\n\n  render() {\n    const { model: state, data } = this.unit || {}\n    const { id, type } = state || {}\n\n    return html`\n      <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n        Object Information<mwc-icon @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</mwc-icon>\n      </div>\n      <div content>\n        <table>\n          <tr>\n            <td subTh>${i18next.t('label.id')}</td>\n            <td>\n              ${id\n                ? html`<a\n                    @click=${() => {\n                      window.dispatchEvent(new CustomEvent('fetchIFactsData', { detail: { value: id } }))\n                      return false\n                    }}\n                    >${id}</a\n                  >`\n                : html``}\n            </td>\n          </tr>\n          <tr>\n            <td subTh>${i18next.t('label.type')}</td>\n            <td>${type}</td>\n          </tr>\n\n          <tr>\n            <td colspan=\"2\">\n              <pre>${JSON.stringify(data, null, 2)}</pre>\n            </td>\n          </tr>\n        </table>\n      </div>\n    `\n  }\n\n  private dragStart?: { x: number; y: number }\n\n  onDragStart(e: MouseEvent) {\n    e.stopPropagation()\n\n    if (e.button == 0) {\n      this.dragStart = {\n        x: e.clientX,\n        y: e.clientY\n      }\n    }\n\n    return false\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    var x = (e as MouseEvent).clientX,\n      y = (e as MouseEvent).clientY\n\n    const dragStart = { x, y }\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    this.style.left =\n      Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n    this.style.top =\n      Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n}\n"]}

package/dist-client/pages/theme/theme-editors.d.ts

@@ -0,0 +1,5 @@
+export declare function buildThemeValueRecordConfig(): {
+    editor: (value: any, column: any, record: any, rowIndex: any, field: any) => import("@operato/data-grist").OxGristEditor;
+    renderer: (value: any, column: any, record: any, rowIndex: any, field: any) => string | void | import("@operato/data-grist/dist/src/renderers/ox-grist-renderer").OxGristRenderer | import("lit-html").TemplateResult<1 | 2>;
+    editable: boolean;
+};

package/dist-client/pages/theme/theme-editors.js

@@ -0,0 +1,53 @@
+import { getEditor, getRenderer } from '@operato/data-grist';
+export function buildThemeValueRecordConfig() {
+    return {
+        editor: function (value, column, record, rowIndex, field) {
+            return getEditor(record.type || 'text')(value, column, record, rowIndex, field);
+        },
+        renderer: function (value, column, record, rowIndex, field) {
+            return getRenderer(record.type || 'text')(value, column, record, rowIndex, field);
+        },
+        editable: true
+    };
+}
+function getEditorType(themeType) {
+    switch (themeType) {
+        case 'legend':
+        case 'color-map':
+            return 'value-map';
+        case 'color-ranges':
+            return 'value-ranges';
+        case 'color':
+            return 'color';
+        default:
+            return 'text';
+    }
+}
+function getRendererType(themeType) {
+    switch (themeType) {
+        case 'legend':
+        case 'color-map':
+        case 'color-ranges':
+            return 'json5';
+        case 'color':
+            return 'color';
+        default:
+            return 'text';
+    }
+}
+function getOptions(themeType, name) {
+    switch (themeType) {
+        case 'color-map':
+        case 'color-ranges':
+            return {
+                name: `${themeType.toUpperCase()} : ${name}`,
+                valuetype: 'color'
+            };
+        case 'color':
+        default:
+            return {
+                name: `${(themeType === null || themeType === void 0 ? void 0 : themeType.toUpperCase()) || ''} : ${name}`
+            };
+    }
+}
+//# sourceMappingURL=theme-editors.js.map

package/dist-client/pages/theme/theme-editors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-editors.js","sourceRoot":"","sources":["../../../client/pages/theme/theme-editors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAE5D,MAAM,UAAU,2BAA2B;IACzC,OAAO;QACL,MAAM,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;YACtD,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;QACjF,CAAC;QACD,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;YACxD,OAAO,WAAW,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;QACnF,CAAC;QACD,QAAQ,EAAE,IAAI;KACf,CAAA;AACH,CAAC;AAED,SAAS,aAAa,CAAC,SAAiB;IACtC,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,WAAW;YACd,OAAO,WAAW,CAAA;QACpB,KAAK,cAAc;YACjB,OAAO,cAAc,CAAA;QACvB,KAAK,OAAO;YACV,OAAO,OAAO,CAAA;QAChB;YACE,OAAO,MAAM,CAAA;KAChB;AACH,CAAC;AAED,SAAS,eAAe,CAAC,SAAiB;IACxC,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,WAAW,CAAC;QACjB,KAAK,cAAc;YACjB,OAAO,OAAO,CAAA;QAChB,KAAK,OAAO;YACV,OAAO,OAAO,CAAA;QAChB;YACE,OAAO,MAAM,CAAA;KAChB;AACH,CAAC;AAED,SAAS,UAAU,CAAC,SAAiB,EAAE,IAAY;IACjD,QAAQ,SAAS,EAAE;QACjB,KAAK,WAAW,CAAC;QACjB,KAAK,cAAc;YACjB,OAAO;gBACL,IAAI,EAAE,GAAG,SAAS,CAAC,WAAW,EAAE,MAAM,IAAI,EAAE;gBAC5C,SAAS,EAAE,OAAO;aACnB,CAAA;QACH,KAAK,OAAO,CAAC;QACb;YACE,OAAO;gBACL,IAAI,EAAE,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,EAAE,KAAI,EAAE,MAAM,IAAI,EAAE;aACpD,CAAA;KACJ;AACH,CAAC","sourcesContent":["import { getEditor, getRenderer } from '@operato/data-grist'\n\nexport function buildThemeValueRecordConfig() {\n  return {\n    editor: function (value, column, record, rowIndex, field) {\n      return getEditor(record.type || 'text')(value, column, record, rowIndex, field)\n    },\n    renderer: function (value, column, record, rowIndex, field) {\n      return getRenderer(record.type || 'text')(value, column, record, rowIndex, field)\n    },\n    editable: true\n  }\n}\n\nfunction getEditorType(themeType: string): string {\n  switch (themeType) {\n    case 'legend':\n    case 'color-map':\n      return 'value-map'\n    case 'color-ranges':\n      return 'value-ranges'\n    case 'color':\n      return 'color'\n    default:\n      return 'text'\n  }\n}\n\nfunction getRendererType(themeType: string): string {\n  switch (themeType) {\n    case 'legend':\n    case 'color-map':\n    case 'color-ranges':\n      return 'json5'\n    case 'color':\n      return 'color'\n    default:\n      return 'text'\n  }\n}\n\nfunction getOptions(themeType: string, name: string): any {\n  switch (themeType) {\n    case 'color-map':\n    case 'color-ranges':\n      return {\n        name: `${themeType.toUpperCase()} : ${name}`,\n        valuetype: 'color'\n      }\n    case 'color':\n    default:\n      return {\n        name: `${themeType?.toUpperCase() || ''} : ${name}`\n      }\n  }\n}\n"]}

package/dist-client/pages/theme/theme-list-page.d.ts

@@ -0,0 +1,49 @@
+import '@operato/data-grist';
+import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
+declare const ThemeListPage_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ThemeListPage extends ThemeListPage_base {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    mode: 'CARD' | 'GRID' | 'LIST';
+    private grist;
+    private sortersControl;
+    get context(): {
+        title: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        help: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+    _deleteTheme(): Promise<void>;
+    _updateTheme(): Promise<void>;
+}
+export {};