@things-factory/board-ui 9.0.0-beta.9 → 9.0.2

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

@@ -6,16 +6,91 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { client } from '@operato/graphql';
-import { privileged } from '@things-factory/auth-base/dist-client';
+import { privileged } from '@things-factory/auth-base/dist-client/index.js';
 let BoardVersions = class BoardVersions extends LitElement {
     constructor() {
         super(...arguments);
         this.versions = [];
     }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface);
+        position: relative;
+        text-align: center;
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        font: var(--label-font);
+      }
+
+      img {
+        display: block;
+
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+      }
+
+      div[card] {
+        position: relative;
+        margin: var(--spacing-medium);
+        text-align: start;
+        border-bottom: var(--border-dim-color);
+      }
+
+      div[info] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium);
+      }
+
+      span {
+        margin-left: auto;
+        font: var(--input-field-font);
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      span md-icon {
+        font-variation-settings: 'FILL' 1;
+
+        vertical-align: middle;
+        font-size: var(--fontsize-large);
+        color: var(--md-sys-color-primary);
+      }
+
+      md-assist-chip {
+        position: absolute;
+        right: 3px;
+        top: 3px;
+        opacity: 0.8;
+
+        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);
+        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
+        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);
+      }
+
+      div[nothing] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+    ]; }
     render() {
         return html `
       ${this.versions.length == 0
-            ? html ` ${i18next.t('text.no released version information available')} `
+            ? html ` <div nothing>${i18next.t('text.no released version information available')}</div> `
             : html `
             ${this.versions.map(version => html `
                 <div card>
@@ -82,73 +157,6 @@ let BoardVersions = class BoardVersions extends LitElement {
         history.back();
     }
 };
-BoardVersions.styles = [
-    css `
-      :host {
-        display: block;
-        background-color: var(--md-sys-color-surface);
-        position: relative;
-        text-align: center;
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        font: var(--label-font);
-      }
-
-      img {
-        display: block;
-
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
-        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-      }
-
-      div[card] {
-        position: relative;
-        margin: var(--spacing-medium);
-        text-align: start;
-        border-bottom: var(--border-dim-color);
-      }
-
-      div[info] {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-medium);
-      }
-
-      span {
-        margin-left: auto;
-        font: var(--input-field-font);
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-
-      span md-icon {
-        font-variation-settings: 'FILL' 1;
-
-        vertical-align: middle;
-        font-size: var(--fontsize-large);
-        color: var(--md-sys-color-primary);
-      }
-
-      md-assist-chip {
-        position: absolute;
-        right: 3px;
-        top: 3px;
-        opacity: 0.8;
-
-        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);
-        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
-        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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

@@ -1 +1 @@
-{"version":3,"file":"board-versions.js","sourceRoot":"","sources":["../../client/viewparts/board-versions.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAG3D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAuEI,aAAQ,GAAU,EAAE,CAAA;IAuF/B,CAAC;IArFC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA,IAAI,OAAO,CAAC,CAAC,CAAC,gDAAgD,CAAC,GAAG;YACxE,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;6BAEA,OAAO,CAAC,SAAS;;6CAED,OAAO,CAAC,OAAO;;kDAEV,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,YAAY;oDACvD,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE;;;;oBAI5E,UAAU,CACV,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;;gCAGQ,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC;iCAC/C,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC;;;;qBAI1D,CACF;;eAEJ,CACF;WACF;KACN,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,QAAQ,GAAG,CACb,MAAM,MAAM,CAAC,KAAK,CAAC;YACjB,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;SAYT;YACD,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE;SAChC,CAAC,CACH,CAAC,IAAI,CAAA;QAEN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAA;IACxC,CAAC;IAED,kBAAkB,CAAC,OAAe;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,OAAO;gBAChB,OAAO;aACR;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AA5JM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEF;CACF,AAlEY,CAkEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAiB;AAEnC;IAAR,KAAK,EAAE;;+CAAqB;AAvElB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA8JzB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('board-versions')\nexport class BoardVersions extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        background-color: var(--md-sys-color-surface);\n        position: relative;\n        text-align: center;\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        font: var(--label-font);\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n        border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n      }\n\n      div[card] {\n        position: relative;\n        margin: var(--spacing-medium);\n        text-align: start;\n        border-bottom: var(--border-dim-color);\n      }\n\n      div[info] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-medium);\n      }\n\n      span {\n        margin-left: auto;\n        font: var(--input-field-font);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n\n      span md-icon {\n        font-variation-settings: 'FILL' 1;\n\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-primary);\n      }\n\n      md-assist-chip {\n        position: absolute;\n        right: 3px;\n        top: 3px;\n        opacity: 0.8;\n\n        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);\n        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n\n  @state() versions: any[] = []\n\n  render() {\n    return html`\n      ${this.versions.length == 0\n        ? html` ${i18next.t('text.no released version information available')} `\n        : html`\n            ${this.versions.map(\n              version => html`\n                <div card>\n                  <img src=${version.thumbnail} />\n                  <div info>\n                    <md-icon>pin</md-icon> ${version.version}\n                    <span>\n                      <md-icon>person</md-icon> ${(version.updater && version.updater.name) || 'anonymouse'}\n                      <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}\n                    </span>\n                  </div>\n\n                  ${privileged(\n                    { privilege: 'mutation', category: 'board' },\n                    html`\n                      <md-assist-chip\n                        elevated\n                        label=${String(i18next.t('button.revert-board-version'))}\n                        @click=${() => this.revertBoardVersion(version.version)}\n                      >\n                        <md-icon slot=\"icon\">recycling</md-icon>\n                      </md-assist-chip>\n                    `\n                  )}\n                </div>\n              `\n            )}\n          `}\n    `\n  }\n\n  firstUpdated() {\n    this.refresh()\n  }\n\n  async refresh() {\n    if (!this.boardId) {\n      return\n    }\n\n    var response = (\n      await client.query({\n        query: gql`\n          query FetchBoardVersionsById($id: String!) {\n            boardVersions(id: $id) {\n              id\n              version\n              thumbnail\n              updater {\n                name\n              }\n              updatedAt\n            }\n          }\n        `,\n        variables: { id: this.boardId }\n      })\n    ).data\n\n    this.versions = response.boardVersions\n  }\n\n  revertBoardVersion(version: number) {\n    this.dispatchEvent(\n      new CustomEvent('revert-board-version', {\n        detail: {\n          id: this.boardId,\n          version\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"board-versions.js","sourceRoot":"","sources":["../../client/viewparts/board-versions.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,gDAAgD,CAAA;AAGpE,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QA+EI,aAAQ,GAAU,EAAE,CAAA;IAuF/B,CAAC;aArKQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA1EY,CA0EZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA,iBAAiB,OAAO,CAAC,CAAC,CAAC,gDAAgD,CAAC,SAAS;YAC3F,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;6BAEA,OAAO,CAAC,SAAS;;6CAED,OAAO,CAAC,OAAO;;kDAEV,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,YAAY;oDACvD,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE;;;;oBAI5E,UAAU,CACV,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;;gCAGQ,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC;iCAC/C,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC;;;;qBAI1D,CACF;;eAEJ,CACF;WACF;KACN,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,QAAQ,GAAG,CACb,MAAM,MAAM,CAAC,KAAK,CAAC;YACjB,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;SAYT;YACD,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE;SAChC,CAAC,CACH,CAAC,IAAI,CAAA;QAEN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAA;IACxC,CAAC;IAED,kBAAkB,CAAC,OAAe;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,OAAO;gBAChB,OAAO;aACR;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAxF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAiB;AAEnC;IAAR,KAAK,EAAE;;+CAAqB;AA/ElB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsKzB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client/index.js'\n\n@customElement('board-versions')\nexport class BoardVersions extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-surface);\n        position: relative;\n        text-align: center;\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        font: var(--label-font);\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n        border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n      }\n\n      div[card] {\n        position: relative;\n        margin: var(--spacing-medium);\n        text-align: start;\n        border-bottom: var(--border-dim-color);\n      }\n\n      div[info] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-medium);\n      }\n\n      span {\n        margin-left: auto;\n        font: var(--input-field-font);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n\n      span md-icon {\n        font-variation-settings: 'FILL' 1;\n\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-primary);\n      }\n\n      md-assist-chip {\n        position: absolute;\n        right: 3px;\n        top: 3px;\n        opacity: 0.8;\n\n        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);\n        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);\n      }\n\n      div[nothing] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n\n  @state() versions: any[] = []\n\n  render() {\n    return html`\n      ${this.versions.length == 0\n        ? html` <div nothing>${i18next.t('text.no released version information available')}</div> `\n        : html`\n            ${this.versions.map(\n              version => html`\n                <div card>\n                  <img src=${version.thumbnail} />\n                  <div info>\n                    <md-icon>pin</md-icon> ${version.version}\n                    <span>\n                      <md-icon>person</md-icon> ${(version.updater && version.updater.name) || 'anonymouse'}\n                      <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}\n                    </span>\n                  </div>\n\n                  ${privileged(\n                    { privilege: 'mutation', category: 'board' },\n                    html`\n                      <md-assist-chip\n                        elevated\n                        label=${String(i18next.t('button.revert-board-version'))}\n                        @click=${() => this.revertBoardVersion(version.version)}\n                      >\n                        <md-icon slot=\"icon\">recycling</md-icon>\n                      </md-assist-chip>\n                    `\n                  )}\n                </div>\n              `\n            )}\n          `}\n    `\n  }\n\n  firstUpdated() {\n    this.refresh()\n  }\n\n  async refresh() {\n    if (!this.boardId) {\n      return\n    }\n\n    var response = (\n      await client.query({\n        query: gql`\n          query FetchBoardVersionsById($id: String!) {\n            boardVersions(id: $id) {\n              id\n              version\n              thumbnail\n              updater {\n                name\n              }\n              updatedAt\n            }\n          }\n        `,\n        variables: { id: this.boardId }\n      })\n    ).data\n\n    this.versions = response.boardVersions\n  }\n\n  revertBoardVersion(version: number) {\n    this.dispatchEvent(\n      new CustomEvent('revert-board-version', {\n        detail: {\n          id: this.boardId,\n          version\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/group-info-basic.js

@@ -12,108 +12,8 @@ let GroupInfo = class GroupInfo extends LitElement {
         super(...arguments);
         this.group = { name: '', description: '' };
     }
-    render() {
-        var group = this.group || { name: '', description: '' };
-        return html `
-      <form>
-        <fieldset>
-          <legend>group information</legend>
-
-          <md-filled-text-field
-            type="text"
-            label=${String(i18next.t('label.name'))}
-            .value=${group.name}
-            @change=${e => (this.group.name = e.target.value)}
-          ></md-filled-text-field>
-
-          <md-filled-text-field
-            type="text"
-            label=${String(i18next.t('label.description'))}
-            .value=${group.description}
-            @change=${e => (this.group.description = e.target.value)}
-          ></md-filled-text-field>
-
-          <label>${i18next.t('label.creator')}</label>
-          <span>
-            <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(group.createdAt).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.updater')}</label>
-          <span>
-            <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(group.updatedAt).toLocaleString()}
-          </span>
-
-          <div buttons>
-            ${this.groupId
-            ? html `
-                  <md-elevated-button danger @click=${this.deleteGroup.bind(this)}
-                    ><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button
-                  >
-                  <md-elevated-button @click=${this.updateGroup.bind(this)}
-                    ><md-icon slot="icon">save</md-icon>${i18next.t('button.save')}</md-elevated-button
-                  >
-                `
-            : html `
-                  <md-elevated-button @click=${this.createGroup.bind(this)}
-                    ><md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}</md-elevated-button
-                  >
-                `}
-          </div>
-        </fieldset>
-      </form>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('groupId')) {
-            this.refresh();
-        }
-    }
-    firstUpdated() {
-        setTimeout(() => {
-            ;
-            this.renderRoot.querySelector('[type=text]').focus();
-        }, 100);
-    }
-    async refresh() {
-        if (!this.groupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
-            this.group = { name: '', description: '' };
-        }
-        else {
-            var response = await fetchGroup(this.groupId);
-            this.group = response.group;
-        }
-    }
-    async createGroup() {
-        this.dispatchEvent(new CustomEvent('create-group', {
-            detail: this.group,
-            bubbles: true,
-            composed: true
-        }));
-        this.close();
-    }
-    async updateGroup() {
-        this.dispatchEvent(new CustomEvent('update-group', {
-            detail: this.group,
-            bubbles: true,
-            composed: true
-        }));
-        this.close();
-    }
-    async deleteGroup() {
-        this.dispatchEvent(new CustomEvent('delete-group', {
-            detail: this.group,
-            bubbles: true,
-            composed: true
-        }));
-        this.close();
-    }
-    close() {
-        history.back();
-    }
-};
-GroupInfo.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: block;
         color: var(--md-sys-color-on-surface);
@@ -240,7 +140,107 @@ GroupInfo.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var group = this.group || { name: '', description: '' };
+        return html `
+      <form>
+        <fieldset>
+          <legend>group information</legend>
+
+          <md-filled-text-field
+            type="text"
+            label=${String(i18next.t('label.name'))}
+            .value=${group.name}
+            @change=${e => (this.group.name = e.target.value)}
+          ></md-filled-text-field>
+
+          <md-filled-text-field
+            type="text"
+            label=${String(i18next.t('label.description'))}
+            .value=${group.description}
+            @change=${e => (this.group.description = e.target.value)}
+          ></md-filled-text-field>
+
+          <label>${i18next.t('label.creator')}</label>
+          <span>
+            <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(group.createdAt).toLocaleString()}
+          </span>
+
+          <label>${i18next.t('label.updater')}</label>
+          <span>
+            <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(group.updatedAt).toLocaleString()}
+          </span>
+
+          <div buttons>
+            ${this.groupId
+            ? html `
+                  <md-elevated-button danger @click=${this.deleteGroup.bind(this)}
+                    ><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button
+                  >
+                  <md-elevated-button @click=${this.updateGroup.bind(this)}
+                    ><md-icon slot="icon">save</md-icon>${i18next.t('button.save')}</md-elevated-button
+                  >
+                `
+            : html `
+                  <md-elevated-button @click=${this.createGroup.bind(this)}
+                    ><md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}</md-elevated-button
+                  >
+                `}
+          </div>
+        </fieldset>
+      </form>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('groupId')) {
+            this.refresh();
+        }
+    }
+    firstUpdated() {
+        setTimeout(() => {
+            ;
+            this.renderRoot.querySelector('[type=text]').focus();
+        }, 100);
+    }
+    async refresh() {
+        if (!this.groupId) {
+            /* model이 없으므로, 기본 모델을 제공함. */
+            this.group = { name: '', description: '' };
+        }
+        else {
+            var response = await fetchGroup(this.groupId);
+            this.group = response.group;
+        }
+    }
+    async createGroup() {
+        this.dispatchEvent(new CustomEvent('create-group', {
+            detail: this.group,
+            bubbles: true,
+            composed: true
+        }));
+        this.close();
+    }
+    async updateGroup() {
+        this.dispatchEvent(new CustomEvent('update-group', {
+            detail: this.group,
+            bubbles: true,
+            composed: true
+        }));
+        this.close();
+    }
+    async deleteGroup() {
+        this.dispatchEvent(new CustomEvent('delete-group', {
+            detail: this.group,
+            bubbles: true,
+            composed: true
+        }));
+        this.close();
+    }
+    close() {
+        history.back();
+    }
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/viewparts/group-info-basic.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-info-basic.js","sourceRoot":"","sources":["../../client/viewparts/group-info-basic.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { fetchGroup } from '../graphql/group.js'\n\n@customElement('group-info-basic')\nexport class GroupInfo extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n        height: 100%;\n        min-width: 360px;\n        overflow: auto;\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n\n        --input-field-padding: var(--spacing-medium);\n        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;\n      }\n\n      form {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        grid-gap: var(--form-grid-gap);\n        grid-auto-rows: minmax(24px, auto);\n        padding: var(--spacing-large);\n        align-items: center;\n      }\n\n      md-filled-text-field {\n        grid-column: span 12;\n        padding: 10px 0;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--spacing-medium) 0;\n        text-align: right;\n\n        display: flex;\n        gap: var(--spacing-small);\n        align-items: center;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 auto;\n      }\n\n      [danger] {\n        float: left;\n        margin: 0;\n        --md-elevated-button-icon-color: var(--md-sys-color-on-error);\n        --md-elevated-button-label-text-color: var(--md-sys-color-on-error);\n        --md-elevated-button-container-color: var(--md-sys-color-error);\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--md-sys-color-primary);\n        text-transform: capitalize;\n      }\n\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--md-sys-color-primary);\n        font: var(--label-font);\n      }\n\n      span {\n        grid-column: span 12;\n        border-bottom: var(--border-dim-color);\n        margin-bottom: var(--spacing-medium);\n        padding-bottom: var(--spacing-small);\n        font: var(--input-field-font);\n      }\n      span md-icon {\n        font-variation-settings: 'FILL' 1;\n\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-primary);\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        grid-column: span 12;\n\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        margin-bottom: var(--spacing-medium);\n        padding: var(--input-field-padding);\n        font: var(--input-field-font);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        place-self: center;\n        margin: 0;\n        grid-column: 1;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any = { name: '', description: '' }\n\n  render() {\n    var group = this.group || { name: '', description: '' }\n\n    return html`\n      <form>\n        <fieldset>\n          <legend>group information</legend>\n\n          <md-filled-text-field\n            type=\"text\"\n            label=${String(i18next.t('label.name'))}\n            .value=${group.name}\n            @change=${e => (this.group.name = e.target.value)}\n          ></md-filled-text-field>\n\n          <md-filled-text-field\n            type=\"text\"\n            label=${String(i18next.t('label.description'))}\n            .value=${group.description}\n            @change=${e => (this.group.description = e.target.value)}\n          ></md-filled-text-field>\n\n          <label>${i18next.t('label.creator')}</label>\n          <span>\n            <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(\n              group.createdAt\n            ).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.updater')}</label>\n          <span>\n            <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(\n              group.updatedAt\n            ).toLocaleString()}\n          </span>\n\n          <div buttons>\n            ${this.groupId\n              ? html`\n                  <md-elevated-button danger @click=${this.deleteGroup.bind(this)}\n                    ><md-icon slot=\"icon\">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button\n                  >\n                  <md-elevated-button @click=${this.updateGroup.bind(this)}\n                    ><md-icon slot=\"icon\">save</md-icon>${i18next.t('button.save')}</md-elevated-button\n                  >\n                `\n              : html`\n                  <md-elevated-button @click=${this.createGroup.bind(this)}\n                    ><md-icon slot=\"icon\">create_new_folder</md-icon>${i18next.t('button.create')}</md-elevated-button\n                  >\n                `}\n          </div>\n        </fieldset>\n      </form>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('groupId')) {\n      this.refresh()\n    }\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('[type=text]') as any).focus()\n    }, 100)\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.group = { name: '', description: '' }\n    } else {\n      var response = await fetchGroup(this.groupId)\n      this.group = response.group\n    }\n  }\n\n  async createGroup() {\n    this.dispatchEvent(\n      new CustomEvent('create-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(\n      new CustomEvent('update-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteGroup() {\n    this.dispatchEvent(\n      new CustomEvent('delete-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"group-info-basic.js","sourceRoot":"","sources":["../../client/viewparts/group-info-basic.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { fetchGroup } from '../graphql/group.js'\n\n@customElement('group-info-basic')\nexport class GroupInfo extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n        height: 100%;\n        min-width: 360px;\n        overflow: auto;\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n\n        --input-field-padding: var(--spacing-medium);\n        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;\n      }\n\n      form {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        grid-gap: var(--form-grid-gap);\n        grid-auto-rows: minmax(24px, auto);\n        padding: var(--spacing-large);\n        align-items: center;\n      }\n\n      md-filled-text-field {\n        grid-column: span 12;\n        padding: 10px 0;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--spacing-medium) 0;\n        text-align: right;\n\n        display: flex;\n        gap: var(--spacing-small);\n        align-items: center;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 auto;\n      }\n\n      [danger] {\n        float: left;\n        margin: 0;\n        --md-elevated-button-icon-color: var(--md-sys-color-on-error);\n        --md-elevated-button-label-text-color: var(--md-sys-color-on-error);\n        --md-elevated-button-container-color: var(--md-sys-color-error);\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--md-sys-color-primary);\n        text-transform: capitalize;\n      }\n\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--md-sys-color-primary);\n        font: var(--label-font);\n      }\n\n      span {\n        grid-column: span 12;\n        border-bottom: var(--border-dim-color);\n        margin-bottom: var(--spacing-medium);\n        padding-bottom: var(--spacing-small);\n        font: var(--input-field-font);\n      }\n      span md-icon {\n        font-variation-settings: 'FILL' 1;\n\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-primary);\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        grid-column: span 12;\n\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        margin-bottom: var(--spacing-medium);\n        padding: var(--input-field-padding);\n        font: var(--input-field-font);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        place-self: center;\n        margin: 0;\n        grid-column: 1;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any = { name: '', description: '' }\n\n  render() {\n    var group = this.group || { name: '', description: '' }\n\n    return html`\n      <form>\n        <fieldset>\n          <legend>group information</legend>\n\n          <md-filled-text-field\n            type=\"text\"\n            label=${String(i18next.t('label.name'))}\n            .value=${group.name}\n            @change=${e => (this.group.name = e.target.value)}\n          ></md-filled-text-field>\n\n          <md-filled-text-field\n            type=\"text\"\n            label=${String(i18next.t('label.description'))}\n            .value=${group.description}\n            @change=${e => (this.group.description = e.target.value)}\n          ></md-filled-text-field>\n\n          <label>${i18next.t('label.creator')}</label>\n          <span>\n            <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(\n              group.createdAt\n            ).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.updater')}</label>\n          <span>\n            <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(\n              group.updatedAt\n            ).toLocaleString()}\n          </span>\n\n          <div buttons>\n            ${this.groupId\n              ? html`\n                  <md-elevated-button danger @click=${this.deleteGroup.bind(this)}\n                    ><md-icon slot=\"icon\">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button\n                  >\n                  <md-elevated-button @click=${this.updateGroup.bind(this)}\n                    ><md-icon slot=\"icon\">save</md-icon>${i18next.t('button.save')}</md-elevated-button\n                  >\n                `\n              : html`\n                  <md-elevated-button @click=${this.createGroup.bind(this)}\n                    ><md-icon slot=\"icon\">create_new_folder</md-icon>${i18next.t('button.create')}</md-elevated-button\n                  >\n                `}\n          </div>\n        </fieldset>\n      </form>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('groupId')) {\n      this.refresh()\n    }\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('[type=text]') as any).focus()\n    }, 100)\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.group = { name: '', description: '' }\n    } else {\n      var response = await fetchGroup(this.groupId)\n      this.group = response.group\n    }\n  }\n\n  async createGroup() {\n    this.dispatchEvent(\n      new CustomEvent('create-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(\n      new CustomEvent('update-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteGroup() {\n    this.dispatchEvent(\n      new CustomEvent('delete-group', {\n        detail: this.group,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/group-info-import.js

@@ -5,60 +5,10 @@ import '@operato/input/ox-input-file.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
-import { fetchGroup } from '../graphql';
+import { fetchGroup } from '../graphql/index.js';
 let GroupInfoImport = class GroupInfoImport extends LitElement {
-    render() {
-        var group = this.group || { name: '', description: '' };
-        return html `
-      ${this.groupId
-            ? html `
-            <div import>
-              <ox-input-file accept="*/*" multiple="true"></ox-input-file>
-
-              <div buttons>
-                <label> <input type="checkbox" name="overwrite" checked />&nbsp;overwrite </label>
-                <md-elevated-button @click=${this.importBoard.bind(this)}
-                  ><md-icon slot="icon">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button
-                >
-              </div>
-            </div>
-          `
-            : html ``}
-    `;
-    }
-    updated(changes) {
-        if (changes.has('groupId')) {
-            this.refresh();
-        }
-    }
-    async refresh() {
-        if (!this.groupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
-            this.group = { name: '', description: '' };
-        }
-        else {
-            var response = await fetchGroup(this.groupId);
-            this.group = response.group;
-        }
-    }
-    async importBoard() {
-        this.dispatchEvent(new CustomEvent('import-boards', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                group: this.group,
-                files: this.fileUploader.files,
-                overwrite: this.overwrite.checked
-            }
-        }));
-        this.close();
-    }
-    close() {
-        history.back();
-    }
-};
-GroupInfoImport.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: block;
         color: var(--md-sys-color-on-surface);
