@things-factory/board-ui 10.1.40 → 10.1.42

package/dist-client/viewparts/info-dialog-styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The frame the three info dialogs share - board, group, play group.
+ *
+ * They open through openPopup (a centered card with its own title bar and close button), so this
+ * owns only what is inside the card: an optional tab strip and a scrolling body. The tabs are the
+ * underline kind the page title bar uses, not filled blocks - a filled tab strip inside a card
+ * reads as a second header fighting the card's own.
+ *
+ * Height follows the card. A small card (the group forms) is content-sized; a medium card (board)
+ * is viewport-sized, and the body scrolls inside it. Both work because the host takes 100% and
+ * the body is the one flex child allowed to shrink.
+ */
+export declare const InfoDialogStyles: import("lit").CSSResult;
+/**
+ * The one form vocabulary the group and play-group dialogs use on top of CommonPopupStyles:
+ * a stack of fields, a quiet provenance line, and the action row. Kept next to the frame so the
+ * two forms cannot drift apart again (they had: same form, two sets of margins and button kinds).
+ */
+export declare const InfoFormStyles: import("lit").CSSResult;

package/dist-client/viewparts/info-dialog-styles.js

@@ -0,0 +1,194 @@
+import { css } from 'lit';
+/**
+ * The frame the three info dialogs share - board, group, play group.
+ *
+ * They open through openPopup (a centered card with its own title bar and close button), so this
+ * owns only what is inside the card: an optional tab strip and a scrolling body. The tabs are the
+ * underline kind the page title bar uses, not filled blocks - a filled tab strip inside a card
+ * reads as a second header fighting the card's own.
+ *
+ * Height follows the card. A small card (the group forms) is content-sized; a medium card (board)
+ * is viewport-sized, and the body scrolls inside it. Both work because the host takes 100% and
+ * the body is the one flex child allowed to shrink.
+ */
+export const InfoDialogStyles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    box-sizing: border-box;
+    /* One surface for every dialog; the theme sets --info-dialog-surface per scheme. */
+    background-color: var(--info-dialog-surface, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));
+    color: var(--md-sys-color-on-surface);
+  }
+
+  [tab] {
+    flex: none;
+    display: flex;
+    gap: var(--spacing-large, 16px);
+    padding: 0 var(--spacing-large, 16px);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  [tab] > span {
+    padding: 10px 2px 8px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--md-sys-color-on-surface-variant);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [tab] > span:hover {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  [tab] > span[active] {
+    color: var(--md-sys-color-on-surface);
+    border-bottom-color: var(--md-sys-color-primary);
+  }
+
+  [content] {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  [content] > * {
+    flex: 1;
+    min-height: 0;
+  }
+`;
+/**
+ * The one form vocabulary the group and play-group dialogs use on top of CommonPopupStyles:
+ * a stack of fields, a quiet provenance line, and the action row. Kept next to the frame so the
+ * two forms cannot drift apart again (they had: same form, two sets of margins and button kinds).
+ */
+export const InfoFormStyles = css `
+  :host {
+    --popup-min-width: 0;
+    background: var(--info-dialog-surface, var(--ui-bg, #ffffff));
+  }
+
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium, 8px);
+  }
+
+  /*
+   * Inputs lighter than Material's filled field: a label over a thin-bordered box, the way the
+   * suite's own create-domain popup draws them. The filled field's grey slab and underline made a
+   * two-field dialog look heavier than the page behind it.
+   */
+  .fields label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: var(--popup-font-size-small);
+    color: var(--md-sys-color-on-surface-variant);
+    /* Translations arrive in mixed case ("Name", "description"); one case for one form. */
+    text-transform: capitalize;
+  }
+
+  .fields label > input,
+  .fields label > textarea,
+  .fields label > select {
+    text-transform: none;
+  }
+
+  /* A button whose label comes from a lower-case translation ("save") says so with [cap]; labels
+   * written in sentence case here ("Open in modeller") are left alone. */
+  md-filled-button[cap],
+  md-outlined-button[cap],
+  md-text-button[cap] {
+    text-transform: capitalize;
+  }
+
+  .fields input,
+  .fields textarea,
+  .fields select {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-small, 6px);
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+    font: inherit;
+    font-size: var(--popup-font-size);
+  }
+
+  .fields input:focus,
+  .fields textarea:focus,
+  .fields select:focus {
+    outline: none;
+    border-color: var(--md-sys-color-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
+  }
+
+  /* A section's name: small caps in the muted tone, never a heading competing with the title bar. */
+  .section {
+    margin-top: var(--spacing-medium, 8px);
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  /* Read-only value with a copy affordance beside it (a link, an id). */
+  .copyable {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-small, 4px);
+  }
+
+  .copyable input {
+    flex: 1;
+    min-width: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface-variant);
+    background: var(--md-sys-color-surface-container-low);
+  }
+
+  .copyable md-icon-button {
+    --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-icon-button-icon-size: 18px;
+  }
+
+  /* Who made it and when - a side note under the fields, never a row of its own with icons. */
+  .provenance {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px var(--spacing-large, 16px);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--popup-font-size-small);
+    line-height: var(--popup-line-height);
+  }
+
+  .provenance b {
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .buttons [filler] {
+    flex: 1;
+  }
+
+  /* The irreversible action is a quiet text button on the far left, in the error colour. */
+  md-text-button[danger] {
+    --md-text-button-label-text-color: var(--md-sys-color-error);
+    --md-text-button-icon-color: var(--md-sys-color-error);
+    --md-text-button-hover-label-text-color: var(--md-sys-color-error);
+    --md-text-button-hover-state-layer-color: var(--md-sys-color-error);
+  }
+`;
+//# sourceMappingURL=info-dialog-styles.js.map

package/dist-client/viewparts/info-dialog-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-dialog-styles.js","sourceRoot":"","sources":["../../client/viewparts/info-dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDlC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHhC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The frame the three info dialogs share - board, group, play group.\n *\n * They open through openPopup (a centered card with its own title bar and close button), so this\n * owns only what is inside the card: an optional tab strip and a scrolling body. The tabs are the\n * underline kind the page title bar uses, not filled blocks - a filled tab strip inside a card\n * reads as a second header fighting the card's own.\n *\n * Height follows the card. A small card (the group forms) is content-sized; a medium card (board)\n * is viewport-sized, and the body scrolls inside it. Both work because the host takes 100% and\n * the body is the one flex child allowed to shrink.\n */\nexport const InfoDialogStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    box-sizing: border-box;\n    /* One surface for every dialog; the theme sets --info-dialog-surface per scheme. */\n    background-color: var(--info-dialog-surface, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));\n    color: var(--md-sys-color-on-surface);\n  }\n\n  [tab] {\n    flex: none;\n    display: flex;\n    gap: var(--spacing-large, 16px);\n    padding: 0 var(--spacing-large, 16px);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n\n  [tab] > span {\n    padding: 10px 2px 8px;\n    font-size: 0.78rem;\n    font-weight: 500;\n    letter-spacing: 0.03em;\n    text-transform: uppercase;\n    color: var(--md-sys-color-on-surface-variant);\n    border-bottom: 2px solid transparent;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  [tab] > span:hover {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  [tab] > span[active] {\n    color: var(--md-sys-color-on-surface);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n\n  [content] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n  }\n\n  [content] > * {\n    flex: 1;\n    min-height: 0;\n  }\n`\n\n/**\n * The one form vocabulary the group and play-group dialogs use on top of CommonPopupStyles:\n * a stack of fields, a quiet provenance line, and the action row. Kept next to the frame so the\n * two forms cannot drift apart again (they had: same form, two sets of margins and button kinds).\n */\nexport const InfoFormStyles = css`\n  :host {\n    --popup-min-width: 0;\n    background: var(--info-dialog-surface, var(--ui-bg, #ffffff));\n  }\n\n  .fields {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-medium, 8px);\n  }\n\n  /*\n   * Inputs lighter than Material's filled field: a label over a thin-bordered box, the way the\n   * suite's own create-domain popup draws them. The filled field's grey slab and underline made a\n   * two-field dialog look heavier than the page behind it.\n   */\n  .fields label {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    font-size: var(--popup-font-size-small);\n    color: var(--md-sys-color-on-surface-variant);\n    /* Translations arrive in mixed case (\"Name\", \"description\"); one case for one form. */\n    text-transform: capitalize;\n  }\n\n  .fields label > input,\n  .fields label > textarea,\n  .fields label > select {\n    text-transform: none;\n  }\n\n  /* A button whose label comes from a lower-case translation (\"save\") says so with [cap]; labels\n   * written in sentence case here (\"Open in modeller\") are left alone. */\n  md-filled-button[cap],\n  md-outlined-button[cap],\n  md-text-button[cap] {\n    text-transform: capitalize;\n  }\n\n  .fields input,\n  .fields textarea,\n  .fields select {\n    box-sizing: border-box;\n    width: 100%;\n    padding: 8px 10px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: var(--md-sys-shape-corner-small, 6px);\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n    font: inherit;\n    font-size: var(--popup-font-size);\n  }\n\n  .fields input:focus,\n  .fields textarea:focus,\n  .fields select:focus {\n    outline: none;\n    border-color: var(--md-sys-color-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);\n  }\n\n  /* A section's name: small caps in the muted tone, never a heading competing with the title bar. */\n  .section {\n    margin-top: var(--spacing-medium, 8px);\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  /* Read-only value with a copy affordance beside it (a link, an id). */\n  .copyable {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-small, 4px);\n  }\n\n  .copyable input {\n    flex: 1;\n    min-width: 0;\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.76rem;\n    color: var(--md-sys-color-on-surface-variant);\n    background: var(--md-sys-color-surface-container-low);\n  }\n\n  .copyable md-icon-button {\n    --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);\n    --md-icon-button-icon-size: 18px;\n  }\n\n  /* Who made it and when - a side note under the fields, never a row of its own with icons. */\n  .provenance {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 2px var(--spacing-large, 16px);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--popup-font-size-small);\n    line-height: var(--popup-line-height);\n  }\n\n  .provenance b {\n    font-weight: 500;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .buttons [filler] {\n    flex: 1;\n  }\n\n  /* The irreversible action is a quiet text button on the far left, in the error colour. */\n  md-text-button[danger] {\n    --md-text-button-label-text-color: var(--md-sys-color-error);\n    --md-text-button-icon-color: var(--md-sys-color-error);\n    --md-text-button-hover-label-text-color: var(--md-sys-color-error);\n    --md-text-button-hover-state-layer-color: var(--md-sys-color-error);\n  }\n`\n"]}

package/dist-client/viewparts/link-builder.d.ts

@@ -2,6 +2,7 @@ import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import '@operato/input/ox-input-key-values.js';
 import { LitElement, PropertyValues } from 'lit';
+import '@material/web/iconbutton/icon-button.js';
 export declare class LinkBuilder extends LitElement {
     static styles: import("lit").CSSResult[];
     command?: string;
@@ -17,6 +18,8 @@ export declare class LinkBuilder extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;
+    /** Copies the current link; the tab's footer button calls this. */
+    copyLink(): Promise<void>;
     objectToQueryString(obj: any): string;
     getAppliances(): Promise<void>;
 }

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

@@ -7,7 +7,9 @@ import Clipboard from 'clipboard';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
-import { ScrollbarStyles } from '@operato/styles';
+import { CommonPopupStyles, ScrollbarStyles } from '@operato/styles';
+import { InfoFormStyles } from './info-dialog-styles.js';
+import '@material/web/iconbutton/icon-button.js';
 import { i18next } from '@operato/i18n';
 import { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client/index.js';
 let LinkBuilder = class LinkBuilder extends LitElement {
@@ -18,120 +20,112 @@ let LinkBuilder = class LinkBuilder extends LitElement {
     }
     static { this.styles = [
         ScrollbarStyles,
+        CommonPopupStyles,
+        InfoFormStyles,
         css `
       :host {
+        --popup-min-width: 0;
         display: flex;
-        padding: var(--spacing-large);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-
-        /* for narrow mode */
         flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        color: var(--md-sys-color-on-surface);
       }
 
-      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 {
-        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: 132px;
-        resize: none;
+      .section {
+        margin-top: 0;
       }
 
-      select:focus,
-      input:focus,
-      textarea:focus,
-      button {
-        outline: none;
+      .fields label[inline] {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
       }
 
-      button:hover {
-        border: var(--button-activ-border);
-        box-shadow: var(--button-active-box-shadow);
+      .fields label[inline] input[type='checkbox'] {
+        width: auto;
+        margin: 0;
+        accent-color: var(--md-sys-color-primary);
       }
 
-      [button-in-field] {
-        position: absolute;
-        top: 64px;
-        right: 6px;
-
+      ox-input-key-values {
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        padding: 4px;
         background-color: var(--md-sys-color-surface);
-        opacity: 0.8;
-        color: var(--md-sys-color-primary);
       }
 
       [warn] {
-        color: var(--status-warning-color, red);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--popup-font-size-small);
       }
     `
     ]; }
     render() {
         return html `
-      <div link>
-        <h3>
-          <ox-title-with-help topic="operato-board/headless-link" msgid="label.headless-link"
-            >headless-link</ox-title-with-help
-          >
-        </h3>
-        <textarea id="link" .value=${this.link || ''} readonly></textarea>
-        <md-icon button-in-field clipboard-copy>content_copy</md-icon>
-        <label for="key">${i18next.t('label.headless-link query-key')}</label>
-        <input id="key" type="text" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />
-        <label>${i18next.t('label.headless-link query-parameters')}</label>
-        <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>
-        <label>${i18next.t('label.headless-link target-appliance')}</label>
+      <div class="section">
+        <ox-title-with-help topic="operato-board/headless-link" msgid="label.headless-link">headless link</ox-title-with-help>
+      </div>
+      <div class="note">
+        ${i18next.t('text.headless-link hint', {
+            defaultValue: 'Opens this board full screen with no application chrome - for a wall display or a kiosk.'
+        })}
+      </div>
+
+      <div class="fields">
+        <div class="copyable">
+          <input id="link" type="text" .value=${this.link || ''} readonly @focus=${e => e.target.select()} />
+          <md-icon-button clipboard-copy title=${i18next.t('button.copy-url', { defaultValue: 'Copy link' })}>
+            <md-icon>content_copy</md-icon>
+          </md-icon-button>
+        </div>
+
+        <div class="row">
+          <label>
+            ${i18next.t('label.headless-link query-key')}
+            <input id="key" type="text" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />
+          </label>
+          <label>
+            ${i18next.t('label.headless-link target-appliance')}
+            ${privileged({ privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true }, html `
+                <select
+                  @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}
+                  .value=${this.targetAppliance?.id}
+                >
+                  <option value=""></option>
+                  ${this.appliances.map(appliance => html `
+                      <option .value=${appliance.id} ?selected=${appliance.id == this.targetAppliance?.id}>
+                        ${appliance.name}
+                      </option>
+                    `)}
+                </select>
+              `, html `<span warn>
+                ${i18next.t('text.appliance token needs security privilege', {
+            defaultValue: 'Adding an access token needs domain-owner or security query permission.'
+        })}
+              </span>`)}
+          </label>
+        </div>
 
-        ${privileged({ privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true }, html `
-            <select
-              @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}
-              placeholder="choose appliance ..."
-              .value=${this.targetAppliance?.id}
-            >
-              <option value=""></option>
-              ${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>
-          `)}
+        <label>
+          ${i18next.t('label.headless-link query-parameters')}
+          <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>
+        </label>
 
-        <div>
+        <label inline>
           <input
             type="checkbox"
             id="by-name"
             @change=${(e) => (this.byname = !!e.target?.checked)}
           />
-          <label for="by-name">${i18next.t('label.headless-link by-name')}</label>
-        </div>
+          ${i18next.t('label.headless-link by-name')}
+        </label>
       </div>
     `;
     }
     firstUpdated() {
         const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]');
         this.clipboard = new Clipboard(copybuttons, {
-            target: (trigger => trigger.parentElement.querySelector('textarea'))
+            target: (trigger => trigger.parentElement.querySelector('input'))
         });
         this.getAppliances();
     }
@@ -147,6 +141,18 @@ let LinkBuilder = class LinkBuilder extends LitElement {
         const queryString = this.objectToQueryString(query);
         this.link = fullUrl + (queryString ? '?' + queryString : '');
     }
+    /** Copies the current link; the tab's footer button calls this. */
+    async copyLink() {
+        try {
+            await navigator.clipboard.writeText(this.link || '');
+            this.dispatchEvent(new CustomEvent('copied', { bubbles: true, composed: true }));
+        }
+        catch (e) {
+            const input = this.renderRoot.querySelector('input#link');
+            input?.select();
+            document.execCommand('copy');
+        }
+    }
     objectToQueryString(obj) {
         return Object.keys(obj)
             .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)

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/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        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: 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      const 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 { CommonPopupStyles, ScrollbarStyles } from '@operato/styles'\nimport { InfoFormStyles } from './info-dialog-styles.js'\nimport '@material/web/iconbutton/icon-button.js'\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    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      .fields label[inline] {\n        flex-direction: row;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n      }\n\n      .fields label[inline] input[type='checkbox'] {\n        width: auto;\n        margin: 0;\n        accent-color: var(--md-sys-color-primary);\n      }\n\n      ox-input-key-values {\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-small, 6px);\n        padding: 4px;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      [warn] {\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: var(--popup-font-size-small);\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 class=\"section\">\n        <ox-title-with-help topic=\"operato-board/headless-link\" msgid=\"label.headless-link\">headless link</ox-title-with-help>\n      </div>\n      <div class=\"note\">\n        ${i18next.t('text.headless-link hint', {\n          defaultValue: 'Opens this board full screen with no application chrome - for a wall display or a kiosk.'\n        })}\n      </div>\n\n      <div class=\"fields\">\n        <div class=\"copyable\">\n          <input id=\"link\" type=\"text\" .value=${this.link || ''} readonly @focus=${e => e.target.select()} />\n          <md-icon-button clipboard-copy title=${i18next.t('button.copy-url', { defaultValue: 'Copy link' })}>\n            <md-icon>content_copy</md-icon>\n          </md-icon-button>\n        </div>\n\n        <div class=\"row\">\n          <label>\n            ${i18next.t('label.headless-link query-key')}\n            <input id=\"key\" type=\"text\" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />\n          </label>\n          <label>\n            ${i18next.t('label.headless-link target-appliance')}\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                  .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`<span warn>\n                ${i18next.t('text.appliance token needs security privilege', {\n                  defaultValue: 'Adding an access token needs domain-owner or security query permission.'\n                })}\n              </span>`\n            )}\n          </label>\n        </div>\n\n        <label>\n          ${i18next.t('label.headless-link query-parameters')}\n          <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>\n        </label>\n\n        <label inline>\n          <input\n            type=\"checkbox\"\n            id=\"by-name\"\n            @change=${(e: Event) => (this.byname = !!(e.target as HTMLInputElement)?.checked)}\n          />\n          ${i18next.t('label.headless-link by-name')}\n        </label>\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('input')) 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  /** Copies the current link; the tab's footer button calls this. */\n  async copyLink() {\n    try {\n      await navigator.clipboard.writeText(this.link || '')\n      this.dispatchEvent(new CustomEvent('copied', { bubbles: true, composed: true }))\n    } catch (e) {\n      const input = this.renderRoot.querySelector('input#link') as HTMLInputElement\n      input?.select()\n      document.execCommand('copy')\n    }\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      const 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.d.ts

@@ -1,13 +1,14 @@
 import '@material/web/icon/icon.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
 import { LitElement } from 'lit';
+/** The play-group form - the same shape as group-info-basic.ts, on purpose. */
 export declare class PlayGroupInfoBasic extends LitElement {
     static styles: import("lit").CSSResult[];
     playGroupId?: string;
     playGroup: any;
-    private link?;
     render(): import("lit-html").TemplateResult<1>;
+    private renderProvenance;
     updated(changes: any): void;
     firstUpdated(): void;
     refresh(): Promise<void>;