@things-factory/board-ui 10.1.41 → 10.1.44

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

@@ -1,194 +1,68 @@
 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 { 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 { fetchPlayGroup } from '../graphql/index.js';
+import { InfoFormStyles } from './info-dialog-styles.js';
+/** The play-group form - the same shape as group-info-basic.ts, on purpose. */
 let PlayGroupInfoBasic = class PlayGroupInfoBasic extends LitElement {
     constructor() {
         super(...arguments);
         this.playGroup = { 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 playGroup = this.playGroup || { name: '', description: '' };
         return html `
-      <form>
-        <fieldset>
-          <legend>playgroup information</legend>
-          <md-filled-text-field
+      <div class="fields">
+        <label>
+          ${i18next.t('label.name')}
+          <input type="text" .value=${playGroup.name || ''} @change=${e => (this.playGroup.name = e.target.value)} autofocus />
+        </label>
+
+        <label>
+          ${i18next.t('label.description')}
+          <input
             type="text"
-            label=${String(i18next.t('label.name'))}
-            .value=${playGroup.name || ''}
-            @change=${e => (this.playGroup.name = e.target.value)}
-          ></md-filled-text-field>
-
-          <md-filled-text-field
-            type="text"
-            label=${String(i18next.t('label.description'))}
             .value=${playGroup.description || ''}
             @change=${e => (this.playGroup.description = e.target.value)}
-          ></md-filled-text-field>
-
-          <label>${i18next.t('label.creator')}</label>
-          <span>
-            <md-icon>person</md-icon> ${playGroup.creator && playGroup.creator.name}
-            <md-icon>schedule</md-icon> ${new Date(playGroup.createdAt).toLocaleString()}
-          </span>
+          />
+        </label>
+      </div>
 
-          <label>${i18next.t('label.updater')}</label>
-          <span>
-            <md-icon>person</md-icon> ${playGroup.updater && playGroup.updater.name}
-            <md-icon>schedule</md-icon> ${new Date(playGroup.updatedAt).toLocaleString()}
-          </span>
+      ${this.playGroupId ? this.renderProvenance(playGroup) : ''}
 
-          <div buttons>
-            ${this.playGroupId
+      <div class="buttons">
+        ${this.playGroupId
             ? html `
-                  <md-elevated-button danger @click=${this.deletePlayGroup.bind(this)}
-                    ><md-icon slot="icon">delete_outline</md-icon>${String(i18next.t('button.delete'))}</md-elevated-button
-                  >
-                  <md-elevated-button @click=${this.updateGroup.bind(this)}
-                    ><md-icon slot="icon">save</md-icon>${String(i18next.t('button.save'))}</md-elevated-button
-                  >
-                `
+              <md-text-button cap danger @click=${this.deletePlayGroup.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.createPlayGroup.bind(this)}
-                    ><md-icon slot="icon">create_new_folder</md-icon>${String(i18next.t('button.create'))}</md-elevated-button
-                  >
-                `}
-          </div>
-        </fieldset>
-      </form>
+              <div filler></div>
+              <md-filled-button cap @click=${this.createPlayGroup.bind(this)}>
+                <md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}
+              </md-filled-button>
+            `}
+      </div>
+    `;
+    }
+    renderProvenance(playGroup) {
+        const when = (value) => (value ? new Date(value).toLocaleString() : '');
+        return html `
+      <div class="provenance">
+        <span>${i18next.t('label.creator')} <b>${playGroup.creator?.name || '-'}</b> ${when(playGroup.createdAt)}</span>
+        <span>${i18next.t('label.updater')} <b>${playGroup.updater?.name || '-'}</b> ${when(playGroup.updatedAt)}</span>
+      </div>
     `;
     }
     updated(changes) {
@@ -199,12 +73,11 @@ let PlayGroupInfoBasic = class PlayGroupInfoBasic extends LitElement {
     firstUpdated() {
         setTimeout(() => {
             ;
-            this.renderRoot.querySelector('[type=text]').focus();
+            this.renderRoot.querySelector('input')?.focus();
         }, 100);
     }
     async refresh() {
         if (!this.playGroupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
             this.playGroup = { name: '', description: '' };
         }
         else {
@@ -213,27 +86,15 @@ let PlayGroupInfoBasic = class PlayGroupInfoBasic extends LitElement {
         }
     }
     async createPlayGroup() {
-        this.dispatchEvent(new CustomEvent('create-play-group', {
-            detail: this.playGroup,
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('create-play-group', { detail: this.playGroup, bubbles: true, composed: true }));
         this.close();
     }
     async updateGroup() {
-        this.dispatchEvent(new CustomEvent('update-play-group', {
-            detail: this.playGroup,
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('update-play-group', { detail: this.playGroup, bubbles: true, composed: true }));
         this.close();
     }
     async deletePlayGroup() {
-        this.dispatchEvent(new CustomEvent('delete-play-group', {
-            detail: this.playGroup,
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('delete-play-group', { detail: this.playGroup, bubbles: true, composed: true }));
         this.close();
     }
     close() {

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

@@ -1 +1 @@
-{"version":3,"file":"play-group-info-basic.js","sourceRoot":"","sources":["../../client/viewparts/play-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'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { fetchPlayGroup } from '../graphql/index.js'\n\n@customElement('play-group-info-basic')\nexport class PlayGroupInfoBasic 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      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 }) playGroupId?: string\n\n  @state() playGroup: any = { name: '', description: '' }\n\n  private link?: string\n\n  render() {\n    const playGroup = this.playGroup || { name: '', description: '' }\n\n    return html`\n      <form>\n        <fieldset>\n          <legend>playgroup information</legend>\n          <md-filled-text-field\n            type=\"text\"\n            label=${String(i18next.t('label.name'))}\n            .value=${playGroup.name || ''}\n            @change=${e => (this.playGroup.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=${playGroup.description || ''}\n            @change=${e => (this.playGroup.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> ${playGroup.creator && playGroup.creator.name}\n            <md-icon>schedule</md-icon> ${new Date(playGroup.createdAt).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.updater')}</label>\n          <span>\n            <md-icon>person</md-icon> ${playGroup.updater && playGroup.updater.name}\n            <md-icon>schedule</md-icon> ${new Date(playGroup.updatedAt).toLocaleString()}\n          </span>\n\n          <div buttons>\n            ${this.playGroupId\n              ? html`\n                  <md-elevated-button danger @click=${this.deletePlayGroup.bind(this)}\n                    ><md-icon slot=\"icon\">delete_outline</md-icon>${String(\n                      i18next.t('button.delete')\n                    )}</md-elevated-button\n                  >\n                  <md-elevated-button @click=${this.updateGroup.bind(this)}\n                    ><md-icon slot=\"icon\">save</md-icon>${String(i18next.t('button.save'))}</md-elevated-button\n                  >\n                `\n              : html`\n                  <md-elevated-button @click=${this.createPlayGroup.bind(this)}\n                    ><md-icon slot=\"icon\">create_new_folder</md-icon>${String(\n                      i18next.t('button.create')\n                    )}</md-elevated-button\n                  >\n                `}\n          </div>\n        </fieldset>\n      </form>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('playGroupId')) {\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.playGroupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.playGroup = { name: '', description: '' }\n    } else {\n      const response = await fetchPlayGroup(this.playGroupId)\n      this.playGroup = response.playGroup\n    }\n  }\n\n  async createPlayGroup() {\n    this.dispatchEvent(\n      new CustomEvent('create-play-group', {\n        detail: this.playGroup,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(\n      new CustomEvent('update-play-group', {\n        detail: this.playGroup,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async deletePlayGroup() {\n    this.dispatchEvent(\n      new CustomEvent('delete-play-group', {\n        detail: this.playGroup,\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":"play-group-info-basic.js","sourceRoot":"","sources":["../../client/viewparts/play-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 { fetchPlayGroup } from '../graphql/index.js'\nimport { InfoFormStyles } from './info-dialog-styles.js'\n\n/** The play-group form - the same shape as group-info-basic.ts, on purpose. */\n@customElement('play-group-info-basic')\nexport class PlayGroupInfoBasic extends LitElement {\n  static styles = [CommonPopupStyles, InfoFormStyles]\n\n  @property({ type: String }) playGroupId?: string\n\n  @state() playGroup: any = { name: '', description: '' }\n\n  render() {\n    const playGroup = this.playGroup || { name: '', description: '' }\n\n    return html`\n      <div class=\"fields\">\n        <label>\n          ${i18next.t('label.name')}\n          <input type=\"text\" .value=${playGroup.name || ''} @change=${e => (this.playGroup.name = e.target.value)} autofocus />\n        </label>\n\n        <label>\n          ${i18next.t('label.description')}\n          <input\n            type=\"text\"\n            .value=${playGroup.description || ''}\n            @change=${e => (this.playGroup.description = e.target.value)}\n          />\n        </label>\n      </div>\n\n      ${this.playGroupId ? this.renderProvenance(playGroup) : ''}\n\n      <div class=\"buttons\">\n        ${this.playGroupId\n          ? html`\n              <md-text-button cap danger @click=${this.deletePlayGroup.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.createPlayGroup.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(playGroup: 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>${playGroup.creator?.name || '-'}</b> ${when(playGroup.createdAt)}</span>\n        <span>${i18next.t('label.updater')} <b>${playGroup.updater?.name || '-'}</b> ${when(playGroup.updatedAt)}</span>\n      </div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('playGroupId')) {\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.playGroupId) {\n      this.playGroup = { name: '', description: '' }\n    } else {\n      const response = await fetchPlayGroup(this.playGroupId)\n      this.playGroup = response.playGroup\n    }\n  }\n\n  async createPlayGroup() {\n    this.dispatchEvent(new CustomEvent('create-play-group', { detail: this.playGroup, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(new CustomEvent('update-play-group', { detail: this.playGroup, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  async deletePlayGroup() {\n    this.dispatchEvent(new CustomEvent('delete-play-group', { detail: this.playGroup, bubbles: true, composed: true }))\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

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

@@ -1,6 +1,10 @@
 import { LitElement } from 'lit';
 import './play-group-info-basic.js';
 import './play-group-info-link.js';
+/**
+ * The play-group dialog. A new play group is one short form with no tabs; an existing one adds
+ * the link tab (a headless player URL needs a group id to point at).
+ */
 export declare class PlayGroupInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     playGroup?: {

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

@@ -1,70 +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 './play-group-info-basic.js';
 import './play-group-info-link.js';
+import { InfoDialogStyles } from './info-dialog-styles.js';
+/**
+ * The play-group dialog. A new play group is one short form with no tabs; an existing one adds
+ * the link tab (a headless player URL needs a group id to point at).
+ */
 let PlayGroupInfo = class PlayGroupInfo 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() {
+        const existing = !!this.playGroup?.id;
         return html `
-      <div tab>
-        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
-        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
-      </div>
+      ${existing
+            ? html `
+            <div tab>
+              <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>
+                ${i18next.t('label.basic', { defaultValue: 'Basic' })}
+              </span>
+              <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>
+                ${i18next.t('label.link', { defaultValue: 'Link' })}
+              </span>
+            </div>
+          `
+            : ''}
       <div content>
-        ${this.tab == 'basic'
+        ${this.tab == 'basic' || !existing
             ? html `<play-group-info-basic playGroupId=${ifDefined(this.playGroup?.id)}></play-group-info-basic>`
             : html `<play-group-info-link .playGroup=${this.playGroup}></play-group-info-link>`}
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"play-group-info.js","sourceRoot":"","sources":["../../client/viewparts/play-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;AAEjD,OAAO,4BAA4B,CAAA;AACnC,OAAO,2BAA2B,CAAA;AAG3B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmDI,QAAG,GAAW,OAAO,CAAA;IAmBhC,CAAC;aArEQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;KACF,AA9CY,CA8CZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;uBACzD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,MAAM;;;UAGpE,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,sCAAsC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,2BAA2B;YACpG,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,SAAS,0BAA0B;;KAEvF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AApB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAyC;AAE3D;IAAR,KAAK,EAAE;;0CAAsB;AAnDnB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAsEzB","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'\n\nimport './play-group-info-basic.js'\nimport './play-group-info-link.js'\n\n@customElement('play-group-info')\nexport class PlayGroupInfo 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: Object }) playGroup?: { id: string; name: string }\n\n  @state() tab: string = 'basic'\n\n  render() {\n    return html`\n      <div tab>\n        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>\n        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<play-group-info-basic playGroupId=${ifDefined(this.playGroup?.id)}></play-group-info-basic>`\n          : html`<play-group-info-link .playGroup=${this.playGroup}></play-group-info-link>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"play-group-info.js","sourceRoot":"","sources":["../../client/viewparts/play-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;AAEjD,OAAO,4BAA4B,CAAA;AACnC,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D;;;GAGG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAKI,QAAG,GAAW,OAAO,CAAA;IA6BhC,CAAC;aAjCQ,WAAM,GAAG,CAAC,eAAe,EAAE,gBAAgB,CAAC,AAAtC,CAAsC;IAMnD,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA;QACP,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;;6BAEe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;kBACpE,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;6BAExC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,MAAM;kBAClE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;;;WAGxD;YACH,CAAC,CAAC,EAAE;;UAEF,IAAI,CAAC,GAAG,IAAI,OAAO,IAAI,CAAC,QAAQ;YAChC,CAAC,CAAC,IAAI,CAAA,sCAAsC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,2BAA2B;YACpG,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,SAAS,0BAA0B;;KAEvF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AA9B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAyC;AAE3D;IAAR,KAAK,EAAE;;0CAAsB;AALnB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAkCzB","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'\n\nimport './play-group-info-basic.js'\nimport './play-group-info-link.js'\nimport { InfoDialogStyles } from './info-dialog-styles.js'\n\n/**\n * The play-group dialog. A new play group is one short form with no tabs; an existing one adds\n * the link tab (a headless player URL needs a group id to point at).\n */\n@customElement('play-group-info')\nexport class PlayGroupInfo extends LitElement {\n  static styles = [ScrollbarStyles, InfoDialogStyles]\n\n  @property({ type: Object }) playGroup?: { id: string; name: string }\n\n  @state() tab: string = 'basic'\n\n  render() {\n    const existing = !!this.playGroup?.id\n\n    return html`\n      ${existing\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 = 'link')} ?active=${this.tab == 'link'}>\n                ${i18next.t('label.link', { defaultValue: 'Link' })}\n              </span>\n            </div>\n          `\n        : ''}\n      <div content>\n        ${this.tab == 'basic' || !existing\n          ? html`<play-group-info-basic playGroupId=${ifDefined(this.playGroup?.id)}></play-group-info-basic>`\n          : html`<play-group-info-link .playGroup=${this.playGroup}></play-group-info-link>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "10.1.41",
+  "version": "10.1.44",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -43,11 +43,11 @@
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/barcode-base": "^10.1.40",
-    "@things-factory/board-ai": "^10.1.41",
-    "@things-factory/fav-base": "^10.1.40",
-    "@things-factory/setting-base": "^10.1.40",
+    "@things-factory/barcode-base": "^10.1.44",
+    "@things-factory/board-ai": "^10.1.44",
+    "@things-factory/fav-base": "^10.1.44",
+    "@things-factory/setting-base": "^10.1.44",
     "@things-factory/utils": "^10.1.20"
   },
-  "gitHead": "4f41243edca4c965bc6992a10fb52d75a58fd3a9"
+  "gitHead": "7c95c4e75e155e51c714409e865d96f317232c23"
 }

package/translations/en.json

@@ -25,6 +25,7 @@
   "button.confirm": "confirm",
   "button.copy": "copy",
   "button.copy to draft": "copy to draft",
+  "button.copy-link": "Copy headless link",
   "button.create": "create",
   "button.create board": "create board",
   "button.decrease-font": "decrease font",
@@ -32,9 +33,11 @@
   "button.detail": "detail",
   "button.diff with draft": "diff with draft",
   "button.diff with previous": "diff with previous",
+  "button.duplicate": "Duplicate…",
   "button.edit": "edit",
   "button.edit-group": "Edit Group",
   "button.export": "export",
+  "button.export-json": "Export as JSON",
   "button.export-locale-file": "export locale files",
   "button.font-selector": "Font Selector",
   "button.fullscreen": "fullscreen",
@@ -52,6 +55,7 @@
   "button.new-group": "New Group",
   "button.open modeller": "open modeller",
   "button.open-import": "Import",
+  "button.open-modeller": "Open in modeller",
   "button.profile": "profile",
   "button.redo": "redo",
   "button.refresh": "refresh",
@@ -163,6 +167,7 @@
   "label.back-side-template": "back side template",
   "label.background-color": "background color",
   "label.base-url": "Base URL",
+  "label.basic": "basic",
   "label.begin-size": "begin size",
   "label.begin-type": "begin type",
   "label.bevel": "bevel",
@@ -352,6 +357,7 @@
   "label.line-type": "line type",
   "label.line-width": "Line Width",
   "label.lines": "Lines",
+  "label.link": "link",
   "label.locale": "Locale",
   "label.location": "location",
   "label.location-field": "Location Field",
@@ -386,6 +392,9 @@
   "label.mm": "mm",
   "label.modal": "modal",
   "label.mode": "mode",
+  "label.modeller toolbar contextual": "Floating, next to the selection",
+  "label.modeller toolbar docked": "Docked at the top of the canvas",
+  "label.modeller toolbar fixed": "Classic toolbar with every tool",
   "label.move_to_admin": "Move to Administrator Page",
   "label.multi-axis": "Multi Axis",
   "label.multiple": "multiple",
@@ -408,6 +417,7 @@
   "label.opacity": "opacity",
   "label.opinion": "opinion",
   "label.options": "options",
+  "label.overwrite": "overwrite",
   "label.padding": "padding",
   "label.page": "page",
   "label.parsing": "parsing",
@@ -608,6 +618,7 @@
   "label.variable-list": "variable list",
   "label.variables": "Variables",
   "label.version": "Version",
+  "label.versions": "versions",
   "label.vertical": "vertical",
   "label.view type": "drawing type",
   "label.viewer-option": "viewer option",
@@ -669,6 +680,7 @@
   "text.Sure to X": "Are you sure to {x}",
   "text.add_files": "text.Add Files",
   "text.ai_assistant": "ai assistant",
+  "text.appliance token needs security privilege": "Adding an access token needs domain-owner or security query permission.",
   "text.backfilling thumbnails": "generating thumbnails...",
   "text.board cloned": "board '{board}' is cloned successfully",
   "text.board created": "board '{board}' is created successfully",
@@ -677,6 +689,7 @@
   "text.board reverted": "board '{board}' is reverted to version-'{version}' successfully",
   "text.board updated": "board '{board}' is updated successfully",
   "text.board-template deleted": "board template is deleted successfully",
+  "text.board-template hint": "Keeps a copy of this board as a starting point for new boards.",
   "text.board-template updated": "board template is updated successfully",
   "text.boards imported": "{count} boards are imported into group {group}",
   "text.can-not-change-group": "You don't have authority to change group information!",
@@ -695,6 +708,9 @@
   "text.drop or click to upload": "Drop a drawing here or click to browse",
   "text.drop_file_here": "text.Drop file here...",
   "text.drop_files_here": "text.Drop files here...",
+  "text.duplicate": "Duplicate",
+  "text.duplicate hint": "Copies this board into a domain and group. Give it a new name when copying within this domain.",
+  "text.edit group": "Edit",
   "text.empty-admin-url-allowed": "Administrator Page URL should not be empty! Please set the Administrator Page URL at Settings page",
   "text.empty-base-url-not-allowed": "Base URL should not be empty! Please set the Base URL",
   "text.emptyDataMessage": "Search Result is Nothing.",
@@ -707,6 +723,7 @@
   "text.group deleted": "group '{group}' is deleted successfully",
   "text.group updated": "group '{group}' is updated successfully",
   "text.group-required": "Label Group is Required!",
+  "text.headless-link hint": "Opens this board full screen with no application chrome - for a wall display or a kiosk.",
   "text.import success": "Board created successfully",
   "text.incorrect_file_type": "text.Incorrect File Type.",
   "text.info_invalid": "Typed information is not valid.",
@@ -718,17 +735,23 @@
   "text.joined into play-group": "board '{board}' joined into play-group '{playGroup}'",
   "text.latest": "latest",
   "text.leaved from play-group": "board '{board}' leaved from play-group '{playGroup}'",
+  "text.link copied": "Link copied",
   "text.loading": "Loading...",
   "text.login_failure": "Login failure.",
   "text.model-overlay": "Because this label is status of {1} \n, you can not edit more.",
   "text.model-overlay-authority-not-allow-change": "Cause of your authority, you can not edit more.",
   "text.model-overlay-status-not-allow-change": "Because this label is status of {1} \n, you can not edit more.",
+  "text.modeller toolbar contextual": "Shows only the tools that apply to what is selected. The top row keeps undo, redo, fit, preview and the panel.",
+  "text.modeller toolbar docked": "The same selection tools, pinned top-centre of the canvas so they never cover a shape or a handle.",
+  "text.modeller toolbar fixed": "Every tool in one row across the top, all the time.",
   "text.modeller-release-msg": "The version now you edit is older version, do you want to create and release new version base on the version?",
   "text.modeller-release-title": "Release：Version Warning",
   "text.modeller-save-msg": "The version now you edit is older version, do you want to create new version base on the version?",
   "text.modeller-save-title": "Save：Version Warning",
   "text.move-to-home": "It will be moved to home.",
   "text.name-and-group-required": "Label Name and Label Group is Required!",
+  "text.new group": "New Group",
+  "text.new play-group": "New Play Group",
   "text.no board to design": "no board is specified in the address, or the specified board was not found.",
   "text.no board to show": "no board is specified in the address, or the specified board was not found.",
   "text.no comment": "no comment",
@@ -745,7 +768,9 @@
   "text.perspective notice": "Perspective drawings are difficult to infer floor plan positions — positional accuracy may be low. Please verify and adjust.",
   "text.play-group created": "play-group '{playGroup}' is created successfully",
   "text.play-group deleted": "play-group '{playGroup}' is deleted successfully",
+  "text.play-group membership applies at once": "Tap a play group to add or remove this board. This applies right away.",
   "text.play-group updated": "play-group '{playGroup}' is updated successfully",
+  "text.plays in": "Plays in",
   "text.pls-name-board": "Type board name",
   "text.processing_file": "Processing File...",
   "text.processing_msg": "Your Request is Processing.",
@@ -758,8 +783,11 @@
   "text.reorder play-group": "play-group '{playGroup}' is reordered successfully",
   "text.request-role-success": "Role requested and admin will check it at e-mail.",
   "text.required_error": "Value Required.",
+  "text.save before release": "Save your changes first",
   "text.saved": "saved",
   "text.saving": "Saving...",
+  "text.search boards by name": "Search boards by name",
+  "text.search templates by name": "Search templates by name",
   "text.search with type, id or tag": "search with type, id or tag",
   "text.select_file": "Select File",
   "text.server_unavailable": "text.Server Unavailable",
@@ -773,6 +801,7 @@
   "text.too_many_files": "Too Many Files.",
   "text.unexpected_server_error": "Unexpected Server Error",
   "text.unknown_remaining_time": "unknown remaining time",
+  "text.updated by": "updated by",
   "text.uploading": "Uploading...",
   "text.user-active-confirm": "Would you like to active this user?",
   "text.want-to-cancel-request-confirm": "Do you want to change this version to eidting version?",
@@ -780,6 +809,7 @@
   "text.want-to-request-confirm": "Do you want to change this to finished version?",
   "text.want-to-version-up": "Do you want to version up?",
   "title.attachment list": "attachment list",
+  "title.board modeller setting": "Modeller contextual edit toolbar",
   "title.board view setting": "Board UI setting",
   "title.board-template list": "board template list",
   "title.copy": "Copy",