@things-factory/board-ui 10.1.41 → 10.1.44

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

@@ -1 +1 @@
-{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-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,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAGtB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAwEI,QAAG,GAAW,OAAO,CAAA;IAsBhC,CAAC;aA7FQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEF;KACF,AAnEY,CAmEZ;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,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;uBAC/D,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,6BAA6B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAsB;YAClF,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,UAAU;gBACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB;gBAC9E,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB;;KAEvE,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAvB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAA0D;AAE5E;IAAR,KAAK,EAAE;;sCAAsB;AAxEnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8FrB","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 './board-basic-info.js'\nimport './board-versions.js'\nimport './board-info-link.js'\n\n@customElement('board-info')\nexport class BoardInfo 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      /*\n       * 탭은 **채움이 아니라 밑줄**로 표시한다.\n       *\n       * 이전에는 비활성 탭에 secondary, 활성 탭에 primary 를 배경으로 깔았다. 둘 다 강조 역할이라\n       * 다크 스킴에서 밝은 색이 되어(primary rgb(188 135 91)) 패널 상단에 탄색 블록이 생겼다.\n       * 헤더바·레일과 같은 부류의 오용이다.\n       *\n       * 탭 줄은 표면(surface-container)에 두고, 브랜드는 밑줄과 굵기로만 드러낸다.\n       * 라벨에 primary 를 쓰지 않는 이유: 대비가 팔레트에 따라 무너진다\n       * (operato-board 라이트 3.77, operato-twin 다크 2.61 — 본문 기준 4.5 미달).\n       */\n      [tab] {\n        width: 100%;\n        display: flex;\n        background-color: var(--md-sys-color-surface-container);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      [tab] > * {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      board-versions {\n        height: 100%;\n      }\n\n      span {\n        padding: 6px 4px 4px;\n        font: var(--group-bar-textbutton);\n        background-color: transparent;\n        color: var(--md-sys-color-on-surface-variant);\n        border-bottom: 2px solid transparent;\n        cursor: pointer;\n        text-align: center;\n        text-transform: uppercase;\n      }\n\n      span[active] {\n        color: var(--md-sys-color-on-surface);\n        font: var(--group-bar-textbutton-active);\n        border-bottom-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 }) board?: { id: string; name: string; description: 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 = 'versions')} ?active=${this.tab == 'versions'}>versions</span>\n        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`\n          : this.tab == 'versions'\n            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`\n            : html`<board-info-link .board=${this.board}></board-info-link>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-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,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D;;;GAGG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAKI,QAAG,GAAW,OAAO,CAAA;IAiChC,CAAC;aArCQ,WAAM,GAAG,CAAC,eAAe,EAAE,gBAAgB,CAAC,AAAtC,CAAsC;IAMnD,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;YACpE,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;uBAExC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;YAC1E,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;;uBAE9C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,MAAM;YAClE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;;uBAEtC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;YAC1E,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;;;;UAI3D,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAsB;YAClF,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,UAAU;gBACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB;gBAC9E,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,MAAM;oBAClB,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB;oBAChE,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,yBAAyB;;KAEjF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAA0D;AAE5E;IAAR,KAAK,EAAE;;sCAAsB;AALnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAsCrB","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 './board-basic-info.js'\nimport './board-versions.js'\nimport './board-info-link.js'\nimport './board-info-template.js'\nimport { InfoDialogStyles } from './info-dialog-styles.js'\n\n/**\n * The board dialog: basic form, release history, the headless link, and save-as-template, as four tabs\n * inside one popup card (the card's title bar carries the board's name).\n */\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [ScrollbarStyles, InfoDialogStyles]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: 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'}>\n          ${i18next.t('label.basic', { defaultValue: 'Basic' })}\n        </span>\n        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>\n          ${i18next.t('label.versions', { defaultValue: 'Versions' })}\n        </span>\n        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>\n          ${i18next.t('label.link', { defaultValue: 'Link' })}\n        </span>\n        <span @click=${() => (this.tab = 'template')} ?active=${this.tab == 'template'}>\n          ${i18next.t('label.template', { defaultValue: 'Template' })}\n        </span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`\n          : this.tab == 'versions'\n            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`\n            : this.tab == 'link'\n              ? html`<board-info-link .board=${this.board}></board-info-link>`\n              : html`<board-info-template .board=${this.board}></board-info-template>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/board-template-builder.d.ts

@@ -1,5 +1,6 @@
 import '@operato/i18n/ox-i18n.js';
 import { LitElement } from 'lit';
+import '@material/web/icon/icon.js';
 export declare class BoardTemplateBuilder extends LitElement {
     static styles: import("lit").CSSResult[];
     board?: {

package/dist-client/viewparts/board-template-builder.js

@@ -2,7 +2,9 @@ import { __decorate, __metadata } from "tslib";
 import '@operato/i18n/ox-i18n.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
+import { CommonPopupStyles, ScrollbarStyles } from '@operato/styles';
+import { InfoFormStyles } from './info-dialog-styles.js';
+import '@material/web/icon/icon.js';
 import { i18next } from '@operato/i18n';
 import { getPathInfo } from '@operato/utils';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
@@ -15,55 +17,24 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
     }
     static { this.styles = [
         ScrollbarStyles,
+        CommonPopupStyles,
+        InfoFormStyles,
         css `
       :host {
+        --popup-min-width: 0;
         display: flex;
-        padding: var(--spacing-large);
-
-        /* for narrow mode */
         flex-direction: column;
-      }
-
-      div[template] {
-        display: grid;
-        position: relative;
-        border-top: 1px solid var(--md-sys-color-primary);
-      }
-
-      label {
-        font: var(--label-font);
+        gap: var(--spacing-medium, 8px);
         color: var(--md-sys-color-on-surface);
-        text-transform: capitalize;
       }
 
-      input,
-      select,
-      textarea {
-        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
-        color: var(--input-field-color, var(--md-sys-color-on-surface));
-        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%;
+      .section {
+        margin-top: 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);
+        min-height: 72px;
+        resize: vertical;
       }
     `
     ]; }
@@ -72,35 +43,36 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
         const description = this.description || this.board?.description || '';
         const { domain } = getPathInfo(window.location.pathname);
         return html `
-      <div template>
-        <h3>
-          <ox-title-with-help topic="board-service/board-template" msgid="label.board-template"
-            >board template</ox-title-with-help
-          >
-        </h3>
-        <label for="name">${i18next.t('field.name')}</label>
-        <input id="name" type="text" .value=${name} @change=${e => (this.name = e.target.value)} />
+      <div class="section">
+        <ox-title-with-help topic="board-service/board-template" msgid="label.board-template">board template</ox-title-with-help>
+      </div>
+      <div class="note">
+        ${i18next.t('text.board-template hint', {
+            defaultValue: 'Keeps a copy of this board as a starting point for new boards.'
+        })}
+      </div>
 
-        <label for="description">${i18next.t('field.description')}</label>
-        <textarea
-          id="description"
-          .value=${this.description || ''}
-          @change=${e => (this.description = e.target.value)}
-        ></textarea>
+      <div class="fields">
+        <label>
+          ${i18next.t('field.name')}
+          <input id="name" type="text" .value=${name} @change=${e => (this.name = e.target.value)} />
+        </label>
 
-        <label>${i18next.t('field.visibility')}</label>
-        <select
-          @change=${e => (this.visibility = e.target.value)}
-          placeholder="choose visibility ..."
-          .value=${this.visibility || 'private'}
-        >
-          <option value="private">${i18next.t('label.visibility-private')}</option>
-          ${domain ? html ` <option value="domain">${i18next.t('label.visibility-domain')}</option> ` : nothing}
-          <option value="public">${i18next.t('label.visibility-public')}</option>
-        </select>
+        <label>
+          ${i18next.t('field.description')}
+          <textarea id="description" .value=${this.description || ''} @change=${e => (this.description = e.target.value)}></textarea>
+        </label>
 
-        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>
+        <label>
+          ${i18next.t('field.visibility')}
+          <select @change=${e => (this.visibility = e.target.value)} .value=${this.visibility || 'private'}>
+            <option value="private">${i18next.t('label.visibility-private')}</option>
+            ${domain ? html ` <option value="domain">${i18next.t('label.visibility-domain')}</option> ` : nothing}
+            <option value="public">${i18next.t('label.visibility-public')}</option>
+          </select>
+        </label>
       </div>
+
     `;
     }
     async registerBoardAsTemplate() {

package/dist-client/viewparts/board-template-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-template-builder.js","sourceRoot":"","sources":["../../client/viewparts/board-template-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { getPathInfo } from '@operato/utils'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('board-template-builder')\nexport class BoardTemplateBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-large);\n\n        /* for narrow mode */\n        flex-direction: column;\n      }\n\n      div[template] {\n        display: grid;\n        position: relative;\n        border-top: 1px solid var(--md-sys-color-primary);\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--md-sys-color-on-surface);\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      textarea {\n        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        color: var(--input-field-color, var(--md-sys-color-on-surface));\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  ]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: string }\n\n  @state() visibility?: string = 'private'\n  @state() name?: string = ''\n  @state() description?: string = ''\n\n  render() {\n    const name = this.name || this.board?.name || ''\n    const description = this.description || this.board?.description || ''\n    const { domain } = getPathInfo(window.location.pathname)\n\n    return html`\n      <div template>\n        <h3>\n          <ox-title-with-help topic=\"board-service/board-template\" msgid=\"label.board-template\"\n            >board template</ox-title-with-help\n          >\n        </h3>\n        <label for=\"name\">${i18next.t('field.name')}</label>\n        <input id=\"name\" type=\"text\" .value=${name} @change=${e => (this.name = e.target.value)} />\n\n        <label for=\"description\">${i18next.t('field.description')}</label>\n        <textarea\n          id=\"description\"\n          .value=${this.description || ''}\n          @change=${e => (this.description = e.target.value)}\n        ></textarea>\n\n        <label>${i18next.t('field.visibility')}</label>\n        <select\n          @change=${e => (this.visibility = e.target.value)}\n          placeholder=\"choose visibility ...\"\n          .value=${this.visibility || 'private'}\n        >\n          <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n          ${domain ? html` <option value=\"domain\">${i18next.t('label.visibility-domain')}</option> ` : nothing}\n          <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n        </select>\n\n        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>\n      </div>\n    `\n  }\n\n  async registerBoardAsTemplate() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const { id } = this.board || {}\n\n      this.dispatchEvent(\n        new CustomEvent('register-template', {\n          detail: {\n            id,\n            name: this.name || this.board?.name,\n            description: this.description || this.board?.description,\n            visibility: this.visibility\n          },\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"board-template-builder.js","sourceRoot":"","sources":["../../client/viewparts/board-template-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { CommonPopupStyles, ScrollbarStyles } from '@operato/styles'\nimport { InfoFormStyles } from './info-dialog-styles.js'\nimport '@material/web/icon/icon.js'\nimport { i18next } from '@operato/i18n'\nimport { getPathInfo } from '@operato/utils'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('board-template-builder')\nexport class BoardTemplateBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    CommonPopupStyles,\n    InfoFormStyles,\n    css`\n      :host {\n        --popup-min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .section {\n        margin-top: 0;\n      }\n\n      textarea {\n        min-height: 72px;\n        resize: vertical;\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: string }\n\n  @state() visibility?: string = 'private'\n  @state() name?: string = ''\n  @state() description?: string = ''\n\n  render() {\n    const name = this.name || this.board?.name || ''\n    const description = this.description || this.board?.description || ''\n    const { domain } = getPathInfo(window.location.pathname)\n\n    return html`\n      <div class=\"section\">\n        <ox-title-with-help topic=\"board-service/board-template\" msgid=\"label.board-template\">board template</ox-title-with-help>\n      </div>\n      <div class=\"note\">\n        ${i18next.t('text.board-template hint', {\n          defaultValue: 'Keeps a copy of this board as a starting point for new boards.'\n        })}\n      </div>\n\n      <div class=\"fields\">\n        <label>\n          ${i18next.t('field.name')}\n          <input id=\"name\" type=\"text\" .value=${name} @change=${e => (this.name = e.target.value)} />\n        </label>\n\n        <label>\n          ${i18next.t('field.description')}\n          <textarea id=\"description\" .value=${this.description || ''} @change=${e => (this.description = e.target.value)}></textarea>\n        </label>\n\n        <label>\n          ${i18next.t('field.visibility')}\n          <select @change=${e => (this.visibility = e.target.value)} .value=${this.visibility || 'private'}>\n            <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n            ${domain ? html` <option value=\"domain\">${i18next.t('label.visibility-domain')}</option> ` : nothing}\n            <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n          </select>\n        </label>\n      </div>\n\n    `\n  }\n\n  async registerBoardAsTemplate() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const { id } = this.board || {}\n\n      this.dispatchEvent(\n        new CustomEvent('register-template', {\n          detail: {\n            id,\n            name: this.name || this.board?.name,\n            description: this.description || this.board?.description,\n            visibility: this.visibility\n          },\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n}\n"]}

