@fmsim/fmsim-restful 0.0.49

package/dist-client/board-list/restful-board-tile-list.js

@@ -0,0 +1,291 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@material/mwc-icon';
+import '../viewparts/board-creation-card';
+import { removeFavorite, addFavorite } from '@fmsim/api/restful.js';
+import { BoardCreationCard } from '../viewparts/board-creation-card';
+const btnFavorite = require('../../assets/icons/board/btn-favorite.svg');
+const btnFavoriteHover = require('../../assets/icons/board/btn-favorite-hover.svg');
+const btnFavoriteOn = require('../../assets/icons/board/btn-favorite-on.svg');
+const btnFavoriteHoverOn = require('../../assets/icons/board/btn-favorite-hover-on.svg');
+const btnEdit = require('../../assets/icons/board/btn-edit.svg');
+const btnEditHover = require('../../assets/icons/board/btn-edit-hover.svg');
+const btnInfo = require('../../assets/icons/board/btn-info.svg');
+const btnInfoHover = require('../../assets/icons/board/btn-info-hover.svg');
+let RestfulBoardTileList = class RestfulBoardTileList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.boards = [];
+        this.favorites = [];
+        this.groups = [];
+    }
+    render() {
+        var boards = this.boards || [];
+        return html `
+      ${this.creatable
+            ? html `
+            <board-creation-card
+              .groups=${this.groups}
+              .defaultGroup=${this.group}
+              @create-board=${e => this.onCreateBoard(e)}
+              card
+              create
+            ></board-creation-card>
+          `
+            : html ``}
+      ${boards.map(board => html `
+            <div card>
+              <a href="fmb-Monitoring/${board.id}" thumbnail> <img src=${board.thumbnail} /> </a>
+
+              <div name>${board.name}</div>
+              <div description>${board.description}</div>
+
+              <div class="button-container">
+                ${(this.favorites || []).includes(board.id)
+            ? html ` <span @click=${e => this.removeFavorite(board.id)}><i class="btn-favorite-on"></i></span> `
+            : html ` <span @click=${e => this.addFavorite(board.id)}><i class="btn-favorite"></i></span> `}
+
+                <a href="fmb-modeller-detail/${board.id}">
+                  <i class="btn-edit"></i>
+                </a>
+                <a
+                  href="#"
+                  @click=${e => {
+            this.infoBoard(board.id);
+            e.preventDefault();
+        }}
+                >
+                  <i class="btn-info"></i>
+                </a>
+              </div>
+            </div>
+          `)}
+    `;
+    }
+    updated(changes) {
+        var _a;
+        (_a = this.creationCard) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    onCreateBoard(e) {
+        this.dispatchEvent(new CustomEvent('create-board', {
+            detail: e.detail
+        }));
+    }
+    infoBoard(boardId) {
+        this.dispatchEvent(new CustomEvent('info-board', {
+            detail: boardId
+        }));
+    }
+    async removeFavorite(boardId) {
+        await removeFavorite(boardId);
+        this.refreshFavorites();
+    }
+    async addFavorite(boardId) {
+        await addFavorite(boardId);
+        this.refreshFavorites();
+    }
+    async refreshFavorites() {
+        this.dispatchEvent(new CustomEvent('refresh-favorites'));
+    }
+};
+RestfulBoardTileList.styles = [
+    css `
+      :host {
+        overflow: auto;
+        padding: var(--popup-content-padding);
+        display: grid;
+
+        grid-template-columns: var(--card-list-template);
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+      }
+
+      [card] {
+        position: relative;
+        border: 0.5px solid #cccccc;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        border-radius: var(--card-list-border-radius);
+        background-color: var(--card-list-background-color);
+      }
+
+      [card][create] {
+        overflow: visible;
+        background-color: initial;
+        color: var(--primary-color);
+        border: 0.5px dashed var(--primary-color);
+      }
+
+      [card]:hover {
+        cursor: pointer;
+      }
+
+      [name] {
+        background-color: var(--primary-color);
+        opacity: 0.8;
+        margin-top: -35px;
+        width: 100%;
+        color: #fff;
+        font-weight: bolder;
+        font-size: 13px;
+        text-indent: 7px;
+        line-height: 18px;
+      }
+
+      [description] {
+        background-color: rgba(0, 0, 0, 0.7);
+        width: 100%;
+        min-height: 15px;
+        font-size: 0.6rem;
+        color: #fff;
+        text-indent: 7px;
+        line-height: 16px;
+      }
+
+      img {
+        display: block;
+
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      [thumbnail] {
+        width: 100%;
+        height: 100%;
+      }
+
+      mwc-icon[favorite] {
+        color: var(--board-list-star-color);
+        font-size: 1.4em;
+      }
+
+      mwc-icon[favorite][favored] {
+        color: var(--board-list-star-active-color);
+      }
+
+      a {
+        display: block;
+        text-decoration: none;
+        word-wrap: break-word;
+        word-break: keep-all;
+
+        margin: 0px;
+      }
+
+      .button-container {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        display: flex;
+        direction: rtl;
+        flex-direction: column;
+        flex-wrap: wrap;
+      }
+
+      .button-container > a,
+      .button-container > mwc-icon,
+      .button-container > span {
+        background-color: var(--font-selector-icon-background-color);
+        text-align: center;
+        width: var(--font-selector-icon-size);
+        height: var(--font-selector-icon-size);
+        font: var(--font-selector-icon-font);
+        color: var(--font-selector-icon-color);
+      }
+
+      .button-container > a:last-child,
+      .button-container > mwc-icon:last-child {
+        border-bottom-left-radius: 12px;
+      }
+
+      .button-container > a:hover,
+      .button-container > a:active,
+      .button-container > mwc-icon:hover,
+      .button-container > mwc-icon:active,
+      .button-container > span:hover,
+      .button-container > span:active {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+
+      .btn-favorite {
+        width: 20px;
+        height: 20px;
+        margin-top: 8px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnFavorite)}) no-repeat;
+      }
+      .button-container > span:hover > .btn-favorite,
+      .button-container > span:active > .btn-favorite {
+        background: url(${unsafeCSS(btnFavoriteHover)}) no-repeat;
+      }
+
+      .btn-favorite-on {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnFavoriteOn)}) no-repeat;
+      }
+      .button-container > span:hover > .btn-favorite-on,
+      .button-container > span:active > .btn-favorite-on {
+        background: url(${unsafeCSS(btnFavoriteHoverOn)}) no-repeat;
+      }
+
+      .btn-edit {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-top: 7px;
+        background: url(${unsafeCSS(btnEdit)}) no-repeat;
+      }
+      .button-container > a:hover > .btn-edit,
+      .button-container > a:active > .btn-edit {
+        background: url(${unsafeCSS(btnEditHover)}) no-repeat;
+      }
+
+      .btn-info {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-top: 7px;
+        background: url(${unsafeCSS(btnInfo)}) no-repeat;
+      }
+      .button-container > a:hover > .btn-info,
+      .button-container > a:active > .btn-info {
+        background: url(${unsafeCSS(btnInfoHover)}) no-repeat;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RestfulBoardTileList.prototype, "group", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'creatable' }),
+    __metadata("design:type", Boolean)
+], RestfulBoardTileList.prototype, "creatable", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], RestfulBoardTileList.prototype, "boards", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], RestfulBoardTileList.prototype, "favorites", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], RestfulBoardTileList.prototype, "groups", void 0);
+__decorate([
+    query('board-creation-card'),
+    __metadata("design:type", BoardCreationCard)
+], RestfulBoardTileList.prototype, "creationCard", void 0);
+RestfulBoardTileList = __decorate([
+    customElement('restful-board-tile-list')
+], RestfulBoardTileList);
+export default RestfulBoardTileList;
+//# sourceMappingURL=restful-board-tile-list.js.map

package/dist-client/board-list/restful-board-tile-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/restful-board-tile-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,oBAAoB,CAAA;AAE3B,OAAO,kCAAkC,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAEpE,MAAM,WAAW,GAAG,OAAO,CAAC,2CAA2C,CAAC,CAAA;AACxE,MAAM,gBAAgB,GAAG,OAAO,CAAC,iDAAiD,CAAC,CAAA;AACnF,MAAM,aAAa,GAAG,OAAO,CAAC,8CAA8C,CAAC,CAAA;AAC7E,MAAM,kBAAkB,GAAG,OAAO,CAAC,oDAAoD,CAAC,CAAA;AACxF,MAAM,OAAO,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAA;AAChE,MAAM,YAAY,GAAG,OAAO,CAAC,6CAA6C,CAAC,CAAA;AAC3E,MAAM,OAAO,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAA;AAChE,MAAM,YAAY,GAAG,OAAO,CAAC,6CAA6C,CAAC,CAAA;AAG3E,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAA5D;;QAgL6B,WAAM,GAAU,EAAE,CAAA;QAClB,cAAS,GAAU,EAAE,CAAA;QACrB,WAAM,GAAU,EAAE,CAAA;IAsF/C,CAAC;IAlFC,MAAM;QACJ,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAC9B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;wBAEU,IAAI,CAAC,MAAM;8BACL,IAAI,CAAC,KAAK;8BACV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;;WAI7C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,MAAM,CAAC,GAAG,CACV,KAAK,CAAC,EAAE,CACN,IAAI,CAAA;;wCAE0B,KAAK,CAAC,EAAE,yBAAyB,KAAK,CAAC,SAAS;;0BAE9D,KAAK,CAAC,IAAI;iCACH,KAAK,CAAC,WAAW;;;kBAGhC,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACzC,CAAC,CAAC,IAAI,CAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,0CAA0C;YACnG,CAAC,CAAC,IAAI,CAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,uCAAuC;;+CAEhE,KAAK,CAAC,EAAE;;;;;2BAK5B,CAAC,CAAC,EAAE;YACX,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;YACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;;;;;;WAMR,CACJ;KACF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;;QACb,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAA;IAC5B,CAAC;IAED,aAAa,CAAC,CAAC;QACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,OAAO;SAChB,CAAC,CACH,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc,CAAC,OAAO;QAC1B,MAAM,cAAc,CAAC,OAAO,CAAC,CAAA;QAE7B,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO;QACvB,MAAM,WAAW,CAAC,OAAO,CAAC,CAAA;QAE1B,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAC1D,CAAC;CACF,CAAA;AAvQQ,2BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+HmB,SAAS,CAAC,WAAW,CAAC;;;;0BAItB,SAAS,CAAC,gBAAgB,CAAC;;;;;;;0BAO3B,SAAS,CAAC,aAAa,CAAC;;;;0BAIxB,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;0BAQ7B,SAAS,CAAC,OAAO,CAAC;;;;0BAIlB,SAAS,CAAC,YAAY,CAAC;;;;;;;;0BAQvB,SAAS,CAAC,OAAO,CAAC;;;;0BAIlB,SAAS,CAAC,YAAY,CAAC;;KAE5C;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAe;AACW;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;;uDAAoB;AAE7C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;oDAAmB;AAClB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;uDAAsB;AACrB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;oDAAmB;AAEf;IAA7B,KAAK,CAAC,qBAAqB,CAAC;8BAAgB,iBAAiB;0DAAA;AApL3C,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAwQxC;eAxQoB,oBAAoB","sourcesContent":["import { css, html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport '@material/mwc-icon'\n\nimport '../viewparts/board-creation-card'\nimport { removeFavorite, addFavorite } from '@fmsim/api/restful.js'\nimport { BoardCreationCard } from '../viewparts/board-creation-card'\n\nconst btnFavorite = require('../../assets/icons/board/btn-favorite.svg')\nconst btnFavoriteHover = require('../../assets/icons/board/btn-favorite-hover.svg')\nconst btnFavoriteOn = require('../../assets/icons/board/btn-favorite-on.svg')\nconst btnFavoriteHoverOn = require('../../assets/icons/board/btn-favorite-hover-on.svg')\nconst btnEdit = require('../../assets/icons/board/btn-edit.svg')\nconst btnEditHover = require('../../assets/icons/board/btn-edit-hover.svg')\nconst btnInfo = require('../../assets/icons/board/btn-info.svg')\nconst btnInfoHover = require('../../assets/icons/board/btn-info-hover.svg')\n\n@customElement('restful-board-tile-list')\nexport default class RestfulBoardTileList extends LitElement {\n  static styles = [\n    css`\n      :host {\n        overflow: auto;\n        padding: var(--popup-content-padding);\n        display: grid;\n\n        grid-template-columns: var(--card-list-template);\n        grid-auto-rows: var(--card-list-rows-height);\n        grid-gap: 20px;\n      }\n\n      [card] {\n        position: relative;\n        border: 0.5px solid #cccccc;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        border-radius: var(--card-list-border-radius);\n        background-color: var(--card-list-background-color);\n      }\n\n      [card][create] {\n        overflow: visible;\n        background-color: initial;\n        color: var(--primary-color);\n        border: 0.5px dashed var(--primary-color);\n      }\n\n      [card]:hover {\n        cursor: pointer;\n      }\n\n      [name] {\n        background-color: var(--primary-color);\n        opacity: 0.8;\n        margin-top: -35px;\n        width: 100%;\n        color: #fff;\n        font-weight: bolder;\n        font-size: 13px;\n        text-indent: 7px;\n        line-height: 18px;\n      }\n\n      [description] {\n        background-color: rgba(0, 0, 0, 0.7);\n        width: 100%;\n        min-height: 15px;\n        font-size: 0.6rem;\n        color: #fff;\n        text-indent: 7px;\n        line-height: 16px;\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-icon[favorite] {\n        color: var(--board-list-star-color);\n        font-size: 1.4em;\n      }\n\n      mwc-icon[favorite][favored] {\n        color: var(--board-list-star-active-color);\n      }\n\n      a {\n        display: block;\n        text-decoration: none;\n        word-wrap: break-word;\n        word-break: keep-all;\n\n        margin: 0px;\n      }\n\n      .button-container {\n        position: absolute;\n        right: 0;\n        height: 100%;\n        display: flex;\n        direction: rtl;\n        flex-direction: column;\n        flex-wrap: wrap;\n      }\n\n      .button-container > a,\n      .button-container > mwc-icon,\n      .button-container > span {\n        background-color: var(--font-selector-icon-background-color);\n        text-align: center;\n        width: var(--font-selector-icon-size);\n        height: var(--font-selector-icon-size);\n        font: var(--font-selector-icon-font);\n        color: var(--font-selector-icon-color);\n      }\n\n      .button-container > a:last-child,\n      .button-container > mwc-icon:last-child {\n        border-bottom-left-radius: 12px;\n      }\n\n      .button-container > a:hover,\n      .button-container > a:active,\n      .button-container > mwc-icon:hover,\n      .button-container > mwc-icon:active,\n      .button-container > span:hover,\n      .button-container > span:active {\n        background-color: var(--primary-color);\n        color: #fff;\n      }\n\n      .btn-favorite {\n        width: 20px;\n        height: 20px;\n        margin-top: 8px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnFavorite)}) no-repeat;\n      }\n      .button-container > span:hover > .btn-favorite,\n      .button-container > span:active > .btn-favorite {\n        background: url(${unsafeCSS(btnFavoriteHover)}) no-repeat;\n      }\n\n      .btn-favorite-on {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnFavoriteOn)}) no-repeat;\n      }\n      .button-container > span:hover > .btn-favorite-on,\n      .button-container > span:active > .btn-favorite-on {\n        background: url(${unsafeCSS(btnFavoriteHoverOn)}) no-repeat;\n      }\n\n      .btn-edit {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        margin-top: 7px;\n        background: url(${unsafeCSS(btnEdit)}) no-repeat;\n      }\n      .button-container > a:hover > .btn-edit,\n      .button-container > a:active > .btn-edit {\n        background: url(${unsafeCSS(btnEditHover)}) no-repeat;\n      }\n\n      .btn-info {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        margin-top: 7px;\n        background: url(${unsafeCSS(btnInfo)}) no-repeat;\n      }\n      .button-container > a:hover > .btn-info,\n      .button-container > a:active > .btn-info {\n        background: url(${unsafeCSS(btnInfoHover)}) no-repeat;\n      }\n    `\n  ]\n\n  @property({ type: String }) group?: string\n  @property({ type: Boolean, attribute: 'creatable' }) creatable?: boolean\n\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: Array }) favorites: any[] = []\n  @property({ type: Array }) groups: any[] = []\n\n  @query('board-creation-card') creationCard!: BoardCreationCard\n\n  render() {\n    var boards = this.boards || []\n    return html`\n      ${this.creatable\n        ? html`\n            <board-creation-card\n              .groups=${this.groups}\n              .defaultGroup=${this.group}\n              @create-board=${e => this.onCreateBoard(e)}\n              card\n              create\n            ></board-creation-card>\n          `\n        : html``}\n      ${boards.map(\n        board =>\n          html`\n            <div card>\n              <a href=\"fmb-Monitoring/${board.id}\" thumbnail> <img src=${board.thumbnail} /> </a>\n\n              <div name>${board.name}</div>\n              <div description>${board.description}</div>\n\n              <div class=\"button-container\">\n                ${(this.favorites || []).includes(board.id)\n                  ? html` <span @click=${e => this.removeFavorite(board.id)}><i class=\"btn-favorite-on\"></i></span> `\n                  : html` <span @click=${e => this.addFavorite(board.id)}><i class=\"btn-favorite\"></i></span> `}\n\n                <a href=\"fmb-modeller-detail/${board.id}\">\n                  <i class=\"btn-edit\"></i>\n                </a>\n                <a\n                  href=\"#\"\n                  @click=${e => {\n                    this.infoBoard(board.id)\n                    e.preventDefault()\n                  }}\n                >\n                  <i class=\"btn-info\"></i>\n                </a>\n              </div>\n            </div>\n          `\n      )}\n    `\n  }\n\n  updated(changes) {\n    this.creationCard?.reset()\n  }\n\n  onCreateBoard(e) {\n    this.dispatchEvent(\n      new CustomEvent('create-board', {\n        detail: e.detail\n      })\n    )\n  }\n\n  infoBoard(boardId) {\n    this.dispatchEvent(\n      new CustomEvent('info-board', {\n        detail: boardId\n      })\n    )\n  }\n\n  async removeFavorite(boardId) {\n    await removeFavorite(boardId)\n\n    this.refreshFavorites()\n  }\n\n  async addFavorite(boardId) {\n    await addFavorite(boardId)\n\n    this.refreshFavorites()\n  }\n\n  async refreshFavorites() {\n    this.dispatchEvent(new CustomEvent('refresh-favorites'))\n  }\n}\n"]}

package/dist-client/board-list/restful-group-bar.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export default class RestfulGroupBar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    groups?: any[];
+    groupId?: string;
+    targetPage?: string;
+    selectBoxToggle?: string | null;
+    selectedGroupName: string;
+    btnDropBoxIcon: string;
+    render(): import("lit-html").TemplateResult<1>;
+    _setGroupTitle(groupName: any): void;
+    _toggleSelectBox(): void;
+    _infoGroup(groupId?: string): void;
+}

package/dist-client/board-list/restful-group-bar.js

@@ -0,0 +1,229 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const btnOpenDropbox = require('../../assets/icons/group-bar/btn-open-dropbox-color.png');
+const btnCloseDropbox = require('../../assets/icons/group-bar/btn-close-dropbox.png');
+const btnEdit = require('../../assets/icons/group-bar/btn-edit.png');
+const btnAddList = require('../../assets/icons/group-bar/btn-add-list.png');
+let RestfulGroupBar = class RestfulGroupBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedGroupName = 'ALL';
+        this.btnDropBoxIcon = 'btn-open-dropbox';
+    }
+    render() {
+        return html `
+      <div class="group-select-box" @click=${this._toggleSelectBox}>
+        <span>${this.selectedGroupName}</span>
+        <span><i class=${this.btnDropBoxIcon}></i></span>
+        <ul class=${`select-box ${this.selectBoxToggle}`}>
+          <li @click=${e => this._setGroupTitle('ALL')}>
+            <a href=${this.targetPage || ''}>ALL</a>
+          </li>
+          <li @click=${e => this._setGroupTitle('FAVOR')}>
+            <a href=${`${this.targetPage}/favor`}>FAVOR</a>
+          </li>
+          ${(this.groups || []).map(group => html `
+              <li @click=${e => this._setGroupTitle(group.name)}>
+                <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
+                <span @click=${e => this._infoGroup(group.id)}><i class="btn-edit"></i></span>
+              </li>
+            `)}
+        </ul>
+      </div>
+      <span class="btn-add-list-wrap">
+        <i class="btn-add-list" @click=${e => this._infoGroup()}></i>
+      </span>
+    `;
+    }
+    _setGroupTitle(groupName) {
+        this.selectedGroupName = groupName;
+    }
+    _toggleSelectBox() {
+        if (this.selectBoxToggle === 'on') {
+            this.selectBoxToggle = null;
+            this.btnDropBoxIcon = 'btn-close-dropbox';
+        }
+        else {
+            this.selectBoxToggle = 'on';
+            this.btnDropBoxIcon = 'btn-open-dropbox';
+        }
+    }
+    _infoGroup(groupId) {
+        this.dispatchEvent(new CustomEvent('info-group', {
+            detail: groupId
+        }));
+    }
+};
+RestfulGroupBar.styles = [
+    css `
+      :host {
+        padding: 12px 12px 12px 20px;
+        background-color: var(--group-bar-background-color);
+        overflow-x: hidden;
+      }
+
+      ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+        clear: both;
+      }
+
+      li {
+        padding: 0px 3px;
+      }
+
+      li:hover {
+        background-color: rgba(255, 180, 180, 1);
+      }
+
+      li a {
+        width: calc(100% - 24px);
+        padding: 5px 4px 1px 4px;
+        text-decoration: none;
+        font-size: 12px;
+        font-weight: bold;
+        color: rgb(233, 103, 128);
+        display: inline-block;
+      }
+
+      li span {
+        height: 16px;
+        margin-top: 4px;
+        border-radius: 2px;
+        float: right;
+        display: none;
+      }
+
+      li:hover span {
+        display: inline-block;
+      }
+
+      li span:hover {
+        background-color: #f8c2cc;
+      }
+
+      .group-select-box {
+        position: absolute;
+        width: 200px;
+        min-height: 22px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #e96780;
+        border: 1px solid #ccc;
+        padding: 5px;
+        background-color: #fff;
+        float: left;
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      .group-select-box > span:nth-child(1) {
+        position: absolute;
+        padding: 3px 0 0 6px;
+      }
+
+      .group-select-box > span:nth-child(2) {
+        float: right;
+      }
+
+      .select-box {
+        display: none;
+      }
+
+      .select-box.on {
+        display: block;
+        padding-top: 2px;
+      }
+
+      .select-box.active {
+        background-color: #1344;
+      }
+
+      .add-group {
+        cursor: pointer;
+      }
+
+      .btn-open-dropbox {
+        width: 8px;
+        height: 5px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnOpenDropbox)}) no-repeat;
+      }
+
+      .btn-close-dropbox {
+        width: 8px;
+        height: 5px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;
+      }
+
+      .btn-edit {
+        width: 14px;
+        height: 14px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnEdit)}) no-repeat;
+      }
+
+      .btn-add-list-wrap {
+        margin: 6px 0 0 226px;
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      .btn-add-list {
+        width: 9px;
+        height: 9px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnAddList)}) no-repeat;
+      }
+
+      select {
+        position: absolute;
+        width: 150px;
+        min-height: 22px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #e96780;
+        border: 1px solid #ccc;
+        padding: 5px;
+        background-color: #fff;
+        z-index: 1;
+        float: left;
+        cursor: pointer;
+        display: inline-block;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], RestfulGroupBar.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RestfulGroupBar.prototype, "groupId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RestfulGroupBar.prototype, "targetPage", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], RestfulGroupBar.prototype, "selectBoxToggle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RestfulGroupBar.prototype, "selectedGroupName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RestfulGroupBar.prototype, "btnDropBoxIcon", void 0);
+RestfulGroupBar = __decorate([
+    customElement('restful-group-bar')
+], RestfulGroupBar);
+export default RestfulGroupBar;
+//# sourceMappingURL=restful-group-bar.js.map

package/dist-client/board-list/restful-group-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-group-bar.js","sourceRoot":"","sources":["../../client/board-list/restful-group-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nconst btnOpenDropbox = require('../../assets/icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../assets/icons/group-bar/btn-close-dropbox.png')\nconst btnEdit = require('../../assets/icons/group-bar/btn-edit.png')\nconst btnAddList = require('../../assets/icons/group-bar/btn-add-list.png')\n\n@customElement('restful-group-bar')\nexport default class RestfulGroupBar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        padding: 12px 12px 12px 20px;\n        background-color: var(--group-bar-background-color);\n        overflow-x: hidden;\n      }\n\n      ul {\n        display: flex;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        white-space: nowrap;\n        clear: both;\n      }\n\n      li {\n        padding: 0px 3px;\n      }\n\n      li:hover {\n        background-color: rgba(255, 180, 180, 1);\n      }\n\n      li a {\n        width: calc(100% - 24px);\n        padding: 5px 4px 1px 4px;\n        text-decoration: none;\n        font-size: 12px;\n        font-weight: bold;\n        color: rgb(233, 103, 128);\n        display: inline-block;\n      }\n\n      li span {\n        height: 16px;\n        margin-top: 4px;\n        border-radius: 2px;\n        float: right;\n        display: none;\n      }\n\n      li:hover span {\n        display: inline-block;\n      }\n\n      li span:hover {\n        background-color: #f8c2cc;\n      }\n\n      .group-select-box {\n        position: absolute;\n        width: 200px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .group-select-box > span:nth-child(1) {\n        position: absolute;\n        padding: 3px 0 0 6px;\n      }\n\n      .group-select-box > span:nth-child(2) {\n        float: right;\n      }\n\n      .select-box {\n        display: none;\n      }\n\n      .select-box.on {\n        display: block;\n        padding-top: 2px;\n      }\n\n      .select-box.active {\n        background-color: #1344;\n      }\n\n      .add-group {\n        cursor: pointer;\n      }\n\n      .btn-open-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnOpenDropbox)}) no-repeat;\n      }\n\n      .btn-close-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;\n      }\n\n      .btn-edit {\n        width: 14px;\n        height: 14px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnEdit)}) no-repeat;\n      }\n\n      .btn-add-list-wrap {\n        margin: 6px 0 0 226px;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .btn-add-list {\n        width: 9px;\n        height: 9px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnAddList)}) no-repeat;\n      }\n\n      select {\n        position: absolute;\n        width: 150px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        z-index: 1;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n    `\n  ]\n\n  @property({ type: Array }) groups?: any[]\n  @property({ type: String }) groupId?: string\n  @property({ type: String }) targetPage?: string\n  @property({ type: String }) selectBoxToggle?: string | null\n  @property({ type: String }) selectedGroupName: string = 'ALL'\n  @property({ type: String }) btnDropBoxIcon: string = 'btn-open-dropbox'\n\n  render() {\n    return html`\n      <div class=\"group-select-box\" @click=${this._toggleSelectBox}>\n        <span>${this.selectedGroupName}</span>\n        <span><i class=${this.btnDropBoxIcon}></i></span>\n        <ul class=${`select-box ${this.selectBoxToggle}`}>\n          <li @click=${e => this._setGroupTitle('ALL')}>\n            <a href=${this.targetPage || ''}>ALL</a>\n          </li>\n          <li @click=${e => this._setGroupTitle('FAVOR')}>\n            <a href=${`${this.targetPage}/favor`}>FAVOR</a>\n          </li>\n          ${(this.groups || []).map(\n            group => html`\n              <li @click=${e => this._setGroupTitle(group.name)}>\n                <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>\n                <span @click=${e => this._infoGroup(group.id)}><i class=\"btn-edit\"></i></span>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n      <span class=\"btn-add-list-wrap\">\n        <i class=\"btn-add-list\" @click=${e => this._infoGroup()}></i>\n      </span>\n    `\n  }\n\n  _setGroupTitle(groupName) {\n    this.selectedGroupName = groupName\n  }\n\n  _toggleSelectBox() {\n    if (this.selectBoxToggle === 'on') {\n      this.selectBoxToggle = null\n      this.btnDropBoxIcon = 'btn-close-dropbox'\n    } else {\n      this.selectBoxToggle = 'on'\n      this.btnDropBoxIcon = 'btn-open-dropbox'\n    }\n  }\n\n  _infoGroup(groupId?: string) {\n    this.dispatchEvent(\n      new CustomEvent('info-group', {\n        detail: groupId\n      })\n    )\n  }\n}\n"]}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1,3 @@
+import '@operato/context/ox-context-toolbar.js';
+import './viewparts/menu-tools';
+export default function bootstrap(): Promise<void>;

