@fmsim/fmsim-restful 0.0.49

package/dist-client/viewparts/board-creation-popup.js

@@ -0,0 +1,314 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+const btnSearchName = require('../../assets/icons/group-bar/btn-search-name.png');
+let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.selectBoxToggle = null;
+        this.objects = [];
+        this.board = {
+            name: null,
+            description: null,
+            groupId: null,
+            groupName: null
+        };
+    }
+    render() {
+        var groups = this.groups || [];
+        return html `
+      <form>
+        <label>${i18next.t('label.name')}</label><br />
+        <input
+          type="text"
+          .value=${this.board.name}
+          @change=${e => (this.board.name = e.target.value)}
+          data-field="name"
+        />
+
+        <label>${i18next.t('label.description')}</label><br />
+        <textarea
+          .value=${this.board.description}
+          @change=${e => (this.board.description = e.target.value)}
+          data-field="description"
+        ></textarea>
+
+        <label>${i18next.t('label.group')}</label><br />
+        <i class="btn-search-name" @click=${e => this.keyDown('group')}></i>
+        <div class="select-div">
+          <input
+            type="text"
+            class="group-input-value"
+            .value=${this.board.groupId}
+            @keydown=${e => this.keyDown('group')}
+            data-field="group"
+          />
+          <input
+            type="text"
+            class="group-input"
+            .value=${this.board.groupName}
+            @keydown=${e => this.keyDown('group')}
+          />
+          <ul class=${`select-box ${this.selectBoxToggle == 'group' ? 'on' : ''}`} @focusout=${e => this.focusOut()}>
+            ${(groups || []).map(group => html `
+                <li @click=${e => this.setGroupTitle(group.name)}>
+                  <a>${group.name}</a>
+                </li>
+              `)}
+          </ul>
+        </div>
+      </form>
+      <div class="create-div">
+        <input
+          type="button"
+          class="crud-button"
+          value=${String(i18next.t('button.create'))}
+          @click=${e => this.onClickSubmit(e)}
+        />
+      </div>
+    `;
+    }
+    setGroupTitle(groupTitle) {
+        this.groups.forEach(group => {
+            if (group.name === groupTitle) {
+                this.board.groupId = group.id;
+                this.board.groupName = groupTitle;
+            }
+        });
+        this.selectBoxToggle = null;
+    }
+    setType(typeName) {
+        this.types.forEach(type => {
+            if (type.name === typeName) {
+                this.board.type = typeName;
+            }
+        });
+        this.selectBoxToggle = null;
+    }
+    focusOut() {
+        this.selectBoxToggle = null;
+    }
+    keyDown(select) {
+        this.selectBoxToggle = select;
+    }
+    onClickSubmit(e) {
+        var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
+            var _a;
+            return (_a = this.renderRoot.querySelector(`[data-field=${attr}]`)) === null || _a === void 0 ? void 0 : _a.value;
+        });
+        if (!name || !groupId) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('create-board', {
+            detail: {
+                name,
+                description,
+                groupId
+            }
+        }));
+    }
+};
+BoardCreationPopup.styles = [
+    css `
+      :host {
+        display: block;
+        background-color: white;
+        height: 100%;
+        min-width: 50vw;
+        overflow: auto;
+        padding: 10px;
+        position: relative;
+      }
+
+      form {
+        padding: 10px;
+        padding-bottom: 5px;
+      }
+
+      label {
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        text-transform: capitalize;
+        color: rgb(0, 0, 0);
+      }
+
+      span {
+        width: calc(100% - 9px);
+        min-height: 16px;
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        background-color: rgb(204, 204, 204);
+        padding: 8px;
+        border-radius: 3px;
+        margin-bottom: 15px;
+        display: block;
+      }
+
+      input.crud-button,
+      input.add-button {
+        width: 109px;
+        font-family: Arial;
+        font-size: 13px;
+        font-weight: bold;
+        color: rgb(255, 255, 255);
+        background-color: rgb(233, 103, 128);
+        border: 0px solid rgb(255, 255, 255);
+        cursor: pointer;
+      }
+
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        width: 100%;
+        height: 29px;
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        font-family: Roboto;
+        margin: 3px 0 15px 0;
+      }
+
+      input.group-input,
+      input.type-input {
+        width: 90%;
+        height: 25px;
+        margin-bottom: 5px;
+        border: none;
+      }
+
+      input.group-input-value {
+        display: none;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      textarea {
+        resize: none;
+        height: 66px;
+      }
+
+      textarea:focus {
+        outline: none;
+      }
+
+      .btn-search-name {
+        width: 13px;
+        height: 12px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnSearchName)}) no-repeat;
+      }
+
+      i {
+        position: absolute;
+        margin-top: 15px;
+        right: 25px;
+        cursor: pointer;
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+        clear: both;
+      }
+
+      li {
+        padding: 0px 3px;
+        cursor: pointer;
+      }
+
+      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;
+      }
+
+      div.select-div {
+        width: 100%;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        margin: 3px 0 15px 0;
+      }
+      div.select-div + div.select-div {
+        margin-top: 10px;
+      }
+      div.create-div {
+        text-align: center;
+        margin-top: 20px;
+      }
+
+      .select-box {
+        display: none;
+      }
+
+      .select-box.on {
+        display: block;
+      }
+      .add-button {
+        width: 30px !important;
+        margin-left: 45px;
+        font-size: 17px;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardCreationPopup.prototype, "defaultGroup", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardCreationPopup.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], BoardCreationPopup.prototype, "selectBoxToggle", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardCreationPopup.prototype, "objects", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardCreationPopup.prototype, "list", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardCreationPopup.prototype, "board", void 0);
+BoardCreationPopup = __decorate([
+    customElement('board-creation-popup-new')
+], BoardCreationPopup);
+export { BoardCreationPopup };
+//# sourceMappingURL=board-creation-popup.js.map

package/dist-client/viewparts/board-creation-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-creation-popup.js","sourceRoot":"","sources":["../../client/viewparts/board-creation-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,MAAM,aAAa,GAAG,OAAO,CAAC,kDAAkD,CAAC,CAAA;AAGjF,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAArE;;QAiL6B,WAAM,GAAU,EAAE,CAAA;QACjB,oBAAe,GAAkB,IAAI,CAAA;QACtC,YAAO,GAAU,EAAE,CAAA;QAGlB,UAAK,GAAQ;YACvC,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,IAAI;YACjB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAA;IA4GH,CAAC;IAvGC,MAAM;QACJ,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;iBAEE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;;mBAGrB,IAAI,CAAC,KAAK,CAAC,IAAI;oBACd,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;iBAI1C,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;mBAE5B,IAAI,CAAC,KAAK,CAAC,WAAW;oBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;iBAIjD,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;4CACG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;qBAKjD,IAAI,CAAC,KAAK,CAAC,OAAO;uBAChB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;;qBAM5B,IAAI,CAAC,KAAK,CAAC,SAAS;uBAClB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;sBAE3B,cAAc,IAAI,CAAC,eAAe,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;cACrG,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAClB,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;6BACE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC;uBACzC,KAAK,CAAC,IAAI;;eAElB,CACF;;;;;;;;kBAQK,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;mBACjC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;KAGxC,CAAA;IACH,CAAC;IAED,aAAa,CAAC,UAAU;QACtB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC1B,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;gBAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,CAAA;gBAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAA;aAClC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,QAAQ;QACd,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAA;aAC3B;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC7B,CAAC;IACD,QAAQ;QACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,MAAM;QACZ,IAAI,CAAC,eAAe,GAAG,MAAM,CAAA;IAC/B,CAAC;IAED,aAAa,CAAC,CAAC;QACb,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YAC7E,OAAO,MAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,IAAI,GAAG,CAAsB,0CAAE,KAAK,CAAA;QAC3F,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YACrB,OAAM;SACP;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI;gBACJ,WAAW;gBACX,OAAO;aACR;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAtSQ,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2FmB,SAAS,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+E7C;CACF,CAAA;AAG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAmB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAsC;AACtC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mDAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAK1B;AA3LU,kBAAkB;IAD9B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,kBAAkB,CAuS9B;SAvSY,kBAAkB","sourcesContent":["import { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nconst btnSearchName = require('../../assets/icons/group-bar/btn-search-name.png')\n\n@customElement('board-creation-popup-new')\nexport class BoardCreationPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        background-color: white;\n        height: 100%;\n        min-width: 50vw;\n        overflow: auto;\n        padding: 10px;\n        position: relative;\n      }\n\n      form {\n        padding: 10px;\n        padding-bottom: 5px;\n      }\n\n      label {\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        text-transform: capitalize;\n        color: rgb(0, 0, 0);\n      }\n\n      span {\n        width: calc(100% - 9px);\n        min-height: 16px;\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        background-color: rgb(204, 204, 204);\n        padding: 8px;\n        border-radius: 3px;\n        margin-bottom: 15px;\n        display: block;\n      }\n\n      input.crud-button,\n      input.add-button {\n        width: 109px;\n        font-family: Arial;\n        font-size: 13px;\n        font-weight: bold;\n        color: rgb(255, 255, 255);\n        background-color: rgb(233, 103, 128);\n        border: 0px solid rgb(255, 255, 255);\n        cursor: pointer;\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        width: 100%;\n        height: 29px;\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        font-family: Roboto;\n        margin: 3px 0 15px 0;\n      }\n\n      input.group-input,\n      input.type-input {\n        width: 90%;\n        height: 25px;\n        margin-bottom: 5px;\n        border: none;\n      }\n\n      input.group-input-value {\n        display: none;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      textarea {\n        resize: none;\n        height: 66px;\n      }\n\n      textarea:focus {\n        outline: none;\n      }\n\n      .btn-search-name {\n        width: 13px;\n        height: 12px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnSearchName)}) no-repeat;\n      }\n\n      i {\n        position: absolute;\n        margin-top: 15px;\n        right: 25px;\n        cursor: pointer;\n      }\n\n      ul {\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        cursor: pointer;\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      div.select-div {\n        width: 100%;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        margin: 3px 0 15px 0;\n      }\n      div.select-div + div.select-div {\n        margin-top: 10px;\n      }\n      div.create-div {\n        text-align: center;\n        margin-top: 20px;\n      }\n\n      .select-box {\n        display: none;\n      }\n\n      .select-box.on {\n        display: block;\n      }\n      .add-button {\n        width: 30px !important;\n        margin-left: 45px;\n        font-size: 17px;\n      }\n    `\n  ]\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any[] = []\n  @property({ type: String }) selectBoxToggle: string | null = null\n  @property({ type: Array }) objects: any[] = []\n  @property({ type: String }) list?: string\n\n  @property({ type: Object }) board: any = {\n    name: null,\n    description: null,\n    groupId: null,\n    groupName: null\n  }\n\n  addLegend: any\n  types: any\n\n  render() {\n    var groups = this.groups || []\n\n    return html`\n      <form>\n        <label>${i18next.t('label.name')}</label><br />\n        <input\n          type=\"text\"\n          .value=${this.board.name}\n          @change=${e => (this.board.name = e.target.value)}\n          data-field=\"name\"\n        />\n\n        <label>${i18next.t('label.description')}</label><br />\n        <textarea\n          .value=${this.board.description}\n          @change=${e => (this.board.description = e.target.value)}\n          data-field=\"description\"\n        ></textarea>\n\n        <label>${i18next.t('label.group')}</label><br />\n        <i class=\"btn-search-name\" @click=${e => this.keyDown('group')}></i>\n        <div class=\"select-div\">\n          <input\n            type=\"text\"\n            class=\"group-input-value\"\n            .value=${this.board.groupId}\n            @keydown=${e => this.keyDown('group')}\n            data-field=\"group\"\n          />\n          <input\n            type=\"text\"\n            class=\"group-input\"\n            .value=${this.board.groupName}\n            @keydown=${e => this.keyDown('group')}\n          />\n          <ul class=${`select-box ${this.selectBoxToggle == 'group' ? 'on' : ''}`} @focusout=${e => this.focusOut()}>\n            ${(groups || []).map(\n              group => html`\n                <li @click=${e => this.setGroupTitle(group.name)}>\n                  <a>${group.name}</a>\n                </li>\n              `\n            )}\n          </ul>\n        </div>\n      </form>\n      <div class=\"create-div\">\n        <input\n          type=\"button\"\n          class=\"crud-button\"\n          value=${String(i18next.t('button.create'))}\n          @click=${e => this.onClickSubmit(e)}\n        />\n      </div>\n    `\n  }\n\n  setGroupTitle(groupTitle) {\n    this.groups.forEach(group => {\n      if (group.name === groupTitle) {\n        this.board.groupId = group.id\n        this.board.groupName = groupTitle\n      }\n    })\n    this.selectBoxToggle = null\n  }\n\n  setType(typeName) {\n    this.types.forEach(type => {\n      if (type.name === typeName) {\n        this.board.type = typeName\n      }\n    })\n    this.selectBoxToggle = null\n  }\n  focusOut() {\n    this.selectBoxToggle = null\n  }\n\n  keyDown(select) {\n    this.selectBoxToggle = select\n  }\n\n  onClickSubmit(e) {\n    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n      return (this.renderRoot.querySelector(`[data-field=${attr}]`) as HTMLInputElement)?.value\n    })\n\n    if (!name || !groupId) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('create-board', {\n        detail: {\n          name,\n          description,\n          groupId\n        }\n      })\n    )\n  }\n}\n"]}

