@things-factory/board-ui 6.1.195 → 6.1.196

package/client/board-list/board-tile-list.js

@@ -206,7 +206,7 @@ export default class BoardTileList extends LitElement {
                   iconBtn
                   info
                   @click=${e => {
-                    this.infoBoard(board.id)
+                    this.infoBoard(board)
                     e.preventDefault()
                   }}
                   >info</mwc-icon
@@ -237,10 +237,10 @@ export default class BoardTileList extends LitElement {
     )
   }
 
-  infoBoard(boardId) {
+  infoBoard(board) {
     this.dispatchEvent(
       new CustomEvent('info-board', {
-        detail: boardId
+        detail: board
       })
     )
   }

package/client/board-list/play-group-bar.ts

@@ -0,0 +1,143 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import ScrollBooster from 'scrollbooster'
+
+import { longpressable } from '@things-factory/utils'
+
+@customElement('play-group-bar')
+export default class PlayGroupBar extends LitElement {
+  static styles = [
+    css`
+      :host {
+        background-color: var(--group-bar-background-color);
+
+        overflow-x: hidden;
+      }
+
+      ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+      }
+
+      li {
+        display: inline-block;
+        padding: 0px 3px;
+
+        border-bottom: var(--group-bar-line);
+      }
+
+      li[active] {
+        border-color: var(--group-bar-active-line-color);
+      }
+
+      li a {
+        display: block;
+        padding: 5px 4px 1px 4px;
+        text-decoration: none;
+        font: var(--group-bar-textbutton);
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      li[active] a {
+        font: var(--group-bar-textbutton-active);
+        color: rgba(255, 255, 255, 1);
+      }
+
+      li[padding] {
+        flex: 1;
+      }
+
+      li[add] {
+        padding: 5px 4px 1px 4px;
+      }
+
+      li[add] * {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      mwc-icon {
+        vertical-align: middle;
+      }
+    `
+  ]
+
+  @property({ type: Array }) groups: { id: string; name: string }[] = []
+  @property({ type: String }) groupId: string = ''
+  @property({ type: String, attribute: 'target-page' }) targetPage: string = ''
+
+  private __sb?: ScrollBooster
+
+  render() {
+    return html`
+      <ul>
+        ${(this.groups || []).map(
+          group => html`
+            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
+              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
+            </li>
+          `
+        )}
+
+        <li padding></li>
+
+        <li add>
+          <mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>
+        </li>
+      </ul>
+    `
+  }
+
+  _infoGroup(group?: { id: string; name: string }) {
+    this.dispatchEvent(
+      new CustomEvent('info-play-group', {
+        detail: group
+      })
+    )
+  }
+
+  _onWheelEvent(e) {
+    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
+    this.scrollLeft -= delta * 40
+
+    e.preventDefault()
+  }
+
+  _onClickAdd(e) {
+    // TODO Implements
+  }
+
+  updated(change) {
+    if (change.has('groups')) {
+      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
+      this.__sb && this.__sb.updateMetrics()
+    }
+
+    if (change.has('groupId')) {
+      var active = this.renderRoot.querySelector('li[active]')
+      active && active.scrollIntoView()
+    }
+  }
+
+  firstUpdated() {
+    var scrollTarget = this.renderRoot.querySelector('ul')
+
+    /* long-press */
+    longpressable(scrollTarget)
+
+    scrollTarget!.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)
+
+    this.__sb = new ScrollBooster({
+      viewport: this,
+      content: scrollTarget,
+      mode: 'x',
+      onUpdate: data => {
+        this.scrollLeft = data.position.x
+      }
+    })
+  }
+}

package/client/data-grist/board-renderer.ts

