@fmsim/fmsim-restful 0.0.49

package/dist-client/viewparts/attachment-creation-card.js

@@ -0,0 +1,267 @@
+import { __decorate, __metadata } from "tslib";
+import '@things-factory/image-uploader-ui/client/image-upload-previewer';
+import '../components/attachment-ui/restful-file-selector';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { FileDropHelper } from '@operato/utils';
+const btnAddBoard = require('../../assets/icons/board/btn-add-board.svg');
+let AttachmentCreationCard = class AttachmentCreationCard extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this._files = [];
+    }
+    render() {
+        var categories = this.categories || [];
+        return html `
+      <div @click=${e => this.onClickFlip(e)} front>
+        <i class="btn-add-board"></i>
+        ${i18next.t('text.create attachment')}
+      </div>
+
+      <div @click=${e => this.onClickFlip(e)} back>
+        <form @submit=${e => this.onClickSubmit(e)}>
+          <label>${i18next.t('label.category')}</label>
+          <select
+            .value=${String(this.defaultCategory)}
+            name="category"
+            @change=${e => {
+            this._currentCategory = e.currentTarget.value;
+        }}
+          >
+            <option value="">--${i18next.t('text.please choose a category')}--</option>
+            ${categories.map(category => html `
+                <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>
+              `)}
+          </select>
+
+          <label>${i18next.t('label.file')}</label>
+          <restful-file-selector
+            name="file"
+            label=${String(i18next.t('label.select file'))}
+            accept="${this._currentCategory || '*'}/*"
+            multiple
+            @file-change=${e => {
+            this.fileId = e.detail.fileId;
+            this._files = Array.from(e.detail.files);
+        }}
+          ></restful-file-selector>
+
+          <div id="thumbnail-area">
+            ${this._files.map(file => html ` <image-upload-previewer .file=${file}></image-upload-previewer> `)}
+          </div>
+
+          <input type="submit" value=${String(i18next.t('button.create'))} />
+        </form>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        FileDropHelper.set(this);
+    }
+    onClickFlip(e) {
+        if (e.currentTarget.hasAttribute('front') ||
+            (e.currentTarget.hasAttribute('back') && e.target.tagName != 'INPUT' && e.target.tagName != 'SELECT')) {
+            this.classList.toggle('flipped');
+        }
+        e.stopPropagation();
+    }
+    onClickSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var form = e.target;
+        var category = form.elements['category'].value;
+        var files = this._files;
+        var fileId = this.fileId;
+        const extension = fileId === null || fileId === void 0 ? void 0 : fileId.substring(fileId.length - 3);
+        if (!extension || extension !== (extension === null || extension === void 0 ? void 0 : extension.toLowerCase())) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: 'Error : File extension is not available.',
+                    ex: 'Error : File extension is not available.'
+                }
+            }));
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('create-attachment', {
+            detail: {
+                category,
+                files,
+                fileId
+            }
+        }));
+    }
+    reset() {
+        var form = this.renderRoot.querySelector('form');
+        if (form) {
+            form.reset();
+            this._files = [];
+        }
+        this.classList.remove('flipped');
+    }
+};
+AttachmentCreationCard.styles = [
+    css `
+      :host {
+        position: relative;
+
+        padding: 0;
+        margin: 0;
+        height: 100%;
+
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+        box-shadow: var(--box-shadow);
+      }
+
+      :host(.flipped) {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+      }
+
+      [front],
+      [back] {
+        position: absolute;
+
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border: var(--card-list-create-border);
+        border-radius: var(--card-list-create-border-radius);
+
+        background-color: #fff;
+
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+
+      [front] {
+        text-align: center;
+        font-size: 0.8em;
+        color: var(--card-list-create-color);
+        text-transform: capitalize;
+      }
+
+      :host(.candrop) [front],
+      :host(.candrop) [back] {
+        border-width: 2px;
+        background-color: #fffde9;
+      }
+
+      [front] mwc-icon {
+        margin-top: 55px;
+        display: block;
+        font-size: 3.5em;
+        color: var(--card-list-create-icon-color);
+      }
+
+      [back] {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+      }
+
+      [back] form {
+        padding: var(--card-list-create-form-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-template-rows: min-content min-content 1fr min-content;
+        grid-row-gap: 7px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form label {
+        grid-column: span 4;
+        font: var(--card-list-create-label-font);
+        color: var(--card-list-create-label-color);
+      }
+
+      [back] form input,
+      [back] form select {
+        grid-column: span 6;
+        background-color: #fff;
+        border: var(--card-list-create-input-border);
+        border-radius: var(--card-list-create-input-border-radius);
+        padding: var(--card-list-create-input-padding);
+        font: var(--card-list-create-input-font);
+        color: var(--card-list-create-input-color);
+      }
+
+      restful-file-selector {
+        grid-column: span 6;
+        font: var(--card-list-create-input-font);
+        border: none;
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      #thumbnail-area {
+        grid-column: span 10;
+        align-self: stretch;
+        text-align: center;
+        overflow: hidden;
+        overflow-x: auto;
+        white-space: nowrap;
+      }
+
+      image-upload-previewer {
+        display: inline-block;
+        height: 100%;
+      }
+
+      [back] input[type='submit'] {
+        background-color: var(--button-background-color) !important;
+        margin: var(--button-margin);
+        font: var(--button-font);
+        color: var(--button-color) !important;
+        border-radius: var(--button-radius);
+        border: var(--button-border);
+        grid-column: span 10;
+        grid-row: auto / -1;
+        margin: 0;
+      }
+
+      .btn-add-board {
+        width: 3.8em;
+        height: 3.8em;
+        margin: auto;
+        margin-top: 20%;
+        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;
+        display: block;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AttachmentCreationCard.prototype, "defaultCategory", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], AttachmentCreationCard.prototype, "categories", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], AttachmentCreationCard.prototype, "_files", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AttachmentCreationCard.prototype, "_currentCategory", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AttachmentCreationCard.prototype, "fileId", void 0);
+AttachmentCreationCard = __decorate([
+    customElement('attachment-creation-card')
+], AttachmentCreationCard);
+export { AttachmentCreationCard };
+//# sourceMappingURL=attachment-creation-card.js.map

package/dist-client/viewparts/attachment-creation-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-creation-card.js","sourceRoot":"","sources":["../../client/viewparts/attachment-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/image-uploader-ui/client/image-upload-previewer'\nimport '../components/attachment-ui/restful-file-selector'\n\nimport { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FileDropHelper } from '@operato/utils'\n\nconst btnAddBoard = require('../../assets/icons/board/btn-add-board.svg')\n\n@customElement('attachment-creation-card')\nexport class AttachmentCreationCard extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n\n        padding: 0;\n        margin: 0;\n        height: 100%;\n\n        -webkit-transform-style: preserve-3d;\n        transform-style: preserve-3d;\n        -webkit-transition: all 0.5s ease-in-out;\n        transition: all 0.5s ease-in-out;\n        box-shadow: var(--box-shadow);\n      }\n\n      :host(.flipped) {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n      }\n\n      [front],\n      [back] {\n        position: absolute;\n\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n\n        border: var(--card-list-create-border);\n        border-radius: var(--card-list-create-border-radius);\n\n        background-color: #fff;\n\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      [front] {\n        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      :host(.candrop) [front],\n      :host(.candrop) [back] {\n        border-width: 2px;\n        background-color: #fffde9;\n      }\n\n      [front] mwc-icon {\n        margin-top: 55px;\n        display: block;\n        font-size: 3.5em;\n        color: var(--card-list-create-icon-color);\n      }\n\n      [back] {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n      }\n\n      [back] form {\n        padding: var(--card-list-create-form-padding);\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-template-rows: min-content min-content 1fr min-content;\n        grid-row-gap: 7px;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form label {\n        grid-column: span 4;\n        font: var(--card-list-create-label-font);\n        color: var(--card-list-create-label-color);\n      }\n\n      [back] form input,\n      [back] form select {\n        grid-column: span 6;\n        background-color: #fff;\n        border: var(--card-list-create-input-border);\n        border-radius: var(--card-list-create-input-border-radius);\n        padding: var(--card-list-create-input-padding);\n        font: var(--card-list-create-input-font);\n        color: var(--card-list-create-input-color);\n      }\n\n      restful-file-selector {\n        grid-column: span 6;\n        font: var(--card-list-create-input-font);\n        border: none;\n        box-sizing: border-box;\n        padding: 0;\n      }\n\n      #thumbnail-area {\n        grid-column: span 10;\n        align-self: stretch;\n        text-align: center;\n        overflow: hidden;\n        overflow-x: auto;\n        white-space: nowrap;\n      }\n\n      image-upload-previewer {\n        display: inline-block;\n        height: 100%;\n      }\n\n      [back] input[type='submit'] {\n        background-color: var(--button-background-color) !important;\n        margin: var(--button-margin);\n        font: var(--button-font);\n        color: var(--button-color) !important;\n        border-radius: var(--button-radius);\n        border: var(--button-border);\n        grid-column: span 10;\n        grid-row: auto / -1;\n        margin: 0;\n      }\n\n      .btn-add-board {\n        width: 3.8em;\n        height: 3.8em;\n        margin: auto;\n        margin-top: 20%;\n        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: String }) defaultCategory?: string\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: Array }) _files: any[] = []\n  @property({ type: String }) _currentCategory?: string\n  @property({ type: String }) fileId?: string\n\n  render() {\n    var categories = this.categories || []\n\n    return html`\n      <div @click=${e => this.onClickFlip(e)} front>\n        <i class=\"btn-add-board\"></i>\n        ${i18next.t('text.create attachment')}\n      </div>\n\n      <div @click=${e => this.onClickFlip(e)} back>\n        <form @submit=${e => this.onClickSubmit(e)}>\n          <label>${i18next.t('label.category')}</label>\n          <select\n            .value=${String(this.defaultCategory)}\n            name=\"category\"\n            @change=${e => {\n              this._currentCategory = e.currentTarget.value\n            }}\n          >\n            <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n            ${categories.map(\n              category => html`\n                <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>\n              `\n            )}\n          </select>\n\n          <label>${i18next.t('label.file')}</label>\n          <restful-file-selector\n            name=\"file\"\n            label=${String(i18next.t('label.select file'))}\n            accept=\"${this._currentCategory || '*'}/*\"\n            multiple\n            @file-change=${e => {\n              this.fileId = e.detail.fileId\n              this._files = Array.from(e.detail.files)\n            }}\n          ></restful-file-selector>\n\n          <div id=\"thumbnail-area\">\n            ${this._files.map(file => html` <image-upload-previewer .file=${file}></image-upload-previewer> `)}\n          </div>\n\n          <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n        </form>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n  }\n\n  onClickFlip(e) {\n    if (\n      e.currentTarget.hasAttribute('front') ||\n      (e.currentTarget.hasAttribute('back') && e.target.tagName != 'INPUT' && e.target.tagName != 'SELECT')\n    ) {\n      this.classList.toggle('flipped')\n    }\n\n    e.stopPropagation()\n  }\n\n  onClickSubmit(e) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target\n\n    var category = form.elements['category'].value\n    var files = this._files\n    var fileId = this.fileId\n\n    const extension = fileId?.substring(fileId.length - 3)\n    if (!extension || extension !== extension?.toLowerCase()) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'Error : File extension is not available.',\n            ex: 'Error : File extension is not available.'\n          }\n        })\n      )\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('create-attachment', {\n        detail: {\n          category,\n          files,\n          fileId\n        }\n      })\n    )\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n      this._files = []\n    }\n\n    this.classList.remove('flipped')\n  }\n}\n"]}

package/dist-client/viewparts/board-creation-card.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import './board-creation-popup';
+declare const BoardCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class BoardCreationCard extends BoardCreationCard_base {
+    static styles: import("lit").CSSResult[];
+    defaultGroup?: string;
+    groups: any[];
+    popup: any;
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(): void;
+    reset(): void;
+}
+export {};

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

@@ -0,0 +1,93 @@
+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';
+import { openPopup } from '@operato/layout';
+import './board-creation-popup';
+const btnAddBoard = require('../../assets/icons/board/btn-add-board.svg');
+let BoardCreationCard = class BoardCreationCard extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+    }
+    render() {
+        return html ` <div @click=${e => this.onClick()}><i class="btn-add-board"></i>create board</div>`;
+    }
+    onClick() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var template = html `
+      <board-creation-popup-new
+        .defaultGroup=${this.defaultGroup}
+        .groups=${this.groups}
+        @create-board=${async (e) => {
+            var { name, description, groupId, useMcsAutoConfig, header } = e.detail;
+            this.dispatchEvent(new CustomEvent('create-board', {
+                detail: {
+                    name,
+                    description,
+                    groupId,
+                    useMcsAutoConfig,
+                    header
+                }
+            }));
+            this.popup && this.popup.close();
+        }}
+      ></board-creation-popup-new>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'medium',
+            title: i18next.t('title.create-board')
+        });
+    }
+    reset() { }
+};
+BoardCreationCard.styles = [
+    css `
+      :host {
+        display: flex;
+        border: var(--card-list-create-border);
+        border-radius: var(--card-list-create-border-radius);
+
+        background-color: red;
+
+        align-content: center;
+        justify-content: center;
+      }
+
+      div {
+        text-align: center;
+        font-size: 0.8em;
+        color: var(--card-list-create-color);
+        text-transform: capitalize;
+      }
+
+      .btn-add-board {
+        width: 3.8em;
+        height: 3.8em;
+        margin: auto;
+        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;
+        display: block;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardCreationCard.prototype, "defaultGroup", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardCreationCard.prototype, "groups", void 0);
+BoardCreationCard = __decorate([
+    customElement('board-creation-card')
+], BoardCreationCard);
+export { BoardCreationCard };
+//# sourceMappingURL=board-creation-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"board-creation-card.js","sourceRoot":"","sources":["../../client/viewparts/board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,wBAAwB,CAAA;AAE/B,MAAM,WAAW,GAAG,OAAO,CAAC,4CAA4C,CAAC,CAAA;AAGzE,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAApE;;QAgC6B,WAAM,GAAU,EAAE,CAAA;IAkD/C,CAAC;IA9CC,MAAM;QACJ,OAAO,IAAI,CAAA,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,kDAAkD,CAAA;IAClG,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAC,CAAC,EAAC,EAAE;YACxB,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAEvE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;oBACP,gBAAgB;oBAChB,MAAM;iBACP;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAjFQ,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;0BAuBmB,SAAS,CAAC,WAAW,CAAC;;;KAG3C;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAAmB;AAhClC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAkF7B;SAlFY,iBAAiB","sourcesContent":["import { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport './board-creation-popup'\n\nconst btnAddBoard = require('../../assets/icons/board/btn-add-board.svg')\n\n@customElement('board-creation-card')\nexport class BoardCreationCard extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        border: var(--card-list-create-border);\n        border-radius: var(--card-list-create-border-radius);\n\n        background-color: red;\n\n        align-content: center;\n        justify-content: center;\n      }\n\n      div {\n        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      .btn-add-board {\n        width: 3.8em;\n        height: 3.8em;\n        margin: auto;\n        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any[] = []\n\n  popup: any\n\n  render() {\n    return html` <div @click=${e => this.onClick()}><i class=\"btn-add-board\"></i>create board</div>`\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <board-creation-popup-new\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-board=${async e => {\n          var { name, description, groupId, useMcsAutoConfig, header } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-board', {\n              detail: {\n                name,\n                description,\n                groupId,\n                useMcsAutoConfig,\n                header\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></board-creation-popup-new>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'medium',\n      title: i18next.t('title.create-board')\n    })\n  }\n\n  reset() {}\n}\n"]}

package/dist-client/viewparts/board-creation-popup.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+declare const BoardCreationPopup_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class BoardCreationPopup extends BoardCreationPopup_base {
+    static styles: import("lit").CSSResult[];
+    defaultGroup?: string;
+    groups: any[];
+    selectBoxToggle: string | null;
+    objects: any[];
+    list?: string;
+    board: any;
+    addLegend: any;
+    types: any;
+    render(): import("lit-html").TemplateResult<1>;
+    setGroupTitle(groupTitle: any): void;
+    setType(typeName: any): void;
+    focusOut(): void;
+    keyDown(select: any): void;
+    onClickSubmit(e: any): void;
+}
+export {};