package/dist-client/viewparts/board-template-info.d.ts

@@ -1,4 +1,7 @@
 import { LitElement } from 'lit';
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
 export declare class BoardTemplateInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     constructor();

package/dist-client/viewparts/board-template-info.js

@@ -6,111 +6,24 @@ import { store } from '@operato/shell';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup';
-import { ScrollbarStyles } from '@operato/styles';
+import { CommonPopupStyles } from '@operato/styles';
+import { InfoFormStyles } from './info-dialog-styles.js';
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
 import { notify } from '../utils/notify-helper.js';
 let BoardTemplateInfo = class BoardTemplateInfo extends LitElement {
     static { this.styles = [
-        ScrollbarStyles,
+        CommonPopupStyles,
+        InfoFormStyles,
         css `
-      :host {
-        height: 100%;
-        min-width: 360px;
-
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      form {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-gap: var(--form-grid-gap);
-        grid-auto-rows: minmax(24px, auto);
-        padding: var(--padding-wide);
-        align-items: center;
-
-        --form-grid-gap: 2px 0;
-        --input-field-padding: var(--padding-default);
-        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
-        --mdc-button-horizontal-padding: var(--padding-default);
-      }
-
-      [buttons] {
-        grid-column: span 12;
-        padding: var(--padding-default) 0;
-        text-align: right;
-      }
-
-      [buttons] * {
-        margin: 0 0 0 var(--margin-narrow);
-      }
-
-      [danger] {
-        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
-        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
-        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
-      }
-
-      fieldset {
-        display: contents;
-      }
-      legend {
-        grid-column: span 12;
-        padding: var(--legend-padding);
-        font: var(--legend-font);
-        color: var(--primary-color);
-        text-transform: capitalize;
-      }
-      label {
-        grid-column: span 12;
-        text-transform: capitalize;
-        color: var(--label-color);
-        font: var(--label-font);
-      }
-
-      input,
-      textarea,
-      select {
-        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
-        color: var(--input-field-color, var(--md-sys-color-on-surface));
-        grid-column: span 12;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        padding: 6px 8px;
-        font-size: 1rem;
-        margin-bottom: 8px;
-      }
       textarea {
-        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
-        color: var(--input-field-color, var(--md-sys-color-on-surface));
-        min-height: 100px;
-        resize: none;
-      }
-      div[buttons] {
-        grid-column: span 12;
-        text-align: right;
-        margin-top: 12px;
-      }
-      button {
-        margin-left: 8px;
-        padding: 6px 16px;
-        border-radius: 4px;
-        border: none;
-        background: var(--md-sys-color-tertiary, #1976d2);
-        color: #fff;
-        font-weight: 500;
-        cursor: pointer;
-      }
-      button[disabled] {
-        background: #ccc;
-        cursor: not-allowed;
+        min-height: 72px;
+        resize: vertical;
       }
 
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
+      .buttons [filler] {
+        flex: 1;
       }
     `
     ]; }
@@ -140,45 +53,71 @@ let BoardTemplateInfo = class BoardTemplateInfo extends LitElement {
         return this.template?.creator?.username === this.username;
     }
     render() {
+        const template = this.template || {};
+        const mine = this.isMine;
+        const when = (value) => (value ? new Date(value).toLocaleString() : '');
         return html `
       <form>
-        <fieldset>
-          <legend>${i18next.t('label.board-template')}</legend>
-          <label>${i18next.t('field.name')}</label>
-          <input
-            name="name"
-            .value=${this.template.name}
-            @input=${e => (this.template.name = e.target.value)}
-            ?disabled=${!this.isMine}
-          />
-          <label>${i18next.t('field.description')}</label>
-          <textarea
-            name="description"
-            .value=${this.template.description}
-            @input=${e => (this.template.description = e.target.value)}
-            ?disabled=${!this.isMine}
-          ></textarea>
-          <label>${i18next.t('field.visibility')}</label>
-          <select
-            name="visibility"
-            .value=${this.template.visibility}
-            @change=${e => (this.template.visibility = e.target.value)}
-            ?disabled=${!this.isMine}
-          >
-            <option value="private">${i18next.t('label.visibility-private')}</option>
-            <option value="domain">${i18next.t('label.visibility-domain')}</option>
-            <option value="public">${i18next.t('label.visibility-public')}</option>
-          </select>
-          <div buttons>
-            ${this.isMine
-            ? html `
-                  <button type="button" @click=${this.onUpdate}>${i18next.t('button.save')}</button>
-                  <button type="button" @click=${this.onDelete}>${i18next.t('button.delete')}</button>
-                `
-            : ''}
-          </div>
-        </fieldset>
+        <div class="fields">
+          <label>
+            ${i18next.t('field.name')}
+            <input
+              name="name"
+              .value=${template.name || ''}
+              @input=${e => (this.template.name = e.target.value)}
+              ?disabled=${!mine}
+            />
+          </label>
+          <label>
+            ${i18next.t('field.description')}
+            <textarea
+              name="description"
+              .value=${template.description || ''}
+              @input=${e => (this.template.description = e.target.value)}
+              ?disabled=${!mine}
+            ></textarea>
+          </label>
+          <label>
+            ${i18next.t('field.visibility')}
+            <select
+              name="visibility"
+              .value=${template.visibility || 'private'}
+              @change=${e => (this.template.visibility = e.target.value)}
+              ?disabled=${!mine}
+            >
+              <option value="private">${i18next.t('label.visibility-private')}</option>
+              <option value="domain">${i18next.t('label.visibility-domain')}</option>
+              <option value="public">${i18next.t('label.visibility-public')}</option>
+            </select>
+          </label>
+        </div>
       </form>
+
+      <div class="provenance">
+        <span>${i18next.t('label.creator')} <b>${template.creator?.name || '-'}</b> ${when(template.createdAt)}</span>
+        ${mine
+            ? ''
+            : html `<span>${i18next.t('text.only the creator can edit a template', {
+                defaultValue: 'Only the creator can change a template.'
+            })}</span>`}
+      </div>
+
+      <div class="buttons">
+        ${mine
+            ? html `
+              <md-text-button cap danger @click=${this.onDelete}>
+                <md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}
+              </md-text-button>
+              <div filler></div>
+              <md-filled-button cap @click=${this.onUpdate}>
+                <md-icon slot="icon">save</md-icon>${i18next.t('button.save')}
+              </md-filled-button>
+            `
+            : html `
+              <div filler></div>
+              <md-text-button cap @click=${() => history.back()}>${i18next.t('button.close', { defaultValue: 'close' })}</md-text-button>
+            `}
+      </div>
     `;
     }
     async onUpdate() {
@@ -203,6 +142,7 @@ let BoardTemplateInfo = class BoardTemplateInfo extends LitElement {
             });
             notify('info', i18next.t('text.board-template updated'));
             this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }));
