@things-factory/board-ui 10.1.40 → 10.1.42

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

@@ -1,195 +1,72 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/button/elevated-button.js';
-import '@operato/input/ox-input-file.js';
-import { css, html, LitElement } from 'lit';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
+import { CommonPopupStyles } from '@operato/styles';
 import { fetchGroup } from '../graphql/group.js';
+import { InfoFormStyles } from './info-dialog-styles.js';
+/**
+ * The group form: a name, a description, and one commit button. Who made it and when is a
+ * side note that only exists for a group that exists - a new group used to show two rows of
+ * "Invalid Date" here.
+ */
 let GroupInfo = class GroupInfo extends LitElement {
     constructor() {
         super(...arguments);
         this.group = { name: '', description: '' };
     }
-    static { this.styles = [
-        css `
-      :host {
-        display: block;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface);
-        height: 100%;
-        min-width: 360px;
-        overflow: auto;
-        position: relative;
-
-        --form-grid-gap: 2px 0;
-
-        --input-field-padding: var(--spacing-medium);
-        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
-      }
-
-      form {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-gap: var(--form-grid-gap);
-        grid-auto-rows: minmax(24px, auto);
-        padding: var(--spacing-large);
-        align-items: center;
-      }
-
-      md-filled-text-field {
-        grid-column: span 12;
-        padding: 10px 0;
-      }
-
-      [buttons] {
-        grid-column: span 12;
-        padding: var(--spacing-medium) 0;
-        text-align: right;
-
-        display: flex;
-        gap: var(--spacing-small);
-        align-items: center;
-      }
-
-      [buttons] * {
-        margin: 0 0 0 auto;
-      }
-
-      [danger] {
-        float: left;
-        margin: 0;
-        --md-elevated-button-icon-color: var(--md-sys-color-on-error);
-        --md-elevated-button-label-text-color: var(--md-sys-color-on-error);
-        --md-elevated-button-container-color: var(--md-sys-color-error);
-      }
-
-      fieldset {
-        display: contents;
-      }
-
-      legend {
-        grid-column: span 12;
-        padding: var(--legend-padding);
-        font: var(--legend-font);
-        color: var(--md-sys-color-primary);
-        text-transform: capitalize;
-      }
-
-      label {
-        grid-column: span 12;
-        text-transform: capitalize;
-        color: var(--md-sys-color-primary);
-        font: var(--label-font);
-      }
-
-      span {
-        grid-column: span 12;
-        border-bottom: var(--border-dim-color);
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-small);
-        font: var(--input-field-font);
-      }
-      span md-icon {
-        font-variation-settings: 'FILL' 1;
-
-        vertical-align: middle;
-        font-size: var(--fontsize-large);
-        color: var(--md-sys-color-primary);
-      }
-
-      input,
-      table,
-      select,
-      textarea,
-      [custom-input] {
-        grid-column: span 12;
-
-        border: var(--input-field-border);
-        border-radius: var(--input-field-border-radius);
-        margin-bottom: var(--spacing-medium);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
-      }
-
-      input[type='checkbox'],
-      input[type='radio'] {
-        place-self: center;
-        margin: 0;
-        grid-column: 1;
-      }
-
-      input[type='checkbox'] + label,
-      input[type='radio'] + label {
-        text-align: left;
-        grid-column: span 11 / auto;
-
-        font: var(--form-sublabel-font);
-        color: var(--md-sys-color-secondary);
-      }
-
-      input:focus {
-        outline: none;
-        border: 1px solid var(--focus-background-color);
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-    ]; }
+    static { this.styles = [CommonPopupStyles, InfoFormStyles]; }
     render() {
         const 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
+      <div class="fields">
+        <label>
+          ${i18next.t('label.name')}
+          <input type="text" .value=${group.name || ''} @change=${e => (this.group.name = e.target.value)} autofocus />
+        </label>
+
+        <label>
+          ${i18next.t('label.description')}
+          <input
             type="text"
-            label=${String(i18next.t('label.description'))}
-            .value=${group.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>
+      </div>
 
-          <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>
+      ${this.groupId ? this.renderProvenance(group) : ''}
 
-          <div buttons>
-            ${this.groupId
+      <div class="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
-                  >
-                `
+              <md-text-button cap danger @click=${this.deleteGroup.bind(this)}>
+                <md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}
+              </md-text-button>
+              <div filler></div>
+              <md-filled-button cap @click=${this.updateGroup.bind(this)}>
+                <md-icon slot="icon">save</md-icon>${i18next.t('button.save')}
+              </md-filled-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>
+              <div filler></div>
+              <md-filled-button cap @click=${this.createGroup.bind(this)}>
+                <md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}
+              </md-filled-button>
+            `}
+      </div>
+    `;
+    }
+    renderProvenance(group) {
+        const when = (value) => (value ? new Date(value).toLocaleString() : '');
+        return html `
+      <div class="provenance">
+        <span>${i18next.t('label.creator')} <b>${group.creator?.name || '-'}</b> ${when(group.createdAt)}</span>
+        <span>${i18next.t('label.updater')} <b>${group.updater?.name || '-'}</b> ${when(group.updatedAt)}</span>
+      </div>
     `;
     }
     updated(changes) {
@@ -200,12 +77,11 @@ let GroupInfo = class GroupInfo extends LitElement {
     firstUpdated() {
         setTimeout(() => {
             ;
-            this.renderRoot.querySelector('[type=text]').focus();
+            this.renderRoot.querySelector('input')?.focus();
         }, 100);
     }
     async refresh() {
         if (!this.groupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
             this.group = { name: '', description: '' };
         }
         else {
@@ -214,27 +90,15 @@ let GroupInfo = class GroupInfo extends LitElement {
         }
     }
     async createGroup() {
-        this.dispatchEvent(new CustomEvent('create-group', {
-            detail: this.group,
-            bubbles: true,
-            composed: true
-        }));
+        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.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.dispatchEvent(new CustomEvent('delete-group', { detail: this.group, bubbles: true, composed: true }));
         this.close();
     }
     close() {

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    const 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      const 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/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { CommonPopupStyles } from '@operato/styles'\n\nimport { fetchGroup } from '../graphql/group.js'\nimport { InfoFormStyles } from './info-dialog-styles.js'\n\n/**\n * The group form: a name, a description, and one commit button. Who made it and when is a\n * side note that only exists for a group that exists - a new group used to show two rows of\n * \"Invalid Date\" here.\n */\n@customElement('group-info-basic')\nexport class GroupInfo extends LitElement {\n  static styles = [CommonPopupStyles, InfoFormStyles]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any = { name: '', description: '' }\n\n  render() {\n    const group = this.group || { name: '', description: '' }\n\n    return html`\n      <div class=\"fields\">\n        <label>\n          ${i18next.t('label.name')}\n          <input type=\"text\" .value=${group.name || ''} @change=${e => (this.group.name = e.target.value)} autofocus />\n        </label>\n\n        <label>\n          ${i18next.t('label.description')}\n          <input\n            type=\"text\"\n            .value=${group.description || ''}\n            @change=${e => (this.group.description = e.target.value)}\n          />\n        </label>\n      </div>\n\n      ${this.groupId ? this.renderProvenance(group) : ''}\n\n      <div class=\"buttons\">\n        ${this.groupId\n          ? html`\n              <md-text-button cap danger @click=${this.deleteGroup.bind(this)}>\n                <md-icon slot=\"icon\">delete_outline</md-icon>${i18next.t('button.delete')}\n              </md-text-button>\n              <div filler></div>\n              <md-filled-button cap @click=${this.updateGroup.bind(this)}>\n                <md-icon slot=\"icon\">save</md-icon>${i18next.t('button.save')}\n              </md-filled-button>\n            `\n          : html`\n              <div filler></div>\n              <md-filled-button cap @click=${this.createGroup.bind(this)}>\n                <md-icon slot=\"icon\">create_new_folder</md-icon>${i18next.t('button.create')}\n              </md-filled-button>\n            `}\n      </div>\n    `\n  }\n\n  private renderProvenance(group: any) {\n    const when = (value?: string) => (value ? new Date(value).toLocaleString() : '')\n\n    return html`\n      <div class=\"provenance\">\n        <span>${i18next.t('label.creator')} <b>${group.creator?.name || '-'}</b> ${when(group.createdAt)}</span>\n        <span>${i18next.t('label.updater')} <b>${group.updater?.name || '-'}</b> ${when(group.updatedAt)}</span>\n      </div>\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('input') as any)?.focus()\n    }, 100)\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      this.group = { name: '', description: '' }\n    } else {\n      const response = await fetchGroup(this.groupId)\n      this.group = response.group\n    }\n  }\n\n  async createGroup() {\n    this.dispatchEvent(new CustomEvent('create-group', { detail: this.group, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(new CustomEvent('update-group', { detail: this.group, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  async deleteGroup() {\n    this.dispatchEvent(new CustomEvent('delete-group', { detail: this.group, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

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

@@ -1,7 +1,9 @@
 import '@material/web/icon/icon.js';
-import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/checkbox/checkbox.js';
 import '@operato/input/ox-input-file.js';
 import { LitElement } from 'lit';
+/** Import exported boards into this group: a drop zone, an overwrite switch, one button. */
 export declare class GroupInfoImport extends LitElement {
     static styles: import("lit").CSSResult[];
     groupId?: string;

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

@@ -1,83 +1,51 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/checkbox/checkbox.js';
 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 { CommonPopupStyles } from '@operato/styles';
 import { fetchGroup } from '../graphql/index.js';
+import { InfoFormStyles } from './info-dialog-styles.js';
+/** Import exported boards into this group: a drop zone, an overwrite switch, one button. */
 let GroupInfoImport = class GroupInfoImport extends LitElement {
     static { this.styles = [
+        CommonPopupStyles,
+        InfoFormStyles,
         css `
-      :host {
-        display: block;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface);
-        height: 100%;
-        min-width: 360px;
-        overflow: auto;
-        position: relative;
-
-        --form-grid-gap: 2px 0;
-        --input-field-padding: var(--spacing-medium);
-        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
+      ox-input-file {
+        min-height: 120px;
       }
 
-      [buttons] {
-        grid-column: span 12;
-        padding: var(--spacing-medium) 0;
-        text-align: right;
-
+      label[overwrite] {
         display: flex;
-        gap: var(--spacing-small);
         align-items: center;
-      }
-
-      [buttons] md-elevated-button {
-        margin-left: auto;
-      }
-
-      input[type='checkbox'] + label,
-      input[type='radio'] + label {
-        text-align: left;
-        grid-column: span 11 / auto;
-
-        font: var(--form-sublabel-font);
-        color: var(--form-sublabel-color, var(--md-sys-color-secondary));
-      }
-
-      div[import] {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        padding: var(--spacing-large);
-        align-items: stretch;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
+        gap: var(--spacing-small, 4px);
+        font-size: var(--popup-font-size-small);
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
       }
     `
     ]; }
     render() {
-        const group = this.group || { name: '', description: '' };
+        if (!this.groupId) {
+            return html ``;
+        }
         return html `
-      ${this.groupId
-            ? html `
-            <div import>
-              <ox-input-file accept="*/*" multiple="true"></ox-input-file>
+      <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 ``}
+      <div class="buttons">
+        <label overwrite>
+          <md-checkbox touch-target="wrapper" checked></md-checkbox>
+          ${i18next.t('label.overwrite', { defaultValue: 'overwrite' })}
+        </label>
+        <div filler></div>
+        <md-filled-button cap @click=${this.importBoard.bind(this)}>
+          <md-icon slot="icon">publish</md-icon>${i18next.t('button.import-board')}
+        </md-filled-button>
+      </div>
     `;
     }
     updated(changes) {
@@ -87,7 +55,6 @@ let GroupInfoImport = class GroupInfoImport extends LitElement {
     }
     async refresh() {
         if (!this.groupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
             this.group = { name: '', description: '' };
         }
         else {
@@ -124,7 +91,7 @@ __decorate([
     __metadata("design:type", Object)
 ], GroupInfoImport.prototype, "fileUploader", void 0);
 __decorate([
-    query('input[type=checkbox]'),
+    query('md-checkbox'),
     __metadata("design:type", Object)
 ], GroupInfoImport.prototype, "overwrite", void 0);
 GroupInfoImport = __decorate([

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,qBAAqB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;aACtC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmDF;KACF,AArDY,CAqDZ;IASD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEzD,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,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC/C,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    const 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      const 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,uCAAuC,CAAA;AAC9C,OAAO,oCAAoC,CAAA;AAC3C,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;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,4FAA4F;AAErF,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;aACtC,WAAM,GAAG;QACd,iBAAiB;QACjB,cAAc;QACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF,AAjBY,CAiBZ;IASD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;;;;;YAMH,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;;;uCAGhC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;kDAChB,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;KAG7E,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,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAC5C,CAAC;aAAM,CAAC;YACN,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC/C,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;;AA7D2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAiB;AAEnC;IAAR,KAAK,EAAE;;8CAAW;AAEK;IAAvB,KAAK,CAAC,eAAe,CAAC;;qDAAkB;AACnB;IAArB,KAAK,CAAC,aAAa,CAAC;;kDAAe;AAzBzB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkF3B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/checkbox/checkbox.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'\nimport { CommonPopupStyles } from '@operato/styles'\n\nimport { fetchGroup } from '../graphql/index.js'\nimport { InfoFormStyles } from './info-dialog-styles.js'\n\n/** Import exported boards into this group: a drop zone, an overwrite switch, one button. */\n@customElement('group-info-import')\nexport class GroupInfoImport extends LitElement {\n  static styles = [\n    CommonPopupStyles,\n    InfoFormStyles,\n    css`\n      ox-input-file {\n        min-height: 120px;\n      }\n\n      label[overwrite] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        font-size: var(--popup-font-size-small);\n        color: var(--md-sys-color-on-surface-variant);\n        cursor: pointer;\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('md-checkbox') overwrite: any\n\n  render() {\n    if (!this.groupId) {\n      return html``\n    }\n\n    return html`\n      <ox-input-file accept=\"*/*\" multiple=\"true\"></ox-input-file>\n\n      <div class=\"buttons\">\n        <label overwrite>\n          <md-checkbox touch-target=\"wrapper\" checked></md-checkbox>\n          ${i18next.t('label.overwrite', { defaultValue: 'overwrite' })}\n        </label>\n        <div filler></div>\n        <md-filled-button cap @click=${this.importBoard.bind(this)}>\n          <md-icon slot=\"icon\">publish</md-icon>${i18next.t('button.import-board')}\n        </md-filled-button>\n      </div>\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      this.group = { name: '', description: '' }\n    } else {\n      const 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,10 @@
 import { LitElement } from 'lit';
 import './group-info-basic.js';
 import './group-info-import.js';
+/**
+ * The group dialog. A new group is one short form and shows no tabs at all; an existing group
+ * adds the import tab, which only makes sense once there is a group to import into.
+ */
 export declare class GroupInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     groupId?: string;

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

@@ -1,73 +1,39 @@
 import { __decorate, __metadata } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { i18next } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { privileged } from '@things-factory/auth-base/dist-client';
 import './group-info-basic.js';
 import './group-info-import.js';
+import { InfoDialogStyles } from './info-dialog-styles.js';
+/**
+ * The group dialog. A new group is one short form and shows no tabs at all; an existing group
+ * adds the import tab, which only makes sense once there is a group to import into.
+ */
 let GroupInfo = class GroupInfo extends LitElement {
     constructor() {
         super(...arguments);
         this.tab = 'basic';
     }
-    static { this.styles = [
-        ScrollbarStyles,
-        css `
-      :host {
-        height: 100%;
-        min-width: 360px;
-
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      [tab] {
-        width: 100%;
-        display: flex;
-      }
-
-      [tab] > * {
-        flex: 1;
-      }
-
-      [content] {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      span {
-        padding: 5px 4px 1px;
-        font: var(--group-bar-textbutton);
-        background-color: var(--md-sys-color-secondary);
-        color: rgba(255, 255, 255, 0.8);
-        text-align: center;
-        text-transform: uppercase;
-      }
-
-      span[active] {
-        background-color: var(--md-sys-color-primary);
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-    ]; }
+    static { this.styles = [ScrollbarStyles, InfoDialogStyles]; }
     render() {
         return html `
-      ${privileged({ privilege: 'mutation', category: 'board' }, html `
-          <div tab>
-            <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
-            <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>import</span>
-          </div>
-        `)}
+      ${this.groupId
+            ? privileged({ privilege: 'mutation', category: 'board' }, html `
+              <div tab>
+                <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>
+                  ${i18next.t('label.basic', { defaultValue: 'Basic' })}
+                </span>
+                <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>
+                  ${i18next.t('label.import', { defaultValue: 'Import' })}
+                </span>
+              </div>
+            `)
+            : ''}
       <div content>
-        ${this.tab == 'basic'
+        ${this.tab == 'basic' || !this.groupId
             ? html `<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`
             : html `<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"group-info.js","sourceRoot":"","sources":["../../client/viewparts/group-info.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAElE,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAGxB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmDI,QAAG,GAAW,OAAO,CAAA;IAwBhC,CAAC;aA1EQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;KACF,AA9CY,CA8CZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,UAAU,CACV,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;2BAEe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;2BACzD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,QAAQ;;SAE7E,CACF;;UAEG,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB;YAChF,CAAC,CAAC,IAAI,CAAA,8BAA8B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,uBAAuB;;KAEvF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAzB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAiB;AAEnC;IAAR,KAAK,EAAE;;sCAAsB;AAnDnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2ErB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\nimport './group-info-basic.js'\nimport './group-info-import.js'\n\n@customElement('group-info')\nexport class GroupInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        height: 100%;\n        min-width: 360px;\n\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      [tab] {\n        width: 100%;\n        display: flex;\n      }\n\n      [tab] > * {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        padding: 5px 4px 1px;\n        font: var(--group-bar-textbutton);\n        background-color: var(--md-sys-color-secondary);\n        color: rgba(255, 255, 255, 0.8);\n        text-align: center;\n        text-transform: uppercase;\n      }\n\n      span[active] {\n        background-color: var(--md-sys-color-primary);\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() tab: string = 'basic'\n\n  render() {\n    return html`\n      ${privileged(\n        { privilege: 'mutation', category: 'board' },\n        html`\n          <div tab>\n            <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>\n            <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>import</span>\n          </div>\n        `\n      )}\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`\n          : html`<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"group-info.js","sourceRoot":"","sources":["../../client/viewparts/group-info.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAElE,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D;;;GAGG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAKI,QAAG,GAAW,OAAO,CAAA;IA8BhC,CAAC;aAlCQ,WAAM,GAAG,CAAC,eAAe,EAAE,gBAAgB,CAAC,AAAtC,CAAsC;IAMnD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,UAAU,CACR,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5C,IAAI,CAAA;;+BAEe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;oBACpE,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;+BAExC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,QAAQ;oBACtE,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;;;aAG5D,CACF;YACH,CAAC,CAAC,EAAE;;UAEF,IAAI,CAAC,GAAG,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO;YACpC,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB;YAChF,CAAC,CAAC,IAAI,CAAA,8BAA8B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,uBAAuB;;KAEvF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AA/B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAiB;AAEnC;IAAR,KAAK,EAAE;;sCAAsB;AALnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmCrB","sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\nimport './group-info-basic.js'\nimport './group-info-import.js'\nimport { InfoDialogStyles } from './info-dialog-styles.js'\n\n/**\n * The group dialog. A new group is one short form and shows no tabs at all; an existing group\n * adds the import tab, which only makes sense once there is a group to import into.\n */\n@customElement('group-info')\nexport class GroupInfo extends LitElement {\n  static styles = [ScrollbarStyles, InfoDialogStyles]\n\n  @property({ type: String }) groupId?: string\n\n  @state() tab: string = 'basic'\n\n  render() {\n    return html`\n      ${this.groupId\n        ? privileged(\n            { privilege: 'mutation', category: 'board' },\n            html`\n              <div tab>\n                <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>\n                  ${i18next.t('label.basic', { defaultValue: 'Basic' })}\n                </span>\n                <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>\n                  ${i18next.t('label.import', { defaultValue: 'Import' })}\n                </span>\n              </div>\n            `\n          )\n        : ''}\n      <div content>\n        ${this.tab == 'basic' || !this.groupId\n          ? html`<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`\n          : html`<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}