package/dist-client/viewparts/board-info.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class BoardInfo extends LitElement {
+    static styles: import("lit").CSSResult[];
+    boardId?: string;
+    groupId?: string;
+    board: any;
+    boardGroupList: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    refresh(): Promise<void>;
+    updateBoard(): Promise<void>;
+    deleteBoard(): Promise<void>;
+    close(): void;
+}

package/dist-client/viewparts/board-info.js

@@ -0,0 +1,284 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { fetchBoardById, fetchGroupList } from '@fmsim/api/restful.js';
+let BoardInfo = class BoardInfo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.boardGroupList = [];
+    }
+    render() {
+        var board = this.board || { name: '', description: '' };
+        var boardGroupList = this.boardGroupList || [];
+        return html `
+      <form>
+        <label>${i18next.t('label.name')}</label><br />
+        <input type="text" .value=${board.name} @change=${e => (this.board.name = e.target.value)} />
+
+        <label>${i18next.t('label.description')}</label><br />
+        <input type="text" .value=${board.description} @change=${e => (this.board.description = e.target.value)} />
+
+        <label>${i18next.t('label.group')}</label><br />
+        <select @change=${e => (this.board.groupId = e.target.value)} .value=${this.groupId || ''}>
+          ${boardGroupList.map(item => html ` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `)}
+        </select>
+        <label>${i18next.t('label.creator')}</label><br />
+        <span>${board.creatorId}</span>
+
+        <label>${i18next.t('label.created-at')}</label><br />
+        <span>${new Date(board.createdAt).toLocaleString()}</span>
+
+        <label>${i18next.t('label.updater')}</label><br />
+        <span>${board.updaterId}</span>
+
+        <label>${i18next.t('label.updated-at')}</label><br />
+        <span>${new Date(board.updatedAt).toLocaleString()}</span>
+      </form>
+      <div buttons>
+        <input
+          class="crud-button"
+          type="button"
+          name="save"
+          value=${String(i18next.t('button.save'))}
+          @click=${this.updateBoard.bind(this)}
+        /><input
+          class="crud-button"
+          type="button"
+          name="delete"
+          value=${String(i18next.t('button.delete'))}
+          @click=${this.deleteBoard.bind(this)}
+        />
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.refresh();
+    }
+    async refresh() {
+        var _a, _b;
+        let boardResponse = (_a = (await fetchBoardById(this.boardId))) === null || _a === void 0 ? void 0 : _a.data;
+        if (!boardResponse || !boardResponse.status) {
+            throw new Error('Error : FetchBoardById');
+        }
+        let board = boardResponse.board;
+        let groupListResponse = (_b = (await fetchGroupList())) === null || _b === void 0 ? void 0 : _b.data;
+        if (!groupListResponse || !groupListResponse.status) {
+            throw new Error('Error : fetchGroupList');
+        }
+        this.boardGroupList = groupListResponse.groups;
+        this.groupId = board.groupId;
+        this.board = board;
+    }
+    async updateBoard() {
+        this.dispatchEvent(new CustomEvent('update-board', {
+            detail: this.board
+        }));
+        this.close();
+    }
+    async deleteBoard() {
+        this.dispatchEvent(new CustomEvent('delete-board', {
+            detail: this.boardId
+        }));
+        this.close();
+    }
+    close() {
+        history.back();
+    }
+};
+BoardInfo.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        background-color: white;
+        height: 100%;
+        min-width: 50vw;
+        overflow: auto;
+        padding: 10px;
+        position: relative;
+      }
+
+      h2 {
+        text-align: center;
+        text-transform: capitalize;
+      }
+
+      [edit] {
+        position: absolute;
+        top: 25px;
+        right: 25px;
+        color: var(--board-info-icon-color, black);
+        font-size: 1.5em;
+      }
+
+      img {
+        display: block;
+
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      form {
+        padding: 10px;
+        padding-bottom: 5px;
+        overflow: auto;
+      }
+
+      [buttons] {
+        text-align: center;
+      }
+
+      [buttons] * {
+        margin: 10px;
+      }
+
+      fieldset {
+        display: contents;
+      }
+
+      legend {
+        grid-column: span 12;
+        text-transform: capitalize;
+
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--legend-text-color);
+        border-bottom: var(--legend-border-bottom);
+      }
+
+      label {
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        text-transform: capitalize;
+        color: rgb(0, 0, 0);
+      }
+
+      span {
+        width: calc(100% - 9px);
+        min-height: 16px;
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        background-color: rgb(204, 204, 204);
+        padding: 8px;
+        border-radius: 3px;
+        margin-bottom: 15px;
+        display: block;
+      }
+
+      input.crud-button {
+        width: 109px;
+        font-family: Arial;
+        font-size: 13px;
+        font-weight: bold;
+        color: rgb(255, 255, 255);
+        background-color: rgb(233, 103, 128);
+        border: 0px solid rgb(255, 255, 255);
+        cursor: pointer;
+      }
+
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        width: 100%;
+        height: 29px;
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        font-family: Roboto;
+        margin: 3px 0 15px 0;
+      }
+
+      select {
+        width: 100%;
+      }
+
+      input[type='checkbox'],
+      input[type='radio'] {
+        justify-self: end;
+        align-self: center;
+        grid-column: span 3 / auto;
+      }
+
+      input[type='checkbox'] + label,
+      input[type='radio'] + label {
+        text-align: left;
+        grid-column: span 9 / auto;
+
+        font: var(--form-sublabel-font);
+        color: var(--form-sublabel-color);
+      }
+
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
+      input[type='checkbox'] {
+        margin: 0;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+
+        form {
+          max-width: 90%;
+          grid-gap: 5px;
+        }
+
+        label {
+          grid-column: span 12;
+          text-align: left;
+          align-self: end;
+        }
+
+        span,
+        input,
+        table,
+        select,
+        textarea,
+        [custom-input] {
+          grid-column: span 12;
+        }
+        input[type='checkbox'],
+        input[type='radio'] {
+          justify-self: start;
+          align-self: center;
+          grid-column: span 1 / auto;
+        }
+
+        input[type='checkbox'] + label,
+        input[type='radio'] + label {
+          grid-column: span 11 / auto;
+          align-self: center;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardInfo.prototype, "boardId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardInfo.prototype, "groupId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardInfo.prototype, "board", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardInfo.prototype, "boardGroupList", void 0);
+BoardInfo = __decorate([
+    customElement('board-info')
+], BoardInfo);
+export { BoardInfo };
+//# sourceMappingURL=board-info.js.map

package/dist-client/viewparts/board-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { fetchBoardById, fetchGroupList } from '@fmsim/api/restful.js'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        background-color: white;\n        height: 100%;\n        min-width: 50vw;\n        overflow: auto;\n        padding: 10px;\n        position: relative;\n      }\n\n      h2 {\n        text-align: center;\n        text-transform: capitalize;\n      }\n\n      [edit] {\n        position: absolute;\n        top: 25px;\n        right: 25px;\n        color: var(--board-info-icon-color, black);\n        font-size: 1.5em;\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      form {\n        padding: 10px;\n        padding-bottom: 5px;\n        overflow: auto;\n      }\n\n      [buttons] {\n        text-align: center;\n      }\n\n      [buttons] * {\n        margin: 10px;\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        text-transform: capitalize;\n\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--legend-text-color);\n        border-bottom: var(--legend-border-bottom);\n      }\n\n      label {\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        text-transform: capitalize;\n        color: rgb(0, 0, 0);\n      }\n\n      span {\n        width: calc(100% - 9px);\n        min-height: 16px;\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        background-color: rgb(204, 204, 204);\n        padding: 8px;\n        border-radius: 3px;\n        margin-bottom: 15px;\n        display: block;\n      }\n\n      input.crud-button {\n        width: 109px;\n        font-family: Arial;\n        font-size: 13px;\n        font-weight: bold;\n        color: rgb(255, 255, 255);\n        background-color: rgb(233, 103, 128);\n        border: 0px solid rgb(255, 255, 255);\n        cursor: pointer;\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        width: 100%;\n        height: 29px;\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        font-family: Roboto;\n        margin: 3px 0 15px 0;\n      }\n\n      select {\n        width: 100%;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        justify-self: end;\n        align-self: center;\n        grid-column: span 3 / auto;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 9 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n      input[type='checkbox'] {\n        margin: 0;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n\n        form {\n          max-width: 90%;\n          grid-gap: 5px;\n        }\n\n        label {\n          grid-column: span 12;\n          text-align: left;\n          align-self: end;\n        }\n\n        span,\n        input,\n        table,\n        select,\n        textarea,\n        [custom-input] {\n          grid-column: span 12;\n        }\n        input[type='checkbox'],\n        input[type='radio'] {\n          justify-self: start;\n          align-self: center;\n          grid-column: span 1 / auto;\n        }\n\n        input[type='checkbox'] + label,\n        input[type='radio'] + label {\n          grid-column: span 11 / auto;\n          align-self: center;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n  @property({ type: String }) groupId?: string\n\n  @state() board: any\n  @state() boardGroupList: any[] = []\n\n  render() {\n    var board = this.board || { name: '', description: '' }\n    var boardGroupList = this.boardGroupList || []\n\n    return html`\n      <form>\n        <label>${i18next.t('label.name')}</label><br />\n        <input type=\"text\" .value=${board.name} @change=${e => (this.board.name = e.target.value)} />\n\n        <label>${i18next.t('label.description')}</label><br />\n        <input type=\"text\" .value=${board.description} @change=${e => (this.board.description = e.target.value)} />\n\n        <label>${i18next.t('label.group')}</label><br />\n        <select @change=${e => (this.board.groupId = e.target.value)} .value=${this.groupId || ''}>\n          ${boardGroupList.map(\n            item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `\n          )}\n        </select>\n        <label>${i18next.t('label.creator')}</label><br />\n        <span>${board.creatorId}</span>\n\n        <label>${i18next.t('label.created-at')}</label><br />\n        <span>${new Date(board.createdAt).toLocaleString()}</span>\n\n        <label>${i18next.t('label.updater')}</label><br />\n        <span>${board.updaterId}</span>\n\n        <label>${i18next.t('label.updated-at')}</label><br />\n        <span>${new Date(board.updatedAt).toLocaleString()}</span>\n      </form>\n      <div buttons>\n        <input\n          class=\"crud-button\"\n          type=\"button\"\n          name=\"save\"\n          value=${String(i18next.t('button.save'))}\n          @click=${this.updateBoard.bind(this)}\n        /><input\n          class=\"crud-button\"\n          type=\"button\"\n          name=\"delete\"\n          value=${String(i18next.t('button.delete'))}\n          @click=${this.deleteBoard.bind(this)}\n        />\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.refresh()\n  }\n\n  async refresh() {\n    let boardResponse = (await fetchBoardById(this.boardId!))?.data\n    if (!boardResponse || !boardResponse.status) {\n      throw new Error('Error : FetchBoardById')\n    }\n    let board = boardResponse.board\n\n    let groupListResponse = (await fetchGroupList())?.data\n    if (!groupListResponse || !groupListResponse.status) {\n      throw new Error('Error : fetchGroupList')\n    }\n\n    this.boardGroupList = groupListResponse.groups\n    this.groupId = board.groupId\n    this.board = board\n  }\n\n  async updateBoard() {\n    this.dispatchEvent(\n      new CustomEvent('update-board', {\n        detail: this.board\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteBoard() {\n    this.dispatchEvent(\n      new CustomEvent('delete-board', {\n        detail: this.boardId\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/font-creation-card-new.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const FontCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class FontCreationCard extends FontCreationCard_base {
+    static styles: import("lit").CSSResult[];
+    provider: string;
+    googleFonts: any[];
+    _files: any[];
+    providers: {
+        value: string;
+        display: string;
+    }[];
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    onClickFlip(e: any): void;
+    onClickSubmit(e: any): Promise<void>;
+    reset(): void;
+}
+export {};