@@ -25,7 +25,8 @@ class BoardRendererElement extends LitElement {
   static styles = [
     css`
       :host {
-        display: block;
+        display: flex;
+        justify-content: center;
         position: relative;
 
         max-width: var(--board-renderer-max-width);

package/client/pages/board-list-page.js

@@ -281,11 +281,11 @@ class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(
     })
   }
 
-  async onInfoBoard(boardId) {
+  async onInfoBoard(board) {
     openOverlay('viewpart-info', {
       template: html`
         <board-info
-          .boardId=${boardId}
+          .board=${board}
           .groupId=${this.groupId}
           ?enable-modeller=${this.boardPermissions?.includes('Modeller')}
           @clone-board=${e => this.onCloneBoard(e.detail)}

package/client/pages/play-list-page.js

@@ -81,7 +81,7 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
       <play-group-bar
         .groups=${this.groups}
         .groupId=${this.groupId}
-        targetPage="play-list"
+        target-page="play-list"
         @info-play-group=${e => this.onInfoPlayGroup(e.detail)}
       ></play-group-bar>
 
@@ -213,11 +213,11 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
     }
   }
 
-  async onInfoBoard(boardId) {
+  async onInfoBoard(board) {
     openOverlay('viewpart-info', {
       template: html`
         <board-info
-          .boardId=${boardId}
+          .board=${board}
           .groupId=${this.groupId}
           @update-board=${e => this.onUpdateBoard(e.detail)}
           @delete-board=${e => this.onDeleteBoard(e.detail)}
@@ -228,11 +228,11 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
     })
   }
 
-  async onInfoPlayGroup(groupId) {
+  async onInfoPlayGroup(group) {
     openOverlay('viewpart-info', {
       template: html`
         <play-group-info
-          .playGroupId=${groupId}
+          .playGroup=${group}
           @update-play-group=${e => this.onUpdatePlayGroup(e.detail)}
           @delete-play-group=${e => this.onDeletePlayGroup(e.detail)}
           @create-play-group=${e => this.onCreatePlayGroup(e.detail)}

package/client/viewparts/board-info-link.ts

@@ -29,9 +29,15 @@ export class BoardInfoLink extends LitElement {
     `
   ]
 
-  @property({ type: String }) boardId?: string
+  @property({ type: Object }) board?: { id: string; name: string }
 
   render() {
-    return html` <link-builder command="headless-full" target=${this.boardId || ''}></link-builder> `
+    return html`
+      <link-builder
+        command="headless-full"
+        target-id=${this.board?.id || ''}
+        target-name=${this.board?.name || ''}
+      ></link-builder>
+    `
   }
 }

package/client/viewparts/board-info.ts

@@ -58,7 +58,7 @@ export class BoardInfo extends LitElement {
     `
   ]
 
-  @property({ type: String }) boardId?: string
+  @property({ type: Object }) board?: { id: string; name: string }
   @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean
 
   @state() tab: string = 'basic'
@@ -73,12 +73,12 @@ export class BoardInfo extends LitElement {
       <div content>
         ${this.tab == 'basic'
           ? html`<board-basic-info
-              boardId=${ifDefined(this.boardId)}
+              boardId=${ifDefined(this.board?.id)}
               ?enable-modeller=${this.enableModeller}
             ></board-basic-info>`
           : this.tab == 'versions'
-          ? html`<board-versions boardId=${ifDefined(this.boardId)}></board-versions>`
-          : html`<board-info-link boardId=${ifDefined(this.boardId)}></board-info-link>`}
+          ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`
+          : html`<board-info-link .board=${this.board}></board-info-link>`}
       </div>
     `
   }

package/client/viewparts/link-builder.ts

@@ -83,13 +83,15 @@ export class LinkBuilder extends LitElement {
   ]
 
   @property({ type: String, attribute: true }) command?: string
-  @property({ type: String, attribute: true }) target?: string
+  @property({ type: String, attribute: 'target-id' }) targetId?: string
+  @property({ type: String, attribute: 'target-name' }) targetName?: string
 
   @state() link?: string
   @state() keyvalues: any
   @state() appliances: any[] = []
   @state() targetAppliance: any
   @state() key?: string
+  @state() byname: boolean = false
 
   private clipboard?: Clipboard
 
@@ -132,6 +134,15 @@ export class LinkBuilder extends LitElement {
             <span warn>To add an access token, you need to be a domain owner or have security query permissions.</span>
           `
         )}
+
+        <div>
+          <input
+            type="checkbox"
+            id="by-name"
+            @change=${(e: Event) => (this.byname = !!(e.target as HTMLInputElement)?.checked)}
+          />
+          <label for="by-name">${i18next.t('label.headless-link by-name')}</label>
+        </div>
       </div>
     `
   }
@@ -147,8 +158,11 @@ export class LinkBuilder extends LitElement {
   }
 
   updated(changes: PropertyValues<this>) {
+    const command = (this.command || '') + (this.byname ? '-by-name' : '')
+    const target = encodeURIComponent((this.byname ? this.targetName : this.targetId) || '')
+
     const baseUrl = document.querySelector('base')?.href
-    const fullUrl = new URL(this.command + '/' + this.target, baseUrl).href
+    const fullUrl = new URL(command + '/' + target, baseUrl).href
 
     const query = {
       ...(this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues),

package/client/viewparts/play-group-info-link.ts

@@ -32,9 +32,15 @@ export class PlayGroupInfoLink extends LitElement {
     `
   ]
 
-  @property({ type: String }) playGroupId?: string
+  @property({ type: Object }) playGroup?: { id: string; name: string }
 
   render() {
-    return html` <link-builder command="headless-player" target=${this.playGroupId}></link-builder> `
+    return html`
+      <link-builder
+        command="headless-player"
+        target-id=${this.playGroup?.id || ''}
+        target-name=${this.playGroup?.name || ''}
+      ></link-builder>
+    `
   }
 }

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

@@ -57,7 +57,7 @@ export class PlayGroupInfo extends LitElement {
     `
   ]
 
-  @property({ type: String }) playGroupId?: string
+  @property({ type: Object }) playGroup?: { id: string; name: string }
 
   @state() tab: string = 'basic'
 
@@ -69,8 +69,8 @@ export class PlayGroupInfo extends LitElement {
       </div>
       <div content>
         ${this.tab == 'basic'
-          ? html`<play-group-info-basic playGroupId=${ifDefined(this.playGroupId)}></play-group-info-basic>`
-          : html`<play-group-info-link playGroupId=${ifDefined(this.playGroupId)}></play-group-info-link>`}
+          ? 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/board-list/board-tile-list.d.ts

@@ -19,7 +19,7 @@ export default class BoardTileList extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: any): void;
     onCreateBoard(e: any): void;
-    infoBoard(boardId: any): void;
+    infoBoard(board: any): void;
     removeFavorite(boardId: any): Promise<void>;
     addFavorite(boardId: any): Promise<void>;
     refreshFavorites(): Promise<void>;

package/dist-client/board-list/board-tile-list.js

@@ -185,7 +185,7 @@ export default class BoardTileList extends LitElement {
                   iconBtn
                   info
                   @click=${e => {
-            this.infoBoard(board.id);
+            this.infoBoard(board);
             e.preventDefault();
         }}
                   >info</mwc-icon
@@ -209,9 +209,9 @@ export default class BoardTileList extends LitElement {
             detail: e.detail
         }));
     }
-    infoBoard(boardId) {
+    infoBoard(board) {
         this.dispatchEvent(new CustomEvent('info-board', {
-            detail: boardId
+            detail: board
         }));
     }
     async removeFavorite(boardId) {

package/dist-client/board-list/board-tile-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.js"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@things-factory/shell'\n\nexport default class BoardTileList extends LitElement {\n  static get styles() {\n    return [\n      css`\n        :host {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n          --mdc-button-horizontal-padding: var(--padding-default);\n        }\n\n        [card] {\n          position: relative;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        [card][create] {\n          overflow: visible;\n          background-color: initial;\n        }\n\n        [card] > a {\n          display: flex;\n        }\n\n        [card]:hover {\n          cursor: pointer;\n        }\n\n        [name] {\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          overflow: hidden;\n          margin-top: var(--margin-narrow);\n          width: calc(100% - 45px);\n          color: var(--primary-text-color);\n          font-weight: bolder;\n          font-size: var(--fontsize-small);\n        }\n\n        img {\n          display: block;\n\n          margin: auto;\n          max-width: 100%;\n          max-height: 100%;\n        }\n\n        mwc-icon[iconBtn] {\n          float: right;\n          margin-top: -20px;\n          margin-left: 2px;\n          color: var(--board-list-star-color);\n          font-size: 1.4em;\n        }\n        mwc-icon[info] {\n          color: var(--primary-color);\n        }\n\n        mwc-icon[iconBtn][favored],\n        mwc-icon[info]:hover {\n          color: var(--board-list-star-active-color);\n        }\n\n        a {\n          display: block;\n          border-radius: var(--card-list-border-radius);\n          border: var(--border-dark-color);\n          box-sizing: border-box;\n          background-color: var(--card-list-background-color);\n          margin: 0px;\n          height: calc(100% - 25px);\n        }\n\n        :host > *:hover [info] {\n          opacity: 1;\n          -webkit-transition: opacity 0.8s;\n          -moz-transition: opacity 0.8s;\n          -o-transition: opacity 0.8s;\n          transition: opacity 0.8s;\n        }\n\n        [draggable='true'] {\n          cursor: grab;\n        }\n\n        @media screen and (max-width: 800px), screen and (max-height: 600px) {\n          ox-board-creation-card {\n            display: none;\n          }\n        }\n      `\n    ]\n  }\n\n  static get properties() {\n    return {\n      creatable: {\n        type: Boolean,\n        attribute: 'creatable'\n      },\n      boards: Array,\n      favorites: Array,\n      groups: Array,\n      group: String,\n      reorderable: {\n        type: Boolean,\n        attribute: 'reorderable'\n      }\n    }\n  }\n\n  draggingItem\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (this.reorderable) {\n      this.renderRoot.addEventListener('dragstart', e => {\n        // if (!e.target.getAttribute('draggable')) {\n        //   e.preventDefault()\n        // }\n\n        // this.draggedItem = e.target\n        this.draggedItem = e.target.closest('[card]')\n        e.dataTransfer.setData('text/plain', e.target.innerHTML)\n      })\n\n      this.renderRoot.addEventListener('dragover', e => {\n        e.preventDefault()\n        const targetItem = e.target.closest('[card]')\n        if (targetItem !== this.draggedItem) {\n          const targetRect = targetItem.getBoundingClientRect()\n          const mousePos = e.clientX - targetRect.left\n\n          if (mousePos < targetRect.width / 2) {\n            // 마우스 위치가 아이템 좌측 반절에 있을 때\n            this.renderRoot.insertBefore(this.draggedItem, targetItem)\n          } else {\n            // 마우스 위치가 아이템 우측 반절에 있을 때\n            this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n          }\n        }\n      })\n\n      this.renderRoot.addEventListener('drop', e => {\n        e.preventDefault()\n\n        const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n          .map(board => board.getAttribute('id'))\n          .filter(Boolean)\n\n        this.dispatchEvent(\n          new CustomEvent('reordered', {\n            detail: {\n              groupId: this.group,\n              boardIds\n            }\n          })\n        )\n      })\n    }\n  }\n\n  render() {\n    var boards = this.boards || []\n\n    return html`\n      ${this.creatable\n        ? html`\n            <ox-board-creation-card\n              .groups=${this.groups}\n              .defaultGroup=${this.group}\n              @create-board=${e => this.onCreateBoard(e)}\n              card\n              create\n            ></ox-board-creation-card>\n          `\n        : html``}\n      ${keyed(\n        Date.now(),\n        boards.map(\n          board =>\n            html`\n              <div card draggable=\"true\" id=${board.id}>\n                <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n                <div name>${board.name}</div>\n                <!-- <div description>${board.description}</div> -->\n\n                <mwc-icon\n                  iconBtn\n                  info\n                  @click=${e => {\n                    this.infoBoard(board.id)\n                    e.preventDefault()\n                  }}\n                  >info</mwc-icon\n                >\n\n                ${(this.favorites || []).includes(board.id)\n                  ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n                  : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n              </div>\n            `\n        )\n      )}\n    `\n  }\n\n  updated(changes) {\n    var creationCard = this.shadowRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      creationCard.reset()\n    }\n  }\n\n  onCreateBoard(e) {\n    this.dispatchEvent(\n      new CustomEvent('create-board', {\n        detail: e.detail\n      })\n    )\n  }\n\n  infoBoard(boardId) {\n    this.dispatchEvent(\n      new CustomEvent('info-board', {\n        detail: boardId\n      })\n    )\n  }\n\n  async removeFavorite(boardId) {\n    await client.query({\n      query: gql`\n        mutation {\n          deleteFavorite(routing: \"${boardId}\")\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async addFavorite(boardId) {\n    await client.query({\n      query: gql`\n        mutation {\n          createFavorite(favorite: {\n            routing: \"${boardId}\"\n          }) {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async refreshFavorites() {\n    this.dispatchEvent(new CustomEvent('refresh-favorites'))\n  }\n}\n\nwindow.customElements.define('board-tile-list', BoardTileList)\n"]}
+{"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.js"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@things-factory/shell'\n\nexport default class BoardTileList extends LitElement {\n  static get styles() {\n    return [\n      css`\n        :host {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n          --mdc-button-horizontal-padding: var(--padding-default);\n        }\n\n        [card] {\n          position: relative;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        [card][create] {\n          overflow: visible;\n          background-color: initial;\n        }\n\n        [card] > a {\n          display: flex;\n        }\n\n        [card]:hover {\n          cursor: pointer;\n        }\n\n        [name] {\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          overflow: hidden;\n          margin-top: var(--margin-narrow);\n          width: calc(100% - 45px);\n          color: var(--primary-text-color);\n          font-weight: bolder;\n          font-size: var(--fontsize-small);\n        }\n\n        img {\n          display: block;\n\n          margin: auto;\n          max-width: 100%;\n          max-height: 100%;\n        }\n\n        mwc-icon[iconBtn] {\n          float: right;\n          margin-top: -20px;\n          margin-left: 2px;\n          color: var(--board-list-star-color);\n          font-size: 1.4em;\n        }\n        mwc-icon[info] {\n          color: var(--primary-color);\n        }\n\n        mwc-icon[iconBtn][favored],\n        mwc-icon[info]:hover {\n          color: var(--board-list-star-active-color);\n        }\n\n        a {\n          display: block;\n          border-radius: var(--card-list-border-radius);\n          border: var(--border-dark-color);\n          box-sizing: border-box;\n          background-color: var(--card-list-background-color);\n          margin: 0px;\n          height: calc(100% - 25px);\n        }\n\n        :host > *:hover [info] {\n          opacity: 1;\n          -webkit-transition: opacity 0.8s;\n          -moz-transition: opacity 0.8s;\n          -o-transition: opacity 0.8s;\n          transition: opacity 0.8s;\n        }\n\n        [draggable='true'] {\n          cursor: grab;\n        }\n\n        @media screen and (max-width: 800px), screen and (max-height: 600px) {\n          ox-board-creation-card {\n            display: none;\n          }\n        }\n      `\n    ]\n  }\n\n  static get properties() {\n    return {\n      creatable: {\n        type: Boolean,\n        attribute: 'creatable'\n      },\n      boards: Array,\n      favorites: Array,\n      groups: Array,\n      group: String,\n      reorderable: {\n        type: Boolean,\n        attribute: 'reorderable'\n      }\n    }\n  }\n\n  draggingItem\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (this.reorderable) {\n      this.renderRoot.addEventListener('dragstart', e => {\n        // if (!e.target.getAttribute('draggable')) {\n        //   e.preventDefault()\n        // }\n\n        // this.draggedItem = e.target\n        this.draggedItem = e.target.closest('[card]')\n        e.dataTransfer.setData('text/plain', e.target.innerHTML)\n      })\n\n      this.renderRoot.addEventListener('dragover', e => {\n        e.preventDefault()\n        const targetItem = e.target.closest('[card]')\n        if (targetItem !== this.draggedItem) {\n          const targetRect = targetItem.getBoundingClientRect()\n          const mousePos = e.clientX - targetRect.left\n\n          if (mousePos < targetRect.width / 2) {\n            // 마우스 위치가 아이템 좌측 반절에 있을 때\n            this.renderRoot.insertBefore(this.draggedItem, targetItem)\n          } else {\n            // 마우스 위치가 아이템 우측 반절에 있을 때\n            this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n          }\n        }\n      })\n\n      this.renderRoot.addEventListener('drop', e => {\n        e.preventDefault()\n\n        const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n          .map(board => board.getAttribute('id'))\n          .filter(Boolean)\n\n        this.dispatchEvent(\n          new CustomEvent('reordered', {\n            detail: {\n              groupId: this.group,\n              boardIds\n            }\n          })\n        )\n      })\n    }\n  }\n\n  render() {\n    var boards = this.boards || []\n\n    return html`\n      ${this.creatable\n        ? html`\n            <ox-board-creation-card\n              .groups=${this.groups}\n              .defaultGroup=${this.group}\n              @create-board=${e => this.onCreateBoard(e)}\n              card\n              create\n            ></ox-board-creation-card>\n          `\n        : html``}\n      ${keyed(\n        Date.now(),\n        boards.map(\n          board =>\n            html`\n              <div card draggable=\"true\" id=${board.id}>\n                <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n                <div name>${board.name}</div>\n                <!-- <div description>${board.description}</div> -->\n\n                <mwc-icon\n                  iconBtn\n                  info\n                  @click=${e => {\n                    this.infoBoard(board)\n                    e.preventDefault()\n                  }}\n                  >info</mwc-icon\n                >\n\n                ${(this.favorites || []).includes(board.id)\n                  ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n                  : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n              </div>\n            `\n        )\n      )}\n    `\n  }\n\n  updated(changes) {\n    var creationCard = this.shadowRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      creationCard.reset()\n    }\n  }\n\n  onCreateBoard(e) {\n    this.dispatchEvent(\n      new CustomEvent('create-board', {\n        detail: e.detail\n      })\n    )\n  }\n\n  infoBoard(board) {\n    this.dispatchEvent(\n      new CustomEvent('info-board', {\n        detail: board\n      })\n    )\n  }\n\n  async removeFavorite(boardId) {\n    await client.query({\n      query: gql`\n        mutation {\n          deleteFavorite(routing: \"${boardId}\")\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async addFavorite(boardId) {\n    await client.query({\n      query: gql`\n        mutation {\n          createFavorite(favorite: {\n            routing: \"${boardId}\"\n          }) {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async refreshFavorites() {\n    this.dispatchEvent(new CustomEvent('refresh-favorites'))\n  }\n}\n\nwindow.customElements.define('board-tile-list', BoardTileList)\n"]}

package/dist-client/board-list/play-group-bar.d.ts

@@ -1,16 +1,21 @@
+import '@material/mwc-icon';
+import { LitElement } from 'lit';
 export default class PlayGroupBar extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    static get properties(): {
-        groups: ArrayConstructor;
-        groupId: StringConstructor;
-        targetPage: StringConstructor;
-    };
+    static styles: import("lit").CSSResult[];
+    groups: {
+        id: string;
+        name: string;
+    }[];
+    groupId: string;
+    targetPage: string;
+    private __sb?;
     render(): import("lit-html").TemplateResult<1>;
-    _infoGroup(groupId: any): void;
+    _infoGroup(group?: {
+        id: string;
+        name: string;
+    }): void;
     _onWheelEvent(e: any): void;
     _onClickAdd(e: any): void;
     updated(change: any): void;
     firstUpdated(): void;
-    __sb: any;
 }
-import { LitElement } from "lit-element/lit-element";

package/dist-client/board-list/play-group-bar.js

@@ -1,79 +1,21 @@
+import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
 import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import ScrollBooster from 'scrollbooster';
 import { longpressable } from '@things-factory/utils';
-export default class PlayGroupBar extends LitElement {
-    static get styles() {
-        return [
-            css `
-        :host {
-          background-color: var(--group-bar-background-color);
-
-          overflow-x: hidden;
-        }
-
-        ul {
-          display: flex;
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          white-space: nowrap;
-        }
-
-        li {
-          display: inline-block;
-          padding: 0px 3px;
-
-          border-bottom: var(--group-bar-line);
-        }
-
-        li[active] {
-          border-color: var(--group-bar-active-line-color);
-        }
-
-        li a {
-          display: block;
-          padding: 5px 4px 1px 4px;
-          text-decoration: none;
-          font: var(--group-bar-textbutton);
-          color: rgba(255, 255, 255, 0.8);
-        }
-
-        li[active] a {
-          font: var(--group-bar-textbutton-active);
-          color: rgba(255, 255, 255, 1);
-        }
-
-        li[padding] {
-          flex: 1;
-        }
-
-        li[add] {
-          padding: 5px 4px 1px 4px;
-        }
-
-        li[add] * {
-          color: rgba(255, 255, 255, 0.5);
-        }
-
-        mwc-icon {
-          vertical-align: middle;
-        }
-      `
-        ];
-    }
-    static get properties() {
-        return {
-            groups: Array,
-            groupId: String,
-            targetPage: String
-        };
+let PlayGroupBar = class PlayGroupBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.groupId = '';
+        this.targetPage = '';
     }
     render() {
         return html `
       <ul>
         ${(this.groups || []).map(group => html `
-            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group.id)}>
+            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
               <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
             </li>
           `)}
@@ -86,9 +28,9 @@ export default class PlayGroupBar extends LitElement {
       </ul>
     `;
     }
-    _infoGroup(groupId) {
+    _infoGroup(group) {
         this.dispatchEvent(new CustomEvent('info-play-group', {
-            detail: groupId
+            detail: group
         }));
     }
     _onWheelEvent(e) {
@@ -105,12 +47,12 @@ export default class PlayGroupBar extends LitElement {
             this.__sb && this.__sb.updateMetrics();
         }
         if (change.has('groupId')) {
-            var active = this.shadowRoot.querySelector('li[active]');
+            var active = this.renderRoot.querySelector('li[active]');
             active && active.scrollIntoView();
         }
     }
     firstUpdated() {
-        var scrollTarget = this.shadowRoot.querySelector('ul');
+        var scrollTarget = this.renderRoot.querySelector('ul');
         /* long-press */
         longpressable(scrollTarget);
         scrollTarget.addEventListener('mousewheel', this._onWheelEvent.bind(this), false);
@@ -123,6 +65,78 @@ export default class PlayGroupBar extends LitElement {
             }
         });
     }
-}
-window.customElements.define('play-group-bar', PlayGroupBar);
+};
+PlayGroupBar.styles = [
+    css `
+      :host {
+        background-color: var(--group-bar-background-color);
+
+        overflow-x: hidden;
+      }
+
+      ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+      }
+
+      li {
+        display: inline-block;
+        padding: 0px 3px;
+
+        border-bottom: var(--group-bar-line);
+      }
+
+      li[active] {
+        border-color: var(--group-bar-active-line-color);
+      }
+
+      li a {
+        display: block;
+        padding: 5px 4px 1px 4px;
+        text-decoration: none;
+        font: var(--group-bar-textbutton);
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      li[active] a {
+        font: var(--group-bar-textbutton-active);
+        color: rgba(255, 255, 255, 1);
+      }
+
+      li[padding] {
+        flex: 1;
+      }
+
+      li[add] {
+        padding: 5px 4px 1px 4px;
+      }
+
+      li[add] * {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      mwc-icon {
+        vertical-align: middle;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], PlayGroupBar.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PlayGroupBar.prototype, "groupId", void 0);
+__decorate([
+    property({ type: String, attribute: 'target-page' }),
+    __metadata("design:type", String)
+], PlayGroupBar.prototype, "targetPage", void 0);
+PlayGroupBar = __decorate([
+    customElement('play-group-bar')
+], PlayGroupBar);
+export default PlayGroupBar;
 //# sourceMappingURL=play-group-bar.js.map