@@ -110,7 +60,57 @@ GroupInfoImport.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var group = this.group || { name: '', description: '' };
+        return html `
+      ${this.groupId
+            ? html `
+            <div import>
+              <ox-input-file accept="*/*" multiple="true"></ox-input-file>
+
+              <div buttons>
+                <label> <input type="checkbox" name="overwrite" checked />&nbsp;overwrite </label>
+                <md-elevated-button @click=${this.importBoard.bind(this)}
+                  ><md-icon slot="icon">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button
+                >
+              </div>
+            </div>
+          `
+            : html ``}
+    `;
+    }
+    updated(changes) {
+        if (changes.has('groupId')) {
+            this.refresh();
+        }
+    }
+    async refresh() {
+        if (!this.groupId) {
+            /* model이 없으므로, 기본 모델을 제공함. */
+            this.group = { name: '', description: '' };
+        }
+        else {
+            var response = await fetchGroup(this.groupId);
+            this.group = response.group;
+        }
+    }
+    async importBoard() {
+        this.dispatchEvent(new CustomEvent('import-boards', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                group: this.group,
+                files: this.fileUploader.files,
+                overwrite: this.overwrite.checked
+            }
+        }));
+        this.close();
+    }
+    close() {
+        history.back();
+    }
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/viewparts/group-info-import.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-info-import.js","sourceRoot":"","sources":["../../client/viewparts/group-info-import.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAGhC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA+D7C,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;6CAM+B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;2DACb,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;WAIhF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,8BAA8B;YAC9B,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAC5C,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC7C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO;aAClC;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AArHM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmDF;CACF,AArDY,CAqDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAiB;AAEnC;IAAR,KAAK,EAAE;;8CAAW;AAEK;IAAvB,KAAK,CAAC,eAAe,CAAC;;qDAAkB;AACV;IAA9B,KAAK,CAAC,sBAAsB,CAAC;;kDAAe;AA7DlC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAuH3B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { fetchGroup } from '../graphql'\n\n@customElement('group-info-import')\nexport class GroupInfoImport extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n        height: 100%;\n        min-width: 360px;\n        overflow: auto;\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--spacing-medium);\n        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--spacing-medium) 0;\n        text-align: right;\n\n        display: flex;\n        gap: var(--spacing-small);\n        align-items: center;\n      }\n\n      [buttons] md-elevated-button {\n        margin-left: auto;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n      }\n\n      div[import] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        padding: var(--spacing-large);\n        align-items: stretch;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any\n\n  @query('ox-input-file') fileUploader: any\n  @query('input[type=checkbox]') overwrite: any\n\n  render() {\n    var group = this.group || { name: '', description: '' }\n\n    return html`\n      ${this.groupId\n        ? html`\n            <div import>\n              <ox-input-file accept=\"*/*\" multiple=\"true\"></ox-input-file>\n\n              <div buttons>\n                <label> <input type=\"checkbox\" name=\"overwrite\" checked />&nbsp;overwrite </label>\n                <md-elevated-button @click=${this.importBoard.bind(this)}\n                  ><md-icon slot=\"icon\">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button\n                >\n              </div>\n            </div>\n          `\n        : html``}\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('groupId')) {\n      this.refresh()\n    }\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.group = { name: '', description: '' }\n    } else {\n      var response = await fetchGroup(this.groupId)\n      this.group = response.group\n    }\n  }\n\n  async importBoard() {\n    this.dispatchEvent(\n      new CustomEvent('import-boards', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          group: this.group,\n          files: this.fileUploader.files,\n          overwrite: this.overwrite.checked\n        }\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"group-info-import.js","sourceRoot":"","sources":["../../client/viewparts/group-info-import.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;aACtC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmDF;KACF,AArDY,CAqDZ;IASD,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;6CAM+B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;2DACb,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;WAIhF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,8BAA8B;YAC9B,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAC5C,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC7C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO;aAClC;SACF,CAAC,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AA9D2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAiB;AAEnC;IAAR,KAAK,EAAE;;8CAAW;AAEK;IAAvB,KAAK,CAAC,eAAe,CAAC;;qDAAkB;AACV;IAA9B,KAAK,CAAC,sBAAsB,CAAC;;kDAAe;AA7DlC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAuH3B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { fetchGroup } from '../graphql/index.js'\n\n@customElement('group-info-import')\nexport class GroupInfoImport extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface);\n        height: 100%;\n        min-width: 360px;\n        overflow: auto;\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--spacing-medium);\n        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--spacing-medium) 0;\n        text-align: right;\n\n        display: flex;\n        gap: var(--spacing-small);\n        align-items: center;\n      }\n\n      [buttons] md-elevated-button {\n        margin-left: auto;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n      }\n\n      div[import] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        padding: var(--spacing-large);\n        align-items: stretch;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any\n\n  @query('ox-input-file') fileUploader: any\n  @query('input[type=checkbox]') overwrite: any\n\n  render() {\n    var group = this.group || { name: '', description: '' }\n\n    return html`\n      ${this.groupId\n        ? html`\n            <div import>\n              <ox-input-file accept=\"*/*\" multiple=\"true\"></ox-input-file>\n\n              <div buttons>\n                <label> <input type=\"checkbox\" name=\"overwrite\" checked />&nbsp;overwrite </label>\n                <md-elevated-button @click=${this.importBoard.bind(this)}\n                  ><md-icon slot=\"icon\">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button\n                >\n              </div>\n            </div>\n          `\n        : html``}\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('groupId')) {\n      this.refresh()\n    }\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.group = { name: '', description: '' }\n    } else {\n      var response = await fetchGroup(this.groupId)\n      this.group = response.group\n    }\n  }\n\n  async importBoard() {\n    this.dispatchEvent(\n      new CustomEvent('import-boards', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          group: this.group,\n          files: this.fileUploader.files,\n          overwrite: this.overwrite.checked\n        }\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import './group-info-basic';
-import './group-info-import';
+import './group-info-basic.js';
+import './group-info-import.js';
 export declare class GroupInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     groupId?: string;