+            history.back();
         }
         catch (ex) {
             notify('error', ex, ex);
@@ -226,6 +166,7 @@ let BoardTemplateInfo = class BoardTemplateInfo extends LitElement {
                 });
                 notify('info', i18next.t('text.board-template deleted'));
                 this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }));
+                history.back();
             }
             catch (ex) {
                 notify('error', ex, ex);

package/dist-client/viewparts/board-template-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-template-info.js","sourceRoot":"","sources":["../../client/viewparts/board-template-info.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport gql from 'graphql-tag'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { notify } from '../utils/notify-helper.js'\n\n@customElement('board-template-info')\nexport class BoardTemplateInfo 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      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(--padding-wide);\n        align-items: center;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--padding-default);\n        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        --mdc-button-horizontal-padding: var(--padding-default);\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--padding-default) 0;\n        text-align: right;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 var(--margin-narrow);\n      }\n\n      [danger] {\n        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);\n        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);\n        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);\n      }\n\n      fieldset {\n        display: contents;\n      }\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--primary-color);\n        text-transform: capitalize;\n      }\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--label-color);\n        font: var(--label-font);\n      }\n\n      input,\n      textarea,\n      select {\n        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        color: var(--input-field-color, var(--md-sys-color-on-surface));\n        grid-column: span 12;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        padding: 6px 8px;\n        font-size: 1rem;\n        margin-bottom: 8px;\n      }\n      textarea {\n        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        color: var(--input-field-color, var(--md-sys-color-on-surface));\n        min-height: 100px;\n        resize: none;\n      }\n      div[buttons] {\n        grid-column: span 12;\n        text-align: right;\n        margin-top: 12px;\n      }\n      button {\n        margin-left: 8px;\n        padding: 6px 16px;\n        border-radius: 4px;\n        border: none;\n        background: var(--md-sys-color-tertiary, #1976d2);\n        color: #fff;\n        font-weight: 500;\n        cursor: pointer;\n      }\n      button[disabled] {\n        background: #ccc;\n        cursor: not-allowed;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  constructor() {\n    super()\n    this.template = {\n      name: '',\n      description: '',\n      visibility: 'private'\n    }\n  }\n\n  @property({ type: Object }) template: any\n  @state() username: string = ''\n\n  @query('form') form!: HTMLFormElement\n\n  private _unsubscribe?: () => void\n\n\n  connectedCallback() {\n\n    super.connectedCallback()\n\n    this._applyState()\n\n    this._unsubscribe = store.subscribe(() => this._applyState())\n\n  }\n\n\n  disconnectedCallback() {\n\n    super.disconnectedCallback()\n\n    this._unsubscribe?.()\n\n  }\n\n\n  private _applyState() {\n\n    const __state__ = store.getState() as any\nthis.username = __state__.auth?.user?.username || ''\n\n  }\n\n  get isMine() {\n    return this.template?.creator?.username === this.username\n  }\n\n  render() {\n    return html`\n      <form>\n        <fieldset>\n          <legend>${i18next.t('label.board-template')}</legend>\n          <label>${i18next.t('field.name')}</label>\n          <input\n            name=\"name\"\n            .value=${this.template.name}\n            @input=${e => (this.template.name = e.target.value)}\n            ?disabled=${!this.isMine}\n          />\n          <label>${i18next.t('field.description')}</label>\n          <textarea\n            name=\"description\"\n            .value=${this.template.description}\n            @input=${e => (this.template.description = e.target.value)}\n            ?disabled=${!this.isMine}\n          ></textarea>\n          <label>${i18next.t('field.visibility')}</label>\n          <select\n            name=\"visibility\"\n            .value=${this.template.visibility}\n            @change=${e => (this.template.visibility = e.target.value)}\n            ?disabled=${!this.isMine}\n          >\n            <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n            <option value=\"domain\">${i18next.t('label.visibility-domain')}</option>\n            <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n          </select>\n          <div buttons>\n            ${this.isMine\n              ? html`\n                  <button type=\"button\" @click=${this.onUpdate}>${i18next.t('button.save')}</button>\n                  <button type=\"button\" @click=${this.onDelete}>${i18next.t('button.delete')}</button>\n                `\n              : ''}\n          </div>\n        </fieldset>\n      </form>\n    `\n  }\n\n  async onUpdate() {\n    const formData = new FormData(this.form)\n    const patch: any = {}\n    for (const [key, value] of formData.entries()) {\n      patch[key] = value\n    }\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: BoardTemplatePatch!) {\n            updateBoardTemplate(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id: this.template.id,\n          patch\n        }\n      })\n      notify('info', i18next.t('text.board-template updated'))\n      this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }))\n    } catch (ex) {\n      notify('error', ex, ex)\n    }\n  }\n\n  async onDelete() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      try {\n        await client.mutate({\n          mutation: gql`\n            mutation ($id: String!) {\n              deleteBoardTemplate(id: $id)\n            }\n          `,\n          variables: { id: this.template.id }\n        })\n        notify('info', i18next.t('text.board-template deleted'))\n        this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }))\n      } catch (ex) {\n        notify('error', ex, ex)\n      }\n    }\n  }\n\n}\n"]}
+{"version":3,"file":"board-template-info.js","sourceRoot":"","sources":["../../client/viewparts/board-template-info.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport gql from 'graphql-tag'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup'\nimport { CommonPopupStyles } from '@operato/styles'\nimport { InfoFormStyles } from './info-dialog-styles.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport { notify } from '../utils/notify-helper.js'\n\n@customElement('board-template-info')\nexport class BoardTemplateInfo extends LitElement {\n  static styles = [\n    CommonPopupStyles,\n    InfoFormStyles,\n    css`\n      textarea {\n        min-height: 72px;\n        resize: vertical;\n      }\n\n      .buttons [filler] {\n        flex: 1;\n      }\n    `\n  ]\n\n  constructor() {\n    super()\n    this.template = {\n      name: '',\n      description: '',\n      visibility: 'private'\n    }\n  }\n\n  @property({ type: Object }) template: any\n  @state() username: string = ''\n\n  @query('form') form!: HTMLFormElement\n\n  private _unsubscribe?: () => void\n\n\n  connectedCallback() {\n\n    super.connectedCallback()\n\n    this._applyState()\n\n    this._unsubscribe = store.subscribe(() => this._applyState())\n\n  }\n\n\n  disconnectedCallback() {\n\n    super.disconnectedCallback()\n\n    this._unsubscribe?.()\n\n  }\n\n\n  private _applyState() {\n\n    const __state__ = store.getState() as any\nthis.username = __state__.auth?.user?.username || ''\n\n  }\n\n  get isMine() {\n    return this.template?.creator?.username === this.username\n  }\n\n  render() {\n    const template = this.template || {}\n    const mine = this.isMine\n    const when = (value?: string) => (value ? new Date(value).toLocaleString() : '')\n\n    return html`\n      <form>\n        <div class=\"fields\">\n          <label>\n            ${i18next.t('field.name')}\n            <input\n              name=\"name\"\n              .value=${template.name || ''}\n              @input=${e => (this.template.name = e.target.value)}\n              ?disabled=${!mine}\n            />\n          </label>\n          <label>\n            ${i18next.t('field.description')}\n            <textarea\n              name=\"description\"\n              .value=${template.description || ''}\n              @input=${e => (this.template.description = e.target.value)}\n              ?disabled=${!mine}\n            ></textarea>\n          </label>\n          <label>\n            ${i18next.t('field.visibility')}\n            <select\n              name=\"visibility\"\n              .value=${template.visibility || 'private'}\n              @change=${e => (this.template.visibility = e.target.value)}\n              ?disabled=${!mine}\n            >\n              <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n              <option value=\"domain\">${i18next.t('label.visibility-domain')}</option>\n              <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n            </select>\n          </label>\n        </div>\n      </form>\n\n      <div class=\"provenance\">\n        <span>${i18next.t('label.creator')} <b>${template.creator?.name || '-'}</b> ${when(template.createdAt)}</span>\n        ${mine\n          ? ''\n          : html`<span>${i18next.t('text.only the creator can edit a template', {\n              defaultValue: 'Only the creator can change a template.'\n            })}</span>`}\n      </div>\n\n      <div class=\"buttons\">\n        ${mine\n          ? html`\n              <md-text-button cap danger @click=${this.onDelete}>\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.onUpdate}>\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-text-button cap @click=${() => history.back()}>${i18next.t('button.close', { defaultValue: 'close' })}</md-text-button>\n            `}\n      </div>\n    `\n  }\n\n  async onUpdate() {\n    const formData = new FormData(this.form)\n    const patch: any = {}\n    for (const [key, value] of formData.entries()) {\n      patch[key] = value\n    }\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: BoardTemplatePatch!) {\n            updateBoardTemplate(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id: this.template.id,\n          patch\n        }\n      })\n      notify('info', i18next.t('text.board-template updated'))\n      this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }))\n      history.back()\n    } catch (ex) {\n      notify('error', ex, ex)\n    }\n  }\n\n  async onDelete() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      try {\n        await client.mutate({\n          mutation: gql`\n            mutation ($id: String!) {\n              deleteBoardTemplate(id: $id)\n            }\n          `,\n          variables: { id: this.template.id }\n        })\n        notify('info', i18next.t('text.board-template deleted'))\n        this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }))\n        history.back()\n      } catch (ex) {\n        notify('error', ex, ex)\n      }\n    }\n  }\n\n}\n"]}

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

@@ -1,13 +1,18 @@
 import '@material/web/icon/icon.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/button/elevated-button.js';
-import '@operato/input/ox-input-file.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
 import { LitElement } from 'lit';
+/**
+ * The group form: a name, a description, and one commit button. Who made it and when is a
+ * side note that only exists for a group that exists - a new group used to show two rows of
+ * "Invalid Date" here.
+ */
 export declare class GroupInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     groupId?: string;
     group: any;
     render(): import("lit-html").TemplateResult<1>;
+    private renderProvenance;
     updated(changes: any): void;
     firstUpdated(): void;
     refresh(): Promise<void>;