package/dist-client/bootstrap.js

@@ -0,0 +1,27 @@
+import '@operato/context/ox-context-toolbar.js';
+import { html } from 'lit-html';
+import { appendViewpart, VIEWPART_POSITION } from '@operato/layout';
+import { store, UPDATE_BASE_URL } from '@operato/shell';
+import './viewparts/menu-tools';
+export default async function bootstrap() {
+    store.dispatch({
+        type: UPDATE_BASE_URL
+    });
+    appendViewpart({
+        name: 'board-topmenu',
+        viewpart: {
+            show: true,
+            template: html ` <menu-tools></menu-tools> `
+        },
+        position: VIEWPART_POSITION.HEADERBAR
+    });
+    appendViewpart({
+        name: 'context-toolbar',
+        viewpart: {
+            show: true,
+            template: html ` <ox-context-toolbar></ox-context-toolbar> `
+        },
+        position: VIEWPART_POSITION.FOOTERBAR
+    });
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,wBAAwB,CAAA;AAE/B,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,SAAS;IACrC,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,eAAe;KACtB,CAAC,CAAA;IAEF,cAAc,CAAC;QACb,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE;YACR,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAA,6BAA6B;SAC5C;QACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;KACtC,CAAC,CAAA;IAEF,cAAc,CAAC;QACb,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE;YACR,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAA,6CAA6C;SAC5D;QACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;KACtC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import '@operato/context/ox-context-toolbar.js'\n\nimport { html } from 'lit-html'\n\nimport { appendViewpart, VIEWPART_POSITION } from '@operato/layout'\nimport { store, UPDATE_BASE_URL } from '@operato/shell'\n\nimport './viewparts/menu-tools'\n\nexport default async function bootstrap() {\n  store.dispatch({\n    type: UPDATE_BASE_URL\n  })\n\n  appendViewpart({\n    name: 'board-topmenu',\n    viewpart: {\n      show: true,\n      template: html` <menu-tools></menu-tools> `\n    },\n    position: VIEWPART_POSITION.HEADERBAR\n  })\n\n  appendViewpart({\n    name: 'context-toolbar',\n    viewpart: {\n      show: true,\n      template: html` <ox-context-toolbar></ox-context-toolbar> `\n    },\n    position: VIEWPART_POSITION.FOOTERBAR\n  })\n}\n"]}

package/dist-client/components/attachment-ui/restful-file-selector.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class RestfulFileSelector extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    accept?: string;
+    showFilename?: boolean;
+    multiple: boolean;
+    _files: any[];
+    fileInput: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    getUUID(): string;
+    onFileChange(e: any): void;
+    onFileChangeSecond(el: any, files2: any, fileId: any): void;
+    onImageFileChanged(e: any): void;
+}