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

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

@@ -4,35 +4,16 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { privileged } from '@things-factory/auth-base/dist-client';
-import './group-info-basic';
-import './group-info-import';
+import './group-info-basic.js';
+import './group-info-import.js';
 let GroupInfo = class GroupInfo extends LitElement {
     constructor() {
         super(...arguments);
         this.tab = 'basic';
     }
-    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>
-        `)}
-      <div content>
-        ${this.tab == 'basic'
-            ? html `<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`
-            : html `<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}
-      </div>
-    `;
-    }
-    close() {
-        history.back();
-    }
-};
-GroupInfo.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         height: 100%;
         min-width: 360px;
@@ -76,7 +57,26 @@ GroupInfo.styles = [
         }
       }
     `
-];
+    ]; }
+    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>
+        `)}
+      <div content>
+        ${this.tab == 'basic'
+            ? html `<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`
+            : html `<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}
+      </div>
+    `;
+    }
+    close() {
+        history.back();
+    }
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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,oBAAoB,CAAA;AAC3B,OAAO,qBAAqB,CAAA;AAGrB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmDI,QAAG,GAAW,OAAO,CAAA;IAwBhC,CAAC;IAtBC,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;;AAzEM,gBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,AA9CY,CA8CZ;AAE2B;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'\nimport './group-info-import'\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,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"]}

package/dist-client/viewparts/index.d.ts

@@ -1,3 +1,3 @@
-export * from './board-info';
-export * from './group-info';
-export * from './play-group-info';
+export * from './board-info.js';
+export * from './group-info.js';
+export * from './play-group-info.js';

package/dist-client/viewparts/index.js

@@ -1,4 +1,4 @@
-export * from './board-info';
-export * from './group-info';
-export * from './play-group-info';
+export * from './board-info.js';
+export * from './group-info.js';
+export * from './play-group-info.js';
 //# sourceMappingURL=index.js.map

package/dist-client/viewparts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/viewparts/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA","sourcesContent":["export * from './board-info'\nexport * from './group-info'\nexport * from './play-group-info'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/viewparts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './board-info.js'\nexport * from './group-info.js'\nexport * from './play-group-info.js'\n"]}

package/dist-client/viewparts/link-builder.js

@@ -9,15 +9,80 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { ScrollbarStyles } from '@operato/styles';
 import { i18next } from '@operato/i18n';
-import { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client';
+import { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client/index.js';
 let LinkBuilder = class LinkBuilder extends LitElement {
     constructor() {
         super(...arguments);
         this.appliances = [];
         this.byname = false;
     }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        padding: var(--spacing-large);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+
+        /* for narrow mode */
+        flex-direction: column;
+      }
+
+      div[link] {
+        display: grid;
+        position: relative;
+      }
+
+      label {
+        font: var(--label-font);
+        text-transform: capitalize;
+      }
+
+      input,
+      select,
+      textarea,
+      ox-input-key-values {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        flex: 1 1 0%;
+      }
+
+      textarea {
+        min-height: 132px;
+        resize: none;
+      }
+
+      select:focus,
+      input:focus,
+      textarea:focus,
+      button {
+        outline: none;
+      }
+
+      button:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+
+      [button-in-field] {
+        position: absolute;
+        top: 64px;
+        right: 6px;
+
+        background-color: var(--md-sys-color-surface);
+        opacity: 0.8;
+        color: var(--md-sys-color-primary);
+      }
+
+      [warn] {
+        color: var(--status-warning-color, red);
+      }
+    `
+    ]; }
     render() {
-        var _a;
         return html `
       <div link>
         <h3>
@@ -37,17 +102,14 @@ let LinkBuilder = class LinkBuilder extends LitElement {
             <select
               @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}
               placeholder="choose appliance ..."
-              .value=${(_a = this.targetAppliance) === null || _a === void 0 ? void 0 : _a.id}
+              .value=${this.targetAppliance?.id}
             >
               <option value=""></option>
-              ${this.appliances.map(appliance => {
-            var _a;
-            return html `
-                  <option .value=${appliance.id} ?selected=${appliance.id == ((_a = this.targetAppliance) === null || _a === void 0 ? void 0 : _a.id)}>
+              ${this.appliances.map(appliance => html `
+                  <option .value=${appliance.id} ?selected=${appliance.id == this.targetAppliance?.id}>
                     ${appliance.name}
                   </option>
-                `;
-        })}
+                `)}
             </select>
           `, html `
             <span warn>To add an access token, you need to be a domain owner or have security query permissions.</span>
@@ -57,7 +119,7 @@ let LinkBuilder = class LinkBuilder extends LitElement {
           <input
             type="checkbox"
             id="by-name"
-            @change=${(e) => { var _a; return (this.byname = !!((_a = e.target) === null || _a === void 0 ? void 0 : _a.checked)); }}
+            @change=${(e) => (this.byname = !!e.target?.checked)}
           />
           <label for="by-name">${i18next.t('label.headless-link by-name')}</label>
         </div>
@@ -72,12 +134,14 @@ let LinkBuilder = class LinkBuilder extends LitElement {
         this.getAppliances();
     }
     updated(changes) {
-        var _a, _b;
         const command = (this.command || '') + (this.byname ? '-by-name' : '');
         const target = encodeURIComponent((this.byname ? this.targetName : this.targetId) || '');
-        const baseUrl = (_a = document.querySelector('base')) === null || _a === void 0 ? void 0 : _a.href;
+        const baseUrl = document.querySelector('base')?.href;
         const fullUrl = new URL(command + '/' + target, baseUrl).href;
-        const query = Object.assign(Object.assign({}, (this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues)), (this.targetAppliance ? { access_token: (_b = this.targetAppliance) === null || _b === void 0 ? void 0 : _b.accessToken } : {}));
+        const query = {
+            ...(this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues),
+            ...(this.targetAppliance ? { access_token: this.targetAppliance?.accessToken } : {})
+        };
         const queryString = this.objectToQueryString(query);
         this.link = fullUrl + (queryString ? '?' + queryString : '');
     }
@@ -108,72 +172,6 @@ let LinkBuilder = class LinkBuilder extends LitElement {
         }
     }
 };
-LinkBuilder.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        padding: var(--spacing-large);
-        color: var(--md-sys-color-primary);
-
-        /* for narrow mode */
-        flex-direction: column;
-      }
-
-      div[link] {
-        display: grid;
-        position: relative;
-      }
-
-      label {
-        font: var(--label-font);
-        text-transform: capitalize;
-      }
-
-      input,
-      select,
-      textarea,
-      ox-input-key-values {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        flex: 1 1 0%;
-      }
-
-      textarea {
-        min-height: 132px;
-        resize: none;
-      }
-
-      select:focus,
-      input:focus,
-      textarea:focus,
-      button {
-        outline: none;
-      }
-
-      button:hover {
-        border: var(--button-activ-border);
-        box-shadow: var(--button-active-box-shadow);
-      }
-
-      [button-in-field] {
-        position: absolute;
-        top: 64px;
-        right: 6px;
-
-        background-color: var(--md-sys-color-surface);
-        opacity: 0.8;
-        color: var(--md-sys-color-primary);
-      }
-
-      [warn] {
-        color: var(--status-warning-color, red);
-      }
-    `
-];
 __decorate([
     property({ type: String, attribute: true }),
     __metadata("design:type", String)

package/dist-client/viewparts/link-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-builder.js","sourceRoot":"","sources":["../../client/viewparts/link-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-key-values.js'\n\nimport gql from 'graphql-tag'\nimport Clipboard from 'clipboard'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nimport { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('link-builder')\nexport class LinkBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-large);\n        color: var(--md-sys-color-primary);\n\n        /* for narrow mode */\n        flex-direction: column;\n      }\n\n      div[link] {\n        display: grid;\n        position: relative;\n      }\n\n      label {\n        font: var(--label-font);\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      textarea,\n      ox-input-key-values {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        flex: 1 1 0%;\n      }\n\n      textarea {\n        min-height: 132px;\n        resize: none;\n      }\n\n      select:focus,\n      input:focus,\n      textarea:focus,\n      button {\n        outline: none;\n      }\n\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n\n      [button-in-field] {\n        position: absolute;\n        top: 64px;\n        right: 6px;\n\n        background-color: var(--md-sys-color-surface);\n        opacity: 0.8;\n        color: var(--md-sys-color-primary);\n      }\n\n      [warn] {\n        color: var(--status-warning-color, red);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) command?: string\n  @property({ type: String, attribute: 'target-id' }) targetId?: string\n  @property({ type: String, attribute: 'target-name' }) targetName?: string\n\n  @state() link?: string\n  @state() keyvalues: any\n  @state() appliances: any[] = []\n  @state() targetAppliance: any\n  @state() key?: string\n  @state() byname: boolean = false\n\n  private clipboard?: Clipboard\n\n  render() {\n    return html`\n      <div link>\n        <h3>\n          <ox-title-with-help topic=\"operato-board/headless-link\" msgid=\"label.headless-link\"\n            >headless-link</ox-title-with-help\n          >\n        </h3>\n        <textarea id=\"link\" .value=${this.link || ''} readonly></textarea>\n        <md-icon button-in-field clipboard-copy>content_copy</md-icon>\n        <label for=\"key\">${i18next.t('label.headless-link query-key')}</label>\n        <input id=\"key\" type=\"text\" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />\n        <label>${i18next.t('label.headless-link query-parameters')}</label>\n        <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>\n        <label>${i18next.t('label.headless-link target-appliance')}</label>\n\n        ${privileged(\n          { privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true },\n          html`\n            <select\n              @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}\n              placeholder=\"choose appliance ...\"\n              .value=${this.targetAppliance?.id}\n            >\n              <option value=\"\"></option>\n              ${this.appliances.map(\n                appliance => html`\n                  <option .value=${appliance.id} ?selected=${appliance.id == this.targetAppliance?.id}>\n                    ${appliance.name}\n                  </option>\n                `\n              )}\n            </select>\n          `,\n          html`\n            <span warn>To add an access token, you need to be a domain owner or have security query permissions.</span>\n          `\n        )}\n\n        <div>\n          <input\n            type=\"checkbox\"\n            id=\"by-name\"\n            @change=${(e: Event) => (this.byname = !!(e.target as HTMLInputElement)?.checked)}\n          />\n          <label for=\"by-name\">${i18next.t('label.headless-link by-name')}</label>\n        </div>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('textarea')) as any\n    })\n\n    this.getAppliances()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const command = (this.command || '') + (this.byname ? '-by-name' : '')\n    const target = encodeURIComponent((this.byname ? this.targetName : this.targetId) || '')\n\n    const baseUrl = document.querySelector('base')?.href\n    const fullUrl = new URL(command + '/' + target, baseUrl).href\n\n    const query = {\n      ...(this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues),\n      ...(this.targetAppliance ? { access_token: this.targetAppliance?.accessToken } : {})\n    }\n\n    const queryString = this.objectToQueryString(query)\n\n    this.link = fullUrl + (queryString ? '?' + queryString : '')\n  }\n\n  objectToQueryString(obj) {\n    return Object.keys(obj)\n      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)\n      .join('&')\n  }\n\n  async getAppliances() {\n    this.appliances = []\n    this.targetAppliance = null\n\n    if (\n      await hasPrivilege({ privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true })\n    ) {\n      var response = (\n        await client.query({\n          query: gql`\n            query {\n              appliances {\n                items {\n                  id\n                  name\n                  description\n                  accessToken\n                }\n              }\n            }\n          `\n        })\n      ).data\n\n      this.appliances = response.appliances.items\n    }\n  }\n}\n"]}
+{"version":3,"file":"link-builder.js","sourceRoot":"","sources":["../../client/viewparts/link-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-key-values.js'\n\nimport gql from 'graphql-tag'\nimport Clipboard from 'clipboard'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nimport { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client/index.js'\n\n@customElement('link-builder')\nexport class LinkBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-large);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n\n        /* for narrow mode */\n        flex-direction: column;\n      }\n\n      div[link] {\n        display: grid;\n        position: relative;\n      }\n\n      label {\n        font: var(--label-font);\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      textarea,\n      ox-input-key-values {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        flex: 1 1 0%;\n      }\n\n      textarea {\n        min-height: 132px;\n        resize: none;\n      }\n\n      select:focus,\n      input:focus,\n      textarea:focus,\n      button {\n        outline: none;\n      }\n\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n\n      [button-in-field] {\n        position: absolute;\n        top: 64px;\n        right: 6px;\n\n        background-color: var(--md-sys-color-surface);\n        opacity: 0.8;\n        color: var(--md-sys-color-primary);\n      }\n\n      [warn] {\n        color: var(--status-warning-color, red);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) command?: string\n  @property({ type: String, attribute: 'target-id' }) targetId?: string\n  @property({ type: String, attribute: 'target-name' }) targetName?: string\n\n  @state() link?: string\n  @state() keyvalues: any\n  @state() appliances: any[] = []\n  @state() targetAppliance: any\n  @state() key?: string\n  @state() byname: boolean = false\n\n  private clipboard?: Clipboard\n\n  render() {\n    return html`\n      <div link>\n        <h3>\n          <ox-title-with-help topic=\"operato-board/headless-link\" msgid=\"label.headless-link\"\n            >headless-link</ox-title-with-help\n          >\n        </h3>\n        <textarea id=\"link\" .value=${this.link || ''} readonly></textarea>\n        <md-icon button-in-field clipboard-copy>content_copy</md-icon>\n        <label for=\"key\">${i18next.t('label.headless-link query-key')}</label>\n        <input id=\"key\" type=\"text\" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />\n        <label>${i18next.t('label.headless-link query-parameters')}</label>\n        <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>\n        <label>${i18next.t('label.headless-link target-appliance')}</label>\n\n        ${privileged(\n          { privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true },\n          html`\n            <select\n              @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}\n              placeholder=\"choose appliance ...\"\n              .value=${this.targetAppliance?.id}\n            >\n              <option value=\"\"></option>\n              ${this.appliances.map(\n                appliance => html`\n                  <option .value=${appliance.id} ?selected=${appliance.id == this.targetAppliance?.id}>\n                    ${appliance.name}\n                  </option>\n                `\n              )}\n            </select>\n          `,\n          html`\n            <span warn>To add an access token, you need to be a domain owner or have security query permissions.</span>\n          `\n        )}\n\n        <div>\n          <input\n            type=\"checkbox\"\n            id=\"by-name\"\n            @change=${(e: Event) => (this.byname = !!(e.target as HTMLInputElement)?.checked)}\n          />\n          <label for=\"by-name\">${i18next.t('label.headless-link by-name')}</label>\n        </div>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('textarea')) as any\n    })\n\n    this.getAppliances()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    const command = (this.command || '') + (this.byname ? '-by-name' : '')\n    const target = encodeURIComponent((this.byname ? this.targetName : this.targetId) || '')\n\n    const baseUrl = document.querySelector('base')?.href\n    const fullUrl = new URL(command + '/' + target, baseUrl).href\n\n    const query = {\n      ...(this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues),\n      ...(this.targetAppliance ? { access_token: this.targetAppliance?.accessToken } : {})\n    }\n\n    const queryString = this.objectToQueryString(query)\n\n    this.link = fullUrl + (queryString ? '?' + queryString : '')\n  }\n\n  objectToQueryString(obj) {\n    return Object.keys(obj)\n      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)\n      .join('&')\n  }\n\n  async getAppliances() {\n    this.appliances = []\n    this.targetAppliance = null\n\n    if (\n      await hasPrivilege({ privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true })\n    ) {\n      var response = (\n        await client.query({\n          query: gql`\n            query {\n              appliances {\n                items {\n                  id\n                  name\n                  description\n                  accessToken\n                }\n              }\n            }\n          `\n        })\n      ).data\n\n      this.appliances = response.appliances.items\n    }\n  }\n}\n"]}

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

@@ -5,115 +5,14 @@ import '@material/web/button/elevated-button.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
-import { fetchPlayGroup } from '../graphql';
+import { fetchPlayGroup } from '../graphql/index.js';
 let PlayGroupInfoBasic = class PlayGroupInfoBasic extends LitElement {
     constructor() {
         super(...arguments);
         this.playGroup = { name: '', description: '' };
     }
-    render() {
-        var playGroup = this.playGroup || { name: '', description: '' };
-        return html `
-      <form>
-        <fieldset>
-          <legend>playgroup information</legend>
-          <md-filled-text-field
-            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>${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>
-
-          <div 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
-                  >
-                `
-            : 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>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('playGroupId')) {
-            this.refresh();
-        }
-    }
-    firstUpdated() {
-        setTimeout(() => {
-            ;
-            this.renderRoot.querySelector('[type=text]').focus();
-        }, 100);
-    }
-    async refresh() {
-        if (!this.playGroupId) {
-            /* model이 없으므로, 기본 모델을 제공함. */
-            this.playGroup = { name: '', description: '' };
-        }
-        else {
-            var response = await fetchPlayGroup(this.playGroupId);
-            this.playGroup = response.playGroup;
-        }
-    }
-    async createPlayGroup() {
-        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.close();
-    }
-    async deletePlayGroup() {
-        this.dispatchEvent(new CustomEvent('delete-play-group', {
-            detail: this.playGroup,
-            bubbles: true,
-            composed: true
-        }));
-        this.close();
-    }
-    close() {
-        history.back();
-    }
-};
-PlayGroupInfoBasic.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: block;
         color: var(--md-sys-color-on-surface);
@@ -239,7 +138,108 @@ PlayGroupInfoBasic.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var playGroup = this.playGroup || { name: '', description: '' };
+        return html `
+      <form>
+        <fieldset>
+          <legend>playgroup information</legend>
+          <md-filled-text-field
+            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>${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>
+
+          <div 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
+                  >
+                `
+            : 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>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('playGroupId')) {
+            this.refresh();
+        }
+    }
+    firstUpdated() {
+        setTimeout(() => {
+            ;
+            this.renderRoot.querySelector('[type=text]').focus();
+        }, 100);
+    }
+    async refresh() {
+        if (!this.playGroupId) {
+            /* model이 없으므로, 기본 모델을 제공함. */
+            this.playGroup = { name: '', description: '' };
+        }
+        else {
+            var response = await fetchPlayGroup(this.playGroupId);
+            this.playGroup = response.playGroup;
+        }
+    }
+    async createPlayGroup() {
+        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.close();
+    }
+    async deletePlayGroup() {
+        this.dispatchEvent(new CustomEvent('delete-play-group', {
+            detail: this.playGroup,
+            bubbles: true,
+            composed: true
+        }));
+        this.close();
+    }
+    close() {
+        history.back();
+    }
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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'\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    var 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      var 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/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    var 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      